HTML-Felder: Einfügen von Cookiebot, GTM und anderen Skripten in Ihren Online-Shop
Wie Sie Shoporama-HTML-Felder nutzen, um Cookiebot, Google Tag Manager, Facebook Pixel, Chat-Widgets und anderes benutzerdefiniertes HTML/JavaScript in Ihren Online-Shop einzufügen.
Möchtest du Cookiebot, Google Tag Manager, Facebook Pixel, ein Chat-Widget oder einen Verifizierungscode aus der Google Search Console in deinen Webshop integrieren? Das machst du über die HTML-Felder in Shoporama. Hier kannst du den Code, den du von einem Drittanbieter erhalten hast, selbst einfügen und auswählen, ob er automatisch in den <head> oder <body> der Seite eingefügt werden soll.
So findest du die HTML-Felder
- In der linken Seitenleiste findest du den Bereich „Webshop“(gekennzeichnet durch ein Zahnrad-Symbol)
- Klicken Sie auf „HTML-Felder“
So erstellen Sie ein HTML-Feld
- Klicken Sie auf „Neues HTML-Feld hinzufügen“
- Gib dem Feld einen aussagekräftigen Namen ohne Leerzeichen, z. B. „cookiebot“, „chat_widget“ oder „gsc_verify“. Der Name wird als Tag-Name verwendet, falls du das Feld später manuell in einem Theme aufrufen möchtest
- Fügen Sie Ihren Code in das Textfeld ein
- Wählen Sie die Position:
- „Am Ende von <head> einfügen“ für Verifizierungs-Tags, Cookiebot und Skripte, die frühzeitig geladen werden sollen
- Füge am Ende von <head> ein für Chat-Widgets und Skripte, die warten können
- Nicht automatisch hinzufügen, wenn du die Platzierung in einem privaten Theme selbst steuern möchtest
- Klicken Sie auf „Speichern“
Tipp: Du kannst ein Feld löschen, indem du den Inhalt leerst und auf „Speichern“ klickst.
Wo wird der Code im HTML-Code der Seite eingefügt?
Die Auswahl unter „Platzierung“ bestimmt genau, wo dein Code eingefügt wird. Das ist wichtig zu wissen, wenn ein Drittanbieter klare Vorgaben macht, wo sein Skript platziert werden soll:
- Am Ende von <head> einfügen – Der Code wird ganz am Ende des <head>-Tags der Seite eingefügt, also nach den eigenen Meta-Tags des Themes, dem Seitentitel und den Stylesheets, aber vor dem eigenen Tracking-Skript von Shoporama und vor dem Code von Apps. Daher wird ein Cookie-Banner von hier aus geladen, bevor das Tracking beginnt
- Am Ende von <body> einfügen – Der Code wird ganz unten auf der Seite eingefügt, direkt nach dem eigenen Inhalt des Themes und dem JavaScript. Die Seite ist bereits vollständig gerendert, bevor Ihr Skript startet
- Nicht automatisch hinzufügen – der Code wird nicht von selbst eingefügt. Er wird erst angezeigt, wenn du den Tag-Namen des Feldes in einem Theme aufrufst
Ein HTML-Feld, das du unter „Webshop“ → „HTML-Felder“ erstellst, erscheint auf allen Seiten des Shops, auch im Warenkorb, an der Kasse und auf der Bestätigungsseite. Wenn Sie mehrere Felder mit derselben Position haben, werden diese in alphabetischer Reihenfolge nach Feldnamen eingefügt. Sollten zwei Skripte in einer bestimmten Reihenfolge geladen werden müssen, können Sie dies daher über die Benennung steuern, z. B. 1_cookiebot und 2_chat.
Der Inhalt wird genau so eingefügt, wie du ihn geschrieben hast. Shoporama nimmt keine Änderungen an deinem Code vor, und eventuelle Smarty-Codes im Feld werden nicht ausgewertet – das Feld enthält reines HTML.
Typische Anwendungsfälle
- Cookiebot – Cookie-Einwilligungsbanner. Wenn du es in <head> einfügst, kann es andere Tracking-Skripte blockieren, bis der Kunde seine Einwilligung erteilt hat
- Google Search Console / Bing Webmaster Tools – Verifizierungs-Meta-Tags, die bestätigen, dass Sie der Eigentümer der Domain sind
- Hotjar, Microsoft Clarity, Mouseflow – Heatmaps und Sitzungsaufzeichnungen
- Chat-Widgets – Tidio, Zendesk Chat, Intercom, Drift und ähnliche
- Benutzerdefiniertes HTML, CSS oder JavaScript – clevere Zusatzfunktionen in Ihrem eigenen Design
Beispiel: Verifizierungscodes für Suchmaschinen und Werbenetzwerke
Google Search Console, Bing Webmaster Tools, Pinterest und Meta Business Manager verlangen alle einen Nachweis, dass Sie der Eigentümer der Domain sind, bevor sie Ihnen Zugriff auf Daten zu Ihrem Shop gewähren. Sie stellen einen kleinen Meta-Tag zur Verfügung, der auf Ihrer Startseite platziert werden muss. Ein Meta-Tag funktioniert nur, wenn er sich im <head> der Seite befindet; daher muss die Platzierung hier immer „Am Ende des <head> einfügen“ lauten.
Erstellen Sie ein Feld, z. B. „Verifizierung“, und sammeln Sie darin alle Ihre Verifizierungscodes. Ein Feld darf gerne mehrere Zeilen enthalten:
<meta name="google-site-verification" content="DEIN-CODE-AUS-SEARCH-CONSOLE">
<meta name="msvalidate.01" content="DEIN-CODE-AUS-BING">
<meta name="p:domain_verify" content="DEIN-CODE-VON-PINTEREST">
<meta name="facebook-domain-verification" content="DEIN-CODE-VON-META">Ersetze die Werte in content="..." durch die, die du vom jeweiligen Anbieter erhalten hast, und füge nur die Zeilen ein, die du tatsächlich benötigst. Bietet der Anbieter mehrere Methoden an, wähle diejenige aus, die „HTML-Tag“ oder „Meta-Tag“ heißt. So musst du keine Datei auf der Domain hochladen.
Verwende den HTML-Block im Seiten-Designer nicht für Verifizierungs-Tags. Er heißt in Montana „Benutzerdefinierter Code“ und fügt den Code nur dort ein, wo sich der Block auf der Seite befindet, also im Seiteninhalt. Das Meta-Tag muss im <head> der Seite stehen, weshalb die Suchmaschine es nicht finden kann, wenn es über einen Block eingefügt wird. Es muss in ein HTML-Feld hier auf der Seite eingefügt werden.
Löschen Sie das Feld anschließend auf keinen Fall. Suchmaschinen und Werbenetzwerke überprüfen den Code regelmäßig erneut. Verschwindet er, verlieren Sie den Zugriff auf die Daten und müssen die Verifizierung von vorne beginnen.
Eine Google Ads-Conversion-ID, eine GA4-Measurement-ID oder eine Facebook-Pixel-ID müssen hingegen nicht in ein HTML-Feld eingegeben werden. Diese gibst du unter „Webshop“ → „Tracking“ ein, wo Shoporama sie selbst mit E-Commerce-Events verknüpft. Siehe den Abschnitt „HTML-Felder“ oder „Tracking“ weiter unten.
Beispiel: Chat-Widget und Live-Chat
Tidio, Zendesk, Intercom, Crisp, Smartsupp und die meisten anderen Chat-Tools stellen dir einen fertigen Code-Schnipsel zur Verfügung, den du einfach einfügen musst. Eine Chat-Blase sollte nicht das Erste sein, was der Kunde sieht, und sie darf gerne erst nach dem Rest der Seite geladen werden. Deshalb gehört sie ganz nach unten:
- Klicken Sie auf „Neues HTML-Feld hinzufügen“ und nennen Sie das Feld z. B. „chat_widget“
- Fügen Sie den gesamten Code-Schnipsel des Chat-Anbieters ein, einschließlich <script> und </script>
- Stellen Sie die „Position“ auf „Am Ende einfügen“ unter <body> ein
- Klicken Sie auf „Speichern“
Der Codeausschnitt sieht in der Regel so aus, wobei die ID Ihre Konto-ID beim Anbieter ist:
<script src="https://widget.dit-chatvaerktoej.dk/DIN-KONTO-ID.js" async></script>Heatmaps und Sitzungsaufzeichnungen von z. B. Hotjar, Microsoft Clarity oder Mouseflow werden auf die gleiche Weise eingerichtet, sollten jedoch frühzeitig geladen werden, um den gesamten Besuch aufzeichnen zu können. Befolge immer die Anweisungen des Anbieters: Wenn in der Anleitung „head“ steht, wähle „Am Ende von <head> einfügen“.
Wenn Sie ein Cookie-Banner verwenden, denken Sie daran, dass Chat-Funktionen, Heatmaps und ähnliche Tools häufig Cookies setzen. Diese müssen daher gemäß den Anweisungen des Cookie-Banners so konfiguriert werden, dass sie erst dann aktiv werden, wenn der Kunde seine Einwilligung erteilt hat. Weitere Informationen findest du in unserem Leitfaden zur Cookie-Einwilligung und zum Consent Mode.
Beispiel: Eigenes CSS, JavaScript und Widgets
Eine kleine Korrektur am Design
Wenn du nur ein einzelnes Detail korrigieren möchtest, ohne das Theme zu öffnen, kannst du dein CSS in ein HTML-Feld mit der Position „Am Ende einfügen“ unter <head> einfügen. Da das Feld nach den Stylesheets des Themes eingefügt wird, haben deine Regeln grundsätzlich Vorrang vor denen des Themes:
<style>
/* Ersetze .deine-Klasse durch die Klasse, die du im Inspektor des Browsers findest */
.deine-Klasse { background: #f5f5f5; }
</style>Hast du hingegen ein kleines Stück JavaScript, das ausgeführt werden soll, sobald die Seite geladen ist, füge es in ein Feld mit der Position „Am Ende einfügen“ in <body> ein. Beschränke dich dabei auf Kleinigkeiten: Größere Änderungen am Design gehören ins Theme, wo sie leichter zu überblicken sind.
Ein Widget, das an einer bestimmten Stelle angezeigt werden soll
Einige Widgets, z. B. Bewertungsanzeigen und Preisrechner, bestehen aus zwei Teilen: einem Skript, das das Tool lädt, und einem HTML-Code, der festlegt, an welcher Stelle auf der Seite das Widget dargestellt wird. Teile sie in zwei Felder auf:
- Das Skript selbst fügst du in ein Feld mit der Position „Am Ende von <head> einfügen“ oder „Am Ende von <body> einfügen“ ein, je nachdem, was der Anbieter empfiehlt
- Den Widget-Code fügen Sie in ein Feld mit der Position „Nicht automatisch hinzufügen “ ein und geben als Tag-Namen die Stelle im Theme an, an der das Widget angezeigt werden soll
Weiter unten im Abschnitt „HTML-Felder manuell in einem Theme verwenden“ erfährst du, wie du den Tag-Namen festlegst.
HTML-Felder oder Tracking – was verwende ich?
Shoporama bietet außerdem unter „Webshop → Tracking“ eine Seite mit vorgefertigten Feldern für die am häufigsten verwendeten Tools:
- Microsoft Ads (Bing)
- Google Analytics 4 (Mess-ID)
- Google Ads Conversion-ID
- Pinterest, Snapchat, TikTok und LinkedIn
- Facebook-Pixel-ID und Conversion-API
Wenn Sie nur eine ID für eines dieser Tools haben, geben Sie diese bitte unter „Tracking“ ein. Shoporama sorgt automatisch für die korrekte Einrichtung und die E-Commerce-Events. Verwenden Sie HTML-Felder erst dann, wenn Sie einen Code-Schnipsel haben, der nicht in eines der vordefinierten Felder passt, z. B. das vollständige Skript von Cookiebot oder ein Verifizierungs-Tag.
Integriertes serverseitiges Tracking: Shoporama verfügt über eine eigene serverseitige Tracking-Lösung (sGTM über Stape). Sie müssen keinen Tag Manager selbst einrichten – aktivieren Sie einfach das serverseitige Tracking unter „Tracking“, geben Sie Ihre IDs für GA4, Facebook und Google Ads ein, und Shoporama sendet E-Commerce-Events serverseitig. Sie erhalten auch cookie-freie Signale, wenn keine Einwilligung vorliegt. Zusatzoption ab 89 DKK/Monat zzgl. MwSt.
Eigener GTM: Wenn du es vorziehst, alles selbst in deinem eigenen Google Tag Manager-Container zu verwalten, kannst du das GTM-Snippet als HTML-Feld einfügen (am Ende von <head>) und Cookiebot, Pixel, Hotjar usw. innerhalb von GTM steuern. Die beiden Lösungen sollten nicht gleichzeitig laufen.
HTML-Felder manuell in einem Theme verwenden
Wenn du ein eigenes Theme hast und ein HTML-Feld an einer bestimmten Stelle in deiner Vorlage platzieren möchtest, stelle das Feld auf „Nicht automatisch hinzufügen“ ein und rufe den Tag-Namen in deiner Smarty-Vorlage auf:
<{$webshop->getHtmlField('cookiebot')}>Der Inhalt wird unverändert gerendert, sodass <script>-Tags wie erwartet funktionieren. Denken Sie daran, die automatische Einfügung zu deaktivieren, da das Feld sonst doppelt erscheint.
HTML-Felder an anderen Stellen als im Webshop
Das HTML-Feld, das Sie unter „Webshop“ erstellen, gilt für den gesamten Webshop. Wenn Sie ein Skript nur für einzelne Produkte, Kategorien, Seiten, Blogbeiträge oder Landingpages verwenden möchten, können Sie HTML-Felder direkt auf diesen Objekten auf deren jeweiligen Bearbeitungsseiten erstellen. Das ist beispielsweise praktisch für Schema-Markup oder ein Kampagnen-Pixel, das nur auf einer Landingpage ausgelöst werden soll.
Wichtiger Hinweis zu Sicherheit und Geschwindigkeit
- Füge nur Code aus Quellen ein, denen du vertraust. Schädliches oder fehlerhaftes JavaScript kann den gesamten Shop beeinträchtigen, einschließlich des Checkouts
- Jedes zusätzliche Skript beeinträchtigt die Seitengeschwindigkeit. Verwende „async“ oder „defer“, wenn der Drittanbieter dies empfiehlt
- Testen Sie anschließend immer Ihren Shop, z. B. indem Sie im Browser mit der rechten Maustaste klicken und „Quellcode anzeigen“ auswählen, um zu überprüfen, ob der Code übernommen wurde
Häufig gestellte Fragen
Wo finde ich die HTML-Felder im Admin-Bereich?
Gehe zu „Webshop“ → „HTML-Felder“. Wenn der Menüpunkt nicht sichtbar ist, fehlen dir möglicherweise die entsprechenden Berechtigungen – wende dich an die Person, die deinen Account eingerichtet hat.
Kann ich meinen Shop beschädigen, wenn ich an den HTML-Feldern herumspiele?
Deine Produkte, Bestellungen und Kunden bleiben davon unberührt. Im schlimmsten Fall kann ein falscher Codeabschnitt dazu führen, dass Seiten seltsam aussehen oder die Leistung beeinträchtigt wird. Leere das Feld und speichere – dann ist das Problem wieder behoben.
Ich habe das Meta-Tag mit einem Block im Seiten-Designer eingefügt, aber Google kann es nicht finden. Warum?
Weil der HTML-Block im Seiten-Designer (in Montana heißt er „Benutzerdefinierter Code“) den Code in den Seiteninhalt einfügt, nicht in den <head>-Bereich der Seite. Ein Verifizierungs-Meta-Tag funktioniert nur im <head>-Bereich. Entferne den Block wieder und füge das Tag stattdessen in ein HTML-Feld unter „Webshop“ → „HTML-Felder“ ein, mit der Position „Am Ende von <head> einfügen“. Erfahre mehr über den Seiten-Designer.
Wie teste ich, ob mein HTML-Feld funktioniert?
Öffne den Shop in einem inkognito-Browser-Tab, klicke mit der rechten Maustaste und wähle „Quellcode anzeigen“. Suche nach einem Teil deines Codes (z. B. einem Kommentar oder einer Tag-ID). Für Tracking-Skripte kannst du Browser-Erweiterungen wie Tag Assistant (GTM/GA4) oder Pixel Helper (Facebook) installieren.
Wie lösche ich ein HTML-Feld, das ich nicht mehr verwende?
Leere den gesamten Inhalt des Feldes und klicke auf „Speichern“. Das Feld verschwindet. Überprüfe zunächst, ob der Tag-Name nicht irgendwo in einem privaten Theme manuell aufgerufen wird, da es sonst zu einer leeren Stelle oder einem Fehler kommen kann.
Was ist der Unterschied zwischen „Webshop → Tracking“ und „HTML-Felder“?
„Tracking“ bietet vorgefertigte Felder für die am häufigsten verwendeten Tools (GA4, Facebook-Pixel, Google Ads, Microsoft Ads usw.), in die du lediglich deine ID eingibst. An derselben Stelle aktivierst du das integrierte serverseitige Tracking von Shoporama, sodass du keinen Tag-Manager-Container selbst verwalten musst. HTML-Felder sind die flexible Lösung für alles andere – z. B. Cookiebot, Verifizierungscodes und Chat-Widgets. Wenn Sie die Wahl haben, nutzen Sie „Tracking“ – Shoporama bindet die offiziellen Integrationen korrekt ein.
Soll Cookiebot in <head> oder <body> eingefügt werden?
Cookiebot muss in <head> eingefügt werden, damit es Tracking-Skripte blockieren kann, bis der Kunde seine Einwilligung erteilt hat. Wähle daher im HTML-Feld „Am Ende von <head> einfügen“ aus. Befolge anschließend die Anleitung von Cookiebot, um andere Skripte mit Einwilligungsattributen zu kennzeichnen.
Beeinflussen HTML-Felder die Seitengeschwindigkeit?
Ja – jedes zusätzliche Skript verlängert die Ladezeit und kann die Core Web Vitals beeinträchtigen. Halten Sie die Anzahl gering, verwenden Sie nach Möglichkeit „async“ oder „defer“ und erwägen Sie, mehrere Skripte im Google Tag Manager zu bündeln, damit sie an einer Stelle gesteuert geladen werden.
Muss ich das in jedem meiner Webshops neu einrichten?
Ja – HTML-Felder gelten pro Webshop. Wenn du die Konfiguration über mehrere Shops hinweg einheitlich halten möchtest, ist es am einfachsten, alles in einen GTM-Container zu legen und das GTM-Snippet als HTML-Feld in jeden Shop einzufügen.
Ich habe mein HTML-Feld gespeichert, aber der Code wird im Shop nicht angezeigt
Überprüfe zunächst, ob unter „Platzierung“ nicht „Nicht automatisch hinzufügen“ eingestellt ist – in diesem Fall wird der Code nur angezeigt, wenn er vom Theme aufgerufen wird. Ist die Platzierung korrekt, liegt es in der Regel daran, dass die Seiten eines Live-Shops bis zu vier Stunden lang in einem HTML-Cache gespeichert werden. Du siehst immer die aktuellste Version, wenn du im Admin-Bereich desselben Browsers angemeldet bist, etwas im Warenkorb hast oder einen beliebigen Parameter in die Adresse einfügst, z. B. ?test=1. Spätestens nach vier Stunden wird der Cache automatisch aktualisiert, und alle Besucher sehen den Code.
Soll mein Chat-Widget im <head> oder im <body> stehen?
Im „body“. Eine Chat-Blase muss nicht bereitstehen, bevor die Seite gerendert ist, und ein Skript im <head> verzögert die Anzeige des Inhalts. Wählen Sie daher „Am Ende in <body> einfügen“. Ausnahmen bilden Tools, die selbst den <head>-Bereich erfordern: Cookie-Banner, die andere Skripte rechtzeitig blockieren müssen, und Heatmap-Tools, die den gesamten Besuch erfassen müssen.
Kann ich ein Skript nur auf einer Kampagnenseite oder einem Produkt platzieren?
Ja. Die gleichen HTML-Felder gibt es für einzelne Produkte, Kategorien, Seiten, Blogbeiträge und Landingpages. Ein Feld, das sich beispielsweise auf einer Landingpage befindet, wird nur eingefügt, wenn genau diese Seite angezeigt wird, und es wird hinter dem Feld platziert, das für den gesamten Shop gilt. Das ist praktisch, wenn ein Werbepartner ein Pixel auf einer bestimmten Kampagnenseite verlangt, ohne dass es im restlichen Shop ausgelöst wird.
Der Anbieter bittet mich, eine HTML-Datei auf meiner Domain zu hinterlegen. Was muss ich tun?
Wähle eine andere Methode. Fast alle Suchmaschinen und Werbenetzwerke bieten auch die Verifizierung über ein Meta-Tag an, und diese Methode eignet sich für HTML-Felder. Kopiere das Tag einfach in ein Feld an der Stelle „Füge am Ende von <head> ein “ und klicke auf „Speichern“. Wenn du nur die Dateimethoden nutzen kannst, schreibe bitte an support@shoporama.dk, dann finden wir eine Lösung.
Wenn Sie Fragen haben, können Sie uns gerne unter support@shoporama.dk schreiben.
Ähnliche Artikel
Server-seitige Verfolgung in Shoporama
Umfassender Leitfaden zum serverseitigen Tracking in Shoporama. Bessere Datenqualität, weniger Verluste durch Ad-Blocker, Produkt-IDs, die mit...
Cookie-Zustimmung und Zustimmungsmodus v2
So richten Sie die kostenlose Cookie-Einwilligungs-App von Shoporama ein: Kategorien, automatische Blockierung, Widerruf der Einwilligung und...
DSGVO und Cookie-Richtlinien für Ihren Webshop
Überblick über die DSGVO und die Cookie-Vorschriften für Online-Shops: Einwilligung vor dem Tracking, Dokumentation und Cookie-Richtlinie sowie die...
Vereinbarung zur Datenverarbeitung
Leitfaden zur Genehmigung der Datenverarbeitungsvereinbarung mit Shoporama im Rahmen der GDPR.
Seitengestalter
Lær hvordan du bruger Sidedesigner i Shoporama til at opbygge sidelayouts med blokke som hero-sektioner, produktlister, bannere og meget mere, helt...
Verwandte Funktionen
dataLayer
dataLayer ist das Bindeglied zwischen Ihrem Webshop und Google Tag Manager. Erfahren Sie, wie E-Commerce-Daten wie Produktansichten und Käufe an...
Popup-Fenster mit Beendigungsabsicht
Ein Exit Intent Popup erscheint, wenn ein Besucher im Begriff ist, Ihren Online-Shop zu verlassen. Erfahren Sie mehr über Auslöser, Inhalte, das...
GTM - Google Tag Manager
Google Tag Manager verwaltet Tracking-Codes ohne Codeänderungen. Lesen Sie über GTM, Tags, Auslöser und E-Commerce-Tracking für Webshops.
Einschub
Ein Slide-In schiebt sich vom Rand des Bildschirms mit einem Angebot oder einer Newsletter-Anmeldung hinein. Erfahren Sie mehr über Typen,...
Klebrige Leiste
Eine Sticky Bar ist eine permanente Leiste in Ihrem Webshop mit wichtigen Informationen wie kostenlosem Versand und Sonderangeboten. Erfahren Sie...
Zustimmungsmodus
Der Zustimmungsmodus steuert Google-Tags auf der Grundlage der Cookie-Zustimmung des Nutzers. Erfahren Sie, wie er funktioniert, warum v2...
Serverseitiges GTM (sGTM)
Server-seitiges GTM ist ein Tag-Container auf einem Server, der Ereignisse aus Ihrem Webshop über Ihre eigene Domain empfängt. Erfahren Sie mehr...
Cookie-Zustimmung - kostenlos und GDPR-freundlich
Kostenlose Cookie-Einwilligung in Shoporama enthalten. Google-Zustimmungsmodus, kategorisierte Cookies, automatische Blockierung und...
Server-seitiges Tracking - präzises Tracking ohne Cookies
Server-seitiges Tracking für Google, Facebook, Pinterest, TikTok, LinkedIn und Microsoft Ads. Unbeeinflusst von Adblockern. Enthalten in Shoporama...