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 einem Dritten erhalten haben, einfügen und wählen, ob er automatisch in den <head> oder <body> der Seite eingefügt werden soll .
So finden Sie HTML-Felder
- Klicken Sie auf das Zahnrad in der oberen rechten Ecke, um die Einstellungen zu öffnen
- Wählen Sie Online Shop aus dem Menü
- 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 unter Einstellungen → Online-Shop → Tracking eine Seite mit vorgefertigten Feldern für die gängigsten 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.
Eigener GTM: Wenn Sie es vorziehen, alles selbst in Ihrem eigenen Google Tag Manager-Container zu verwalten, können Sie Ihre GTM-ID unter Tracking einfügen 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 Ihrem Template platzieren wollen, setzen Sie das Feld auf Nicht automatisch hinzufügen und rufen Sie den Tag-Namen in Ihrem Smarty-Template 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 unter Einstellungen → Webshop anlegen, gilt für den gesamten Webshop. Wenn Sie ein Skript nur für einzelne Produkte, Kategorien, Seiten, Blogbeiträge oder Landingpages wünschen, können Sie HTML-Felder direkt auf diesen Objekten auf den jeweiligen Bearbeitungsseiten anlegen. Das ist z.B. praktisch für Schema-Markup oder einen Kampagnenpixel, der nur auf einer Landingpage ausgelöst werden soll.
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 Einstellungen → Online Shop → 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, da sonst eine leere Stelle oder ein Fehler auftreten kann.
Was ist der Unterschied zwischen Einstellungen → 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 Shoporamas integriertes serverseitiges 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 nur die GTM-ID unter Tracking in jedem Shop einzufügen.
Wenn Sie Fragen haben, kontaktieren Sie uns bitte unter support@shoporama.dk.
Ähnliche Artikel
Server-seitige Verfolgung in Shoporama
Anleitung zur Einrichtung des serverseitigen Trackings in Ihrem Shoporama-Webshop für eine bessere Datenqualität.
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.