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.
Benötigen Sie einen Cookiebot, Google Tag Manager, Facebook Pixel, ein Chat-Widget oder einen Verifizierungscode von Google Search Console in Ihrem Webshop? Sie tun dies über HTML-Felder in Shoporama. Hier können Sie den Code, den Sie von Dritten erhalten haben, einfügen und wählen, ob er automatisch in den <head> oder <body> der Seite eingefügt werden soll .
Wie Sie HTML-Felder finden
- In der linken Seitenleiste finden Sie den Bereich Online Shop(gekennzeichnet durch ein Zahnradsymbol)
- Klicken Sie auf HTML-Felder
So erstellen Sie ein HTML-Feld
- Klicken Sie auf Neues HTML-Feld hinzufügen
- Geben Sie dem Feld einen beschreibenden Namen ohne Leerzeichen, z. B. cookiebot, chat_widget oder gsc_verify. Der Name wird als Tag-Name verwendet, wenn Sie das Feld später in einem Thema manuell aufrufen wollen
- Fügen Sie Ihren Code in das Textfeld ein
- Wählen Sie Position:
- Einfügen am Ende von <head> für Verifizierungs-Tags, Cookiebot und Skripte, die früh geladen werden müssen
- Zuletzt in <body> einfügen für Chat-Widgets und Skripte, die warten müssen
- Nicht automatisch einfügen, wenn Sie die Platzierung in einem privaten Thema kontrollieren wollen
- Klicken Sie auf Speichern
Tipp: Sie können ein Feld löschen, indem Sie den Inhalt leeren und auf Speichern klicken.
Typische Anwendungen
- Cookiebot - Cookie-Zustimmungsbanner. Wenn Sie es zuerst in <head> einfügen, kann es andere Tracking-Skripte blockieren, bis der Kunde seine Zustimmung gegeben hat
- Google Search Console / Bing Webmaster Tools - Überprüfung der Meta-Tags, die bestätigen, dass Sie 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 - intelligente Zusatzfunktionen in Ihrem eigenen Design
HTML-Felder oder Tracking - was soll ich verwenden?
Shoporama hat auch eine Seite unter Webshop → Tracking mit vorgefertigten Feldern für die am häufigsten verwendeten Tools:
- Google Tag Manager (GTM-ID)
- Google Analytics 4 (Messungs-ID)
- Google Ads Umrechnungs-ID
- Google Händler-ID
- Facebook Pixel ID und Conversion API
Wenn Sie nur eine ID für eines dieser Tools haben, geben Sie diese unter Tracking ein. Shoporama kümmert sich automatisch um die korrekte Einrichtung und die E-Commerce-Ereignisse. Verwenden Sie HTML-Felder nur dann, wenn Sie ein Stück Code haben, das nicht in eines der festen Felder passt, wie 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 via Stape). Sie müssen nicht selbst einen Tag Manager 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-Ereignisse serverseitig. Sie erhalten auch eine Cookie-freie Signalisierung, wenn keine Zustimmung vorliegt. Optional ab 89 kr/md ex. MWST.
Eigenes GTM: Wenn Sie es vorziehen, alles selbst in Ihrem eigenen Google Tag Manager-Container zu verwalten, können Sie das GTM-Snippet als HTML-Feld einfügen (am Ende von <head>) und Cookiebot, Pixel, Hotjar usw. innerhalb von GTM verwalten. Die beiden Lösungen sollten nicht gleichzeitig laufen.
HTML-Felder manuell in einem Theme verwenden
Wenn Sie ein eigenes Theme haben und ein HTML-Feld an einer bestimmten Stelle in Ihrer Vorlage platzieren möchten, setzen Sie das Feld auf Nicht automatisch hinzufügen und rufen Sie den Tag-Namen in Ihrer Smarty-Vorlage auf:
<{$webshop->getHtmlField('cookiebot')}>Der Inhalt wird roh gerendert, so dass <script>-Tags wie erwartet funktionieren. Denken Sie daran, die automatische Einfügung auszuschalten, da das Feld sonst doppelt eingefügt wird.
HTML-Felder an anderen Stellen als im Webshop
Das HTML-Feld, das Sie im Online Shop erstellen, gilt für den gesamten Online Shop. Wenn Sie ein Skript nur für einzelne Produkte, Kategorien, Seiten, Blog-Einträge oder Landingpages wünschen, können Sie HTML-Felder direkt auf diesen Objekten unter den jeweiligen Bearbeitungsseiten erstellen. Das ist z.B. praktisch für Schema-Markup oder ein Kampagnen-Pixel, das nur auf einer Landingpage ausgelöst werden muss.
Wichtig für Sicherheit und Geschwindigkeit
- Fügen Sie nur Code aus Quellen ein, denen Sie vertrauen. Schlechtes oder fehlerhaftes JavaScript kann sich auf den gesamten Shop auswirken, auch auf den Checkout.
- Jedes zusätzliche Skript geht auf Kosten der Seitengeschwindigkeit. Verwenden Sie async oder defer, wenn es von Dritten empfohlen wird
- Testen Sie Ihren Shop immer im Nachhinein, z. B. indem Sie im Browser mit der rechten Maustaste klicken und Quellcode anzeigen wählen, um zu sehen, ob der Code enthalten ist
Häufig gestellte Fragen
Wo finde ich die HTML-Felder in der Verwaltung?
Gehen Sie zu Webshop → HTML-Felder. Wenn der Menüpunkt nicht sichtbar ist, hat Ihr Benutzer möglicherweise keine Rechte - fragen Sie die Person, die Sie eingerichtet hat.
Kann ich meinen Shop durch die Eingabe von HTML-Feldern kaputt machen?
Sie haben keinen Einfluss auf Ihre Produkte, Bestellungen und Kunden. Schlimmstenfalls kann ein falscher Codeschnipsel die Seiten seltsam aussehen lassen oder die Leistung beeinträchtigen. Löschen Sie das Feld und speichern Sie es, und schon ist es wieder weg.
Wie kann ich testen, ob mein HTML-Feld funktioniert?
Öffnen Sie den Shop in einer privaten Browser-Registerkarte, klicken Sie mit der rechten Maustaste und wählen Sie Quellcode anzeigen. Schauen Sie sich einen Teil Ihres Codes an (z. B. einen Kommentar oder eine Tag-ID). Für Tracking-Skripte können Sie Browsererweiterungen wie Tag Assistant (GTM/GA4) oder Pixel Helper (Facebook) installieren.
Wie lösche ich ein HTML-Feld, das ich nicht mehr verwende?
Leeren Sie den gesamten Inhalt des Feldes und klicken Sie auf Speichern. Das Feld verschwindet dann. Vergewissern Sie sich zunächst, dass der Tag-Name nicht irgendwo in einem privaten Thema manuell aufgerufen wird, sonst kann es sein, dass Sie eine leere Stelle oder einen Fehler erhalten.
Was ist der Unterschied zwischen Online Shop → Tracking und HTML-Feldern?
Tracking hat vorgefertigte Felder für die am häufigsten verwendeten Tools (GA4, Facebook Pixel, Google Ads, Microsoft Ads usw.), in die Sie einfach Ihre ID einfügen. An der gleichen Stelle aktivieren Sie das in Shoporama eingebaute serverseitige Tracking, so dass Sie nicht selbst einen Tag Manager-Container pflegen müssen. HTML-Felder sind die kostenlose Lösung für alles andere - wie Cookiebot, Verifizierungscodes und Chat-Widgets. Wenn Sie die Wahl haben, verwenden Sie Tracking - Shoporama verbindet die offiziellen Integrationen korrekt.
Sollte Cookiebot in <head> oder <body> eingefügt werden?
Cookiebot sollte zuerst in den <head> eingefügt werden, um Tracking-Skripte zu blockieren, bis der Kunde seine Zustimmung gegeben hat. Wählen Sie daher im HTML-Feld Zuletzt in <head> einfügen. Befolgen Sie dann die Anweisungen von Cookiebot zur Kennzeichnung anderer Skripte mit Zustimmungsattributen.
Beeinflussen HTML-Felder die Seitengeschwindigkeit?
Ja - jedes zusätzliche Skript kostet Ladezeit und kann Core Web Vitals beeinträchtigen. Halten Sie die Anzahl der Skripte gering, verwenden Sie async oder verschieben Sie sie, wenn möglich, und ziehen Sie in Erwägung, mehrere Skripte im Google Tag Manager zu bündeln, damit sie an einer Stelle verwaltet geladen werden.
Muss ich es in jedem meiner eCommerce-Shops neu einrichten?
Ja - die HTML-Felder werden pro Online-Shop eingerichtet. Wenn Sie es über mehrere Shops hinweg konsistent halten möchten, ist es am einfachsten, alles in einen GTM-Container zu packen und das GTM-Snippet als HTML-Feld in jeden Shop einzufügen.
Wenn Sie Fragen haben, kontaktieren Sie uns bitte unter support@shoporama.dk.
Ähnliche Artikel
Server-seitige Verfolgung in Shoporama
Vollständige Anleitung zum Server-seitigen Tracking in Shoporama. Bessere Datenqualität, weniger Ad-Blocker-Verluste und schnellere Seiten, ohne...
Cookie-Zustimmung und Zustimmungsmodus v2
Anleitung zum Einrichten der Cookie-Zustimmung mit Google Consent Mode v2 in Shoporama, um die GDPR zu erfüllen und Ihr Tracking zu optimieren.
Cookie-Zustimmung und GDPR
Leitfaden zur Cookie-Einwilligung und GDPR in Shoporama, einschließlich Google Consent Mode v2, Cookie-Kategorien und Widerruf der Einwilligung.
Vereinbarung zur Datenverarbeitung
Leitfaden zur Genehmigung der Datenverarbeitungsvereinbarung mit Shoporama im Rahmen der GDPR.