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 gehen auf die Datenebene des Themes, die Einrichtung von Google Tag Manager, korrekte Produkt-IDs mit getTrackingId() sowie darauf ein, wie Sie benutzerdefinierte Ereignisse aus Ihrem eigenen Theme auslösen können.

1. Das integrierte Tracking von Shoporama erfordert keinen Theme-Code

Bevor du selbst Code schreibst, solltest du das Tracking-Modul von Shoporama in Betracht ziehen. Du findest es in der linken Seitenleiste unter „Webshop“ (Zahnrad-Symbol) → „Tracking“. Setzen Sie ein Häkchen bei „Tracking aktivieren“, wählen Sie die Plattformen aus, an die Sie Daten senden möchten, und geben Sie Ihre IDs und Zugriffstoken ein.

Das Tracking-Modul fügt seine Skripte selbst ein und löst seine Events selbst aus. Dies geschieht serverseitig, unabhängig von den Dateien des Themes, sodass Sie weder Partials einbinden, noch Skripte einfügen oder auch nur eine einzige Zeile im Theme ändern müssen. Das Modul unterstützt:

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

Sollte der Shop nur normales E-Commerce-Tracking verwenden, sind Sie als Theme-Entwickler hier fertig. Der Rest des Artikels befasst sich mit Shops, die ihre eigene Konfiguration – typischerweise über den Google Tag Manager – zusätzlich zur oder anstelle der integrierten Nachverfolgung betreiben möchten.

2. Die Datenebene des Themes

Die Standard-Themes (Delaware, Montana, Massachusetts u. a.) enthalten ein Partial namens partials/datalayer.html. Dieses übermittelt GA4-kompatible E-Commerce-Ereignisse an window.dataLayer, sobald das Tracking im Shop aktiviert ist. Darauf bauen Sie auf, wenn der Shop eine eigene GTM-Konfiguration erhalten soll.

Die folgenden Ereignisse werden vom Theme automatisch ausgelöst:

Ein „view_item“-Push auf der Produktseite sollte in der Vorlage wie folgt aussehen:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: '<{$webshop->getCurrency()}>',
    items: [{
      item_id: '<{$product->getTrackingId()}>',
      item_name: '<{$product->getName()|escape:"javascript"}>',
      price: <{$product->getRealPrice()|number_format:2:".":""}>,
      quantity: 1
    }]
  }
});
</script>

Beachte „item_id“: Diese stammt aus $product->getTrackingId() und nicht aus einer ID, die du selbst zusammenstellst. Warum das entscheidend ist, erläutern wir im nächsten Abschnitt.

Wenn Sie Ihr eigenes Theme von Grund auf neu erstellen, können Sie die Datei templates/partials/datalayer.html aus dem Delaware-Theme kopieren und in Ihre global.html einbinden:

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

3. Die Produkt-ID: Verwende immer getTrackingId()

Werbeplattformen wie Meta und Google ordnen deine Events anhand der Produkt-ID dem Produktkatalog zu. Das bedeutet, dass die `item_id` in deinen Events mit der ID (g:id) im Produkt-Feed des Shops identisch sein muss. Wenn die beiden unterschiedlich sind, kann die Plattform das Event nicht mit dem Produkt im Katalog verknüpfen, und dann schlagen Katalogabgleich, dynamisches Remarketing und die Produktberichte fehl.

Deshalb solltest du Produkt-IDs in deinen Vorlagen niemals selbst zusammenstellen. Verwende stattdessen getTrackingId(), das immer genau die ID zurückgibt, die der Feed des Shops verwendet:

item_id: '<{$product->getTrackingId()}>'

Das Format hängt von der Konfiguration des Shops ab:

• Standard: die numerische Produkt-ID, z. B. 154585.
• Varianten: Produkt-ID und ID des Variantenwerts, getrennt durch einen Doppelpunkt, z. B. 154585:45789.
• Shops mit Sprach- oder Länder-Feeds: stattdessen die Artikelnummer (SKU), da diese der stabile Schlüssel über alle Ländershops hinweg ist. Die Artikelnummer der Variante wird verwendet, sofern sie angegeben ist, andernfalls die des Produkts. Verfügt das Produkt überhaupt nicht über eine Artikelnummer, wird die ID auf das numerische Format zurückgesetzt.

All dies wird von getTrackingId() automatisch pro Shop abgewickelt. Wenn Sie die ID des Variantenwerts kennen, z. B. im Zusammenhang mit dem Warenkorb, dem Checkout oder der Quittung, übermitteln Sie diese als zweiten Parameter:

item_id: '<{$product->getTrackingId(null, $attribute_value_id)}>'

Der erste Parameter ist die ID des Attributs. Sie kann auf null gesetzt werden; dann wird sie automatisch anhand des Variantenwerts ermittelt.

Weitere Informationen zum ID-Schema und zur Fehlerbehebung bei der Übereinstimmungsrate finden Sie unter „Produkt-IDs und Katalogabgleich bei Meta und Google“.

4. Richte Google Tag Manager über HTML-Felder ein

Wenn du das Feld „Google Tag Manager-ID “ in den Shop-Einstellungen ausgefüllt hast, fügt Shoporama das GTM-Snippet automatisch für dich ein. Es befindet sich am Ende der Datei „partials/datalayer.html“.

Wenn du GTM (oder andere Skripte wie Cookiebot, Hotjar oder Klaviyo) stattdessen manuell steuern möchtest, musst du HTML-Felder verwenden. Gehe zu Webshop → HTML-Felder. Hier kannst du benannte Felder erstellen und auswählen, ob sie automatisch in den Head- oder Body-Bereich eingefügt oder manuell in deinem Theme über einen Tag-Namen verwendet werden sollen.

Ein typisches GTM-Snippet in einem HTML-Feld, das auf „Automatisch zum <head>-Bereich 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 den <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) -->

Erfahren Sie mehr darüber, wie HTML-Felder funktionieren, unter „HTML-Felder: Cookiebot, GTM und andere Skripte einfügen“.

5. Tags und Trigger in GTM

Wenn das Standard-Data-Layer aktiv ist, kannst du die integrierten Tags und benutzerdefinierten Ereignis-Trigger von GA4 verwenden. Eine typische Konfiguration sieht wie folgt aus:

• GA4-Konfigurations-Tag mit Ihrer Measurement-ID, ausgelöst auf „All Pages“
• GA4-Ereignis-Tag für jedes E-Commerce-Ereignis, so konfiguriert, dass es das E-Commerce-Objekt aus dem Data Layer ausliest
• Benutzerdefinierte Ereignis-Trigger mit den Namen „view_item“, „add_to_cart“, „begin_checkout“, „purchase“ usw.
• Verwenden Sie den Vorschau-Modus in GTM, um zu überprüfen, ob die Ereignisse mit den korrekten Daten ausgelöst werden

Für Google Ads-Conversions verknüpfen Sie Ihre Google Ads-Conversion-ID/Ihr Label mit dem „purchase“-Event. Siehe auch Google Analytics-Tracking für Ihren Webshop.

6. Benutzerdefinierte Ereignisse aus Ihrem eigenen Theme

Wenn Sie Ereignisse auslösen möchten, die nicht vom Standard-Data-Layer abgedeckt sind, z. B. eine Videowiedergabe, einen Tab-Klick, das Öffnen eines Chats oder einen benutzerdefinierten CTA, dann senden Sie die Daten direkt aus Ihrem Theme an `window.dataLayer`:

<button onclick="trackVideoPlay()">Video abspielen</button>

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

Auf der Bestätigungsseite kannst du dein eigenes „purchase“-Ereignis mit dem „order“-Objekt und Smarty auslösen. Verwende `getTrackingId()` für die `item_id` und verpacke das Ganze in den Duplikatsschutz `getTrackingCalled() ` / `setTrackingCalled()`, damit das Ereignis nur einmal pro Bestellung ausgelöst wird, auch wenn der Kunde die Bestätigungsseite neu lädt:

<{if $order && !$order->getTrackingCalled()}>
<{assign var="orderproducts" value=$order->getOrderProducts()}>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: '<{$order->getWebshopOrderId()}>',
    value: <{$order->getTotalPrice()|number_format:2:".":""}>,
    currency: '<{$webshop->getCurrency()}>',
    coupon: '<{$order->getVoucherCode()|escape:"javascript"}>',
    items: [
      <{foreach from=$orderproducts item=op}>
        <{assign var="p" value=$op->getProduct()}>
        <{assign var="attributes" value=$op->getAttributes()}>
        {
          <{if $attributes|@count == 1}>
            <{foreach from=$attributes item=attr}>
              item_id: '<{$p->getTrackingId(null, $attr.attribute_value_id)}>',
              item_variant: '<{$attr.val|escape:"javascript"}>',
            <{/foreach}>
          <{else}>
            item_id: '<{$p->getTrackingId()}>',
          <{/if}>
          item_name: '<{$op->getName()|escape:"javascript"}>',
          price: <{$op->getPrice()|number_format:2:".":""}>,
          quantity: <{$op->getAmount()}>
        },
      <{/foreach}>
    ]
  }
});
</script>
<{$order->setTrackingCalled()}>
<{/if}>

Das Flag gilt für alle Tracking-Snippets der Bestellung, einschließlich des Standard-Data-Layers des Themes. Wenn du mehrere Conversion-Snippets auf der Bestätigungsseite hast (z. B. ein Pricerunner-Pixel sowie dein eigenes Kauf-Ereignis), überprüfe das Flag mit `getTrackingCalled()` in jedem Snippet, rufe `setTrackingCalled()` jedoch nur an einer Stelle auf – und zwar als Letztes, nachdem alle Snippets ausgeführt wurden. Das gleiche Muster wird im Leitfaden „Pricerunner-Tracking implementieren“ verwendet.

7. Testen und Fehlerbehebung

• Verwende die Chrome-Erweiterung „GTM/GA Debugger“ oder „Tag Assistant“, um zu sehen, welche Ereignisse ausgelöst werden
• Gib „window.dataLayer“ in die Browser-Konsole ein, um den gesamten dataLayer-Verlauf anzuzeigen
• Verwenden Sie den Vorschau-Modus von GTM, um zu sehen, wie Tags in Echtzeit ausgelöst werden
• Überprüfen Sie Kauf-Events in GA4 DebugView
• Überprüfen Sie die Katalogübereinstimmung bei Meta im Events Manager → „Test Events“ oder mit der Browser-Erweiterung „Meta Pixel Helper“. Die Fehlermeldung „Es wurden keine Inhalts-IDs empfangen“ bedeutet in der Regel, dass die „item_id“ fehlt oder nicht mit dem Feed übereinstimmt. Siehe den Abschnitt zu getTrackingId() weiter oben
• Wenn das Data-Layer des Themes nicht ausgelöst wird: Überprüfen Sie, ob „Tracking aktivieren“ unter „Webshop“ → „Tracking“ aktiviert ist. Ohne diese Einstellung ist der „data-layer.html“-Block inaktiv

Häufig gestellte Fragen

Muss ich mich zwischen der integrierten Nachverfolgung von Shoporama und meiner eigenen GTM-Konfiguration entscheiden?

Nein, du kannst problemlos beides gleichzeitig nutzen. Das integrierte Tracking-Modul verarbeitet seine eigenen Events unabhängig vom Theme, während Ihre eigene GTM-Konfiguration im Theme läuft. Viele Shops nutzen beides, um ein möglichst robustes Tracking zu gewährleisten, insbesondere im Consent-Modus, in dem clientseitige Events blockiert werden können.

Welches Format muss die `item_id` in meinen Ereignissen haben?

Das gleiche Format wie die ID im Produkt-Feed des Shops: standardmäßig eine numerische Produkt-ID, bei Varianten „Produkt-ID:Variantenwert-ID“ und bei Shops mit Sprach- oder Länder-Feeds die Artikelnummer (SKU). Du musst das nicht selbst im Auge behalten. Verwenden Sie $product->getTrackingId(), damit die ID immer mit dem Feed übereinstimmt. Details finden Sie unter Produkt-IDs und Katalogabgleich.

Warum ist die Übereinstimmungsrate in meinem Meta-Katalog niedrig, obwohl meine Events gut laufen?

Fast immer liegt es daran, dass die `item_id` des Events nicht mit der ID des Feeds übereinstimmt. Typische Ursachen sind manuell erstellte IDs, Varianten in falscher Reihenfolge oder die Verwendung von SKU an einer Stelle und einer numerischen ID an einer anderen. Wechseln Sie überall zu ` getTrackingId() ` und überprüfen Sie dies mit „Test Events“ im Meta Events Manager.

Wo muss ich das GTM-Snippet platzieren, wenn ich keine HTML-Felder verwenden möchte?

Direkt in der Datei „templates/global.html“ Ihres Themes oder in einem benutzerdefinierten Header-Partial. Wir empfehlen jedoch HTML-Felder, da diese Theme-Updates überstehen und geändert werden können, ohne dass ein neues Theme bereitgestellt werden muss.

Kann ich die von Shoporama ausgelösten Standard-Events überschreiben oder deaktivieren?

Ja, für den Data-Layer des Themes. Wenn du ein vollständig benutzerdefiniertes Theme hast, solltest du „partials/datalayer.html“ nicht einbinden. Wenn du auf Delaware oder Montana aufbaust und nur einzelne Events ändern möchtest, erstelle dein eigenes Partial und binde dieses anstelle der Standardversion ein. Das integrierte serverseitige Tracking wird hingegen unter „Webshop → Tracking“ gesteuert und wird vom Theme nicht beeinflusst.

Auf welche Variablen habe ich im dataLayer-Template Zugriff?

Die typischen: $webshop, $product, $category, $order, $basket, $customer, $voucher sowie $inc, das angibt, welche Vorlage gerendert wird (z. B. basket.html, thanks.html).

Wie vermeide ich, dass das „purchase“-Ereignis zweimal ausgelöst wird, wenn der Kunde die Bestätigungsseite aktualisiert?

Überprüfe $order->getTrackingCalled(), bevor du das Ereignis auslöst, und rufe $order->setTrackingCalled() auf, sobald alle deine Conversion-Snippets ausgelöst wurden. Das Flag wird in der Bestellung gespeichert, sodass es auch bei einer Aktualisierung erhalten bleibt. Siehe das vollständige Beispiel im Abschnitt über benutzerdefinierte Ereignisse weiter oben.

Muss ich den Consent-Modus in meinem eigenen Theme berücksichtigen?

Ja. Wenn der Kunde keine Einwilligung erteilt hat, dürfen Sie keine Tracking-Events auslösen, die Cookies verwenden. Verwende einen Cookie-Consent-Manager (Cookiebot, CookieInformation oder eine eigene Lösung) und lass GTM-Tags vom Consent-Status abhängen. Das serverseitige Tracking von Shoporama handhabt den Consent-Modus automatisch, wenn du im Tracking-Modul „Consent-Modus verwenden“ aktivierst.

Kann ich eigene dataLayer-Events an andere Plattformen als Google senden?

Ja. Das dataLayer ist plattformunabhängig. Du kannst in GTM Tags für Meta CAPI, die TikTok Events API oder jede andere Plattform einrichten, die das dataLayer als Quelle unterstützt. Alternativ kannst du direkt aus deinem Theme heraus die plattformeigenen SDKs (z. B. fbq() oder ttq.track()) ansprechen. Denke daran, unabhängig von der Plattform getTrackingId() als Produkt-ID zu verwenden.

Benötigst du Hilfe bei der Implementierung? Schreibe an support@shoporama.dk.