Implementierung von Tracking in ein Shoporama-Thema

Dieser Leitfaden richtet sich an Theme-Entwickler und Freiberufler, die E-Commerce-Tracking in einem Shoporama-Theme implementieren möchten. Wir behandeln das in Shoporama eingebaute Tracking, die automatische Datenebene, die Einrichtung des Google Tag Managers und wie Sie benutzerdefinierte Ereignisse in Ihrem eigenen Theme auslösen können.

1. nutzen Sie Shoporama's eingebautes Tracking

Bevor Sie selbst Code schreiben, sollten Sie das Tracking-Modul von Shoporama nutzen. Sie finden es in der linken Seitenleiste unter Online Store (Zahnradsymbol) → Tracking. Aktivieren Sie Tracking, wählen Sie die Plattformen aus, an die Sie Daten senden möchten, und geben Sie Ihre IDs und Zugangstokens ein.

Das Modul unterstützt:

• Facebook Pixel und Conversion API
• Google Ads (inkl. Offline-Konversionen)
• Microsoft-Anzeigen
• Google GA4
• Pinterest, Snapchat, TikTok und LinkedIn
• Serverseitiges Tracking über Ihre eigene Subdomain (umgeht Adblocker)
• Zustimmungsmodus v2

Wenn das Tracking-Modul aktiv ist, feuert Shoporama automatisch Events an die ausgewählten Plattformen. Eine komplette GA4-E-Commerce-Datenschicht sowie ein Google Tag Manager-Container werden ebenfalls an das Frontend Ihres Shops übertragen, wenn Sie in den Shop-Einstellungen eine GTM-ID angegeben haben.

2. Die automatische Datenebene

Die Standardthemen (Delaware, Montana, Massachusetts usw.) enthalten eine partielle Datei namens partials/datalayer.html. Er sendet GA4-konforme E-Commerce-Ereignisse an window.dataLayer, sobald das Tracking im Shop aktiviert ist.

Die folgenden Ereignisse werden automatisch durch das Thema ausgelöst:

Ein typischer view_item-Push, der vom Thema generiert wird, sieht wie folgt aus:

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ ecommerce: null }); window.dataLayer.push({ event: 'view_item', ecommerce: { items: [{ item_id: '12345', item_name: 'Beispielprodukt', affiliation: 'Mein Webshop', currency: 'DKK', index: 0, item_brand: 'Brand', price: 199.00, quantity: 1 }] });

Wenn Sie Ihr eigenes Thema von Grund auf neu erstellen, können Sie templates/partials/datalayer.html aus dem Delaware-Thema kopieren und in Ihre global.html einfügen:

<{include file="partials/datalayer.html"}>

3. Google Tag Manager über HTML-Felder einrichten

Wenn Sie das Feld Google Tag Manager Container ID in Ihren Shop-Einstellungen ausgefüllt haben, fügt Shoporama das GTM-Snippet automatisch für Sie ein - es befindet sich am Ende von partials/datalayer.html.

Wenn Sie GTM (oder andere Skripte wie Cookiebot, Hotjar oder Klaviyo) manuell steuern möchten, müssen Sie stattdessen HTML-Felder verwenden. Gehen Sie zu Webshop → HTML-Felder. Hier können Sie benannte Felder erstellen und wählen, ob sie automatisch in den Head oder Body eingefügt werden sollen oder ob Sie sie manuell über einen Tag-Namen in Ihrem Theme verwenden möchten.

Ein typisches GTM-Snippet in einem HTML-Feld, das auf "Automatisch zum Kopf hinzufügen" eingestellt ist, sieht wie folgt aus:

<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:''';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!-- Ende Google Tag Manager -->

Denken Sie auch an das <noscript> Fallback im Body-Feld:

<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- Ende Google Tag Manager (noscript) -->

Lesen Sie mehr über die Funktionsweise von HTML-Feldern in HTML-Felder: Cookiebot, GTM und andere Skripte einfügen.

4. Tags und Auslöser in GTM

Wenn die Standard-Datenebene aktiv ist, können Sie die in GA4 integrierten Tags und benutzerdefinierten Ereignisauslöser verwenden. Ein typisches Setup sieht wie folgt aus:

• GA4 Konfigurations-Tag mit Ihrer Messungs-ID, ausgelöst auf allen Seiten
• GA4 Event-Tag für jedes E-Commerce-Ereignis - so eingestellt, dass das E-Commerce-Objekt aus der Datenschicht gelesen wird
• Benutzerdefinierte Event-Trigger mit den Namen view_item, add_to_cart, begin_checkout, purchase usw.
• Verwenden Sie den Vorschaumodus in GTM, um zu überprüfen, ob die Ereignisse mit den richtigen Daten ausgelöst werden.

Für Google Ads Conversions verknüpfen Sie Ihre Google Ads Conversion ID/Label mit dem Kauf-Ereignis. Siehe auch Google Analytics-Tracking Ihres Online-Shops.

5. benutzerdefinierte Ereignisse aus Ihrem eigenen Thema

Wenn Sie Ereignisse auslösen müssen, die nicht von der Standard-Datenebene abgedeckt werden - z. B. eine Videowiedergabe, ein Tab-Klick, eine Chat-Öffnung oder eine benutzerdefinierte CTA - dann pushen Sie direkt zu window.dataLayer aus Ihrem Thema:

<button onclick="trackVideoPlay()">Video abspielen</button> <script> function trackVideoPlay() { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'video_play', video_title: 'Product demo', video_id: 'demo-123' }); } </script>

Auf der Quittungsseite können Sie das standardmäßige Kaufereignis durch das Bestellobjekt und Smarty erweitern oder ersetzen:

<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'custom_purchase', ecommerce: { transaction_id: '<{$order->getWebshopOrderId()}>', value: <{$order->getTotalPrice()|number_format:2:".":"""}>', currency: '<{$webshop->getCurrency()}>', coupon: '<{$order->getVoucherCode()|escape: "javascript"}>' }); </script>

Beachten Sie, dass das Standard-Kaufereignis von Shoporama bereits setTrackingCalled() auf die Bestellung setzt, so dass es nur einmal ausgelöst wird. Wenn Sie dasselbe Verhalten für Ihr benutzerdefiniertes Ereignis wünschen, müssen Sie selbst für Idempotenz sorgen (z.B. über ein Cookie oder localStorage).

6. Testen und Fehlersuche

• Verwenden Sie die Chrome-Erweiterung GTM/GA Debugger oder den Tag Assistant, um zu sehen, welche Ereignisse ausgelöst werden
• Geben Sie window.dataLayer in der Browserkonsole ein, um die gesamte dataLayer-Historie zu sehen
• Verwenden Sie den Vorschaumodus von GTM, um das Auslösen von Tags in Echtzeit zu sehen.
• Überprüfen Sie Kaufereignisse in GA4 DebugView
• Wenn nichts ausgelöst wird: Prüfen Sie, ob Tracking aktivieren in Webshop → Tracking eingestellt ist - ohne dies ist der datalayer.html-Block inaktiv

Häufig gestellte Fragen

Muss ich zwischen dem integrierten Tracking von Shoporama und meinem eigenen GTM-Setup wählen?

Nein, Sie können beides gleichzeitig nutzen. Das integrierte Tracking-Modul sendet Daten serverseitig an die ausgewählten Plattformen, während Ihr eigenes GTM-Setup clientseitig läuft. Viele Shops verwenden beides, um ein möglichst zuverlässiges Tracking zu gewährleisten - insbesondere im Zustimmungsmodus, in dem clientseitige Ereignisse blockiert werden können.

Wo sollte ich das GTM-Snippet einfügen, wenn ich keine HTML-Felder verwenden möchte?

Direkt in die templates/global.html Ihres Themes oder in einen benutzerdefinierten Header-Teil. Wir empfehlen jedoch HTML-Felder, da sie Theme-Updates überleben und geändert werden können, ohne dass ein neues Theme bereitgestellt werden muss.

Kann ich die Standard-Ereignisse, die Shoporama auslöst, überschreiben oder deaktivieren?

Ja, das können Sie. Wenn Sie ein vollständig benutzerdefiniertes Theme haben, sollten Sie die Datei partials/datalayer.html nicht einbinden . Wenn Sie auf Delaware oder Montana aufbauen und nur ein paar Ereignisse ändern wollen, erstellen Sie Ihr eigenes Partial und binden es anstelle der Standardversion ein.

Auf welche Variablen habe ich in der dataLayer-Vorlage Zugriff?

Die typischen Variablen: $webshop, $product, $category, $order, $basket, $customer, $voucher und $inc, das angibt, welche Vorlage gerendert wird (z.B. basket.html, thanks.html). Die Klassen sind in admin/class/safe/ dokumentiert.

Wie vermeide ich, dass das Kaufereignis zweimal ausgelöst wird, wenn der Kunde die Quittungsseite aktualisiert?

Dies wird bereits vom Thema über $order->getTrackingCalled() und $order->setTrackingCalled() behandelt. Wenn Sie Ihr eigenes Kaufereignis erstellen, verwenden Sie dasselbe Muster oder setzen Sie einen Flag-Cookie/localStorage-Wert nach dem ersten Feuern.

Muss ich den Zustimmungsmodus in meinem eigenen Thema berücksichtigen?

Ja, das müssen Sie. Wenn der Kunde sein Einverständnis nicht gegeben hat, sollten Sie keine Tracking-Ereignisse auslösen, die Cookies verwenden. Verwenden Sie einen Cookie-Zustimmungsmanager (Cookiebot, CookieInformation oder Ihre eigene Lösung) und lassen Sie GTM-Tags vom Zustimmungsstatus abhängen. Shoporama's Server-seitiges Tracking behandelt den Consent Mode automatisch, wenn Sie Use Consent Mode im Tracking-Modul aktivieren.

Kann ich meine eigenen dataLayer-Ereignisse an andere Plattformen als Google senden?

Ja. dataLayer ist plattformunabhängig. Sie können in GTM Tags für Meta CAPI, TikTok Events API oder andere Plattformen einrichten, die dataLayer als Quelle unterstützen. Alternativ können Sie die SDKs der Plattformen (z. B. fbq() oder ttq.track()) direkt von Ihrem Thema aus ansteuern.

Benötigen Sie Hilfe bei der Implementierung? Schreiben Sie an support@shoporama.dk.