HTML-Felder: Einfügen von Cookiebot, GTM und anderen Skripten in Ihren Online-Shop

Möchtest du Cookiebot, Google Tag Manager, Facebook Pixel, ein Chat-Widget oder einen Verifizierungscode aus der Google Search Console in deinen Webshop einbinden? 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 - oder -Tag der Seite eingefügt werden soll.

So findest du die HTML-Felder

1. In der linken Seitenleiste findest du den Bereich „Webshop“(gekennzeichnet durch ein Zahnrad-Symbol)
2. Klicken Sie auf „HTML-Felder“

So erstellen Sie ein HTML-Feld

1. Klicken Sie auf „Neues HTML-Feld hinzufügen“
2. 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
3. Fügen Sie Ihren Code in das Textfeld ein
4. Wählen Sie die Position:
   • „Am Ende von einfügen“ für Verifizierungs-Tags, Cookiebot und Skripte, die frühzeitig geladen werden sollen
   • Füge am Ende von 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
5. Klicken Sie auf „Speichern“

Wo wird der Code im HTML-Code der Seite eingefügt?

Die Auswahl unter „Platzierung“ bestimmt genau, wo Ihr Code eingefügt wird. Das ist wichtig zu wissen, wenn ein Drittanbieter klare Vorgaben dazu macht, wo sein Skript platziert werden soll:

• Am Ende von einfügen – Der Code wird ganz am Ende des -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 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, wird auf allen Seiten des Shops angezeigt, auch im Warenkorb, an der Kasse und auf der Bestätigungsseite. Wenn du mehrere Felder mit derselben Position hast, werden diese in alphabetischer Reihenfolge nach Feldnamen eingefügt. Sollten zwei Skripte in einer bestimmten Reihenfolge geladen werden müssen, kannst du 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 besteht aus reinem HTML.

Typische Anwendungsfälle

• Cookiebot – Cookie-Einwilligungsbanner. Wenn du es in 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 im der Seite steht; daher muss die Platzierung hier immer „Am Ende des einfügen“ lauten.

Erstellen Sie ein Feld, z. B. „Verifizierung“, und sammeln Sie darin alle Ihre Verifizierungscodes. Ein Feld kann gerne mehrere Zeilen enthalten:

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.

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:

1. Klicken Sie auf „Neues HTML-Feld hinzufügen“ und benennen Sie das Feld z. B. „chat_widget“
2. Fügen Sie den gesamten Code-Schnipsel des Chat-Anbieters ein, einschließlich
3. Stellen Sie die „Position“ auf „Am Ende einfügen“ unter ein
4. Klicken Sie auf „Speichern“

Der Codeausschnitt sieht in der Regel so aus, wobei die ID Ihre Konto-ID beim Anbieter ist:

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 einfügen“.

Wenn Sie ein Cookie-Banner verwenden, denken Sie daran, dass Chat, 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 einfügen. Da das Feld nach den Stylesheets des Themes eingefügt wird, haben deine Regeln grundsätzlich Vorrang vor denen des Themes:

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“ unter ein. Beschränke dich dabei auf Kleinigkeiten: Größere Änderungen am Design gehören in das 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 einfügen“ oder „Am Ende von 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.

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