Erstelle ein benutzerdefiniertes Google Tag Manager-Pixel

Diese Seite enthält Anweisungen zur Verwendung von Google Tag Manager (GTM) als benutzerdefiniertes Pixel zum Verwalten deiner Drittanbieter-Pixel.

Hinweis

Wir empfehlen, dass du nach verfügbaren Apps suchst, bevor du benutzerdefinierte Pixel erstellst, um mehr Stabilität, Sicherheit und Leistung zu erreichen. Wenn es jedoch keine App gibt, die deinen Anforderungen entspricht, kannst du Google Tag Manager als benutzerdefiniertes Pixel verwenden.

Die Erstellung eines benutzerdefinierten Pixels vorbereiten

Bevor du mit Google Tag Manager ein benutzerdefiniertes Pixel erstellst, solltest du die folgenden Informationen überprüfen, um sicherzustellen, dass du verstehst, wie dein Pixel konfiguriert wird:

• Erstelle oder öffne ein Google Tag Manager-Konto und suche nach der GTM-Container-ID.
• Aus Sicherheitsgründen haben in unserer Sandbox geladene Tag-Manager die gleichen Einschränkungen wie alle anderen Pixel. Erfahre mehr über Sandbox-Einschränkungen für Pixel.

Erstelle ein benutzerdefiniertes Google Tag Manager-Pixel

Hinweis

Dies ist ein Tutorial für Fortgeschrittene und wird von Shopify nicht unterstützt. Wenn du Hilfe beim Hinzufügen benutzerdefinierte Pixel benötigst, kannst du einen Shopify-Experten engagieren.

Schritte

1. Öffne dein Google Tag Manager-Konto und wähle das Konto aus, mit dem du ein benutzerdefiniertes Pixel einrichten möchtest.
2. Klicke auf Verwaltung und dann auf Google Tag Manager installieren, um den Installationscode zu öffnen.
3. Kopiere den Code-Block, der zum Abschnitt head einer Seite gehört.
4. Entferne die HTML-Tags aus diesem Codeblock.
5. Füge den verbleibenden Code in ein neues benutzerdefiniertes Shopify-Pixel ein.
6. Initialisiere dein dataLayer-Objekt mit window.dataLayer = window.dataLayer || [];.

Der Code für dein benutzerdefiniertes Pixel sollte etwa so aussehen und GTM-XXXXXXXXX sollte mit deiner eigenen GTM-Container-ID übereinstimmen.

(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');

window.dataLayer = window.dataLayer || [];

Kundenereignisse abonnieren und an GTM-dataLayer übergeben

Anstatt dataLayer.push()-Aufrufe zu deinen Liquid-Vorlagendateien hinzuzufügen, führst du deine gesamte Arbeit bezüglich GTM-dataLayer in deinem Code für das benutzerdefinierte Pixel aus.

Standardmäßig gibt es eine Reihe von benutzerdefinierten Standardereignissen, die du sofort einsatzbereit abonnieren kannst, aber du kannst auch deine eigenen benutzerdefinierten Ereignisse aus Liquid-Vorlagendateien veröffentlichen.

Im Folgenden ist ein Beispiel für das Abonnement des Standardereignisses "product_viewed" aufgeführt, das angibt, wenn jemand ein Produkt ansieht. Wenn das Ereignis ausgelöst wird, wird das Ereignis an dataLayer übergeben.

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

In diesem Beispiel werden Daten über den Produkttitel weitergegeben. Wenn Google Tag Manager-Variablen verwendet werden, können die Daten an andere Tags weitergeleitet werden.

Ersetzen von alten dataLayer.push(event)-Aufrufen durch analytics.publish()

Wenn du Google Tag Manager zuvor bereits eingerichtet hast, musst du deine dataLayer.push-Aufrufe durch Shopify.analytics.publish()-Aufrufe ersetzen.

Im Folgenden ist ein vereinfachtes Beispiel für ein benutzerdefiniertes E-Mail-Anmeldeereignis dargestellt, das mit dataLayer nachverfolgt wird.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Das Shopify-Äquivalent sieht folgendermaßen aus. Dadurch werden die Daten an dein benutzerdefiniertes Pixel übergeben.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

In deinem Code für das benutzerdefinierte Pixel würdest du dann so etwas hinzufügen:

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Altes dataLayer.push(data) ersetzen

Google Tag Manager verfügt über eine Funktion, mit der du bei jedem Ereignis ein zustandsorientiertes dataLayer-Objekt übergeben kannst. Die Pixel-Sandbox von Shopify enthält keine äquivalente Funktion. Du kannst jedoch dasselbe Ergebnis erzielen, indem du dein eigenes Datenobjekt erstellst und es an benutzerdefinierte Ereignisse übergibst.

Definiere beispielsweise ein "customData"-Objekt, bevor deine benutzerdefinierten Ereignisse veröffentlicht werden.

<script>
  const customData = {email: customer.email}
</script>

Wann immer du deine benutzerdefinierten Daten einfügen möchtest, kannst du sie an deine Veröffentlichungsmethode übergeben.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Hinweis

Derzeit wird das Hinzufügen von benutzerdefinierten Daten zu Standardereignissen von Shopify nicht unterstützt. Falls es erforderlich ist, kannst du deine eigenen benutzerdefinierten Ereignisse veröffentlichen, um Standard-Ereignisse zu ersetzen.

Beispiel für ein benutzerdefiniertes Google Tag Manager-Pixel

Das folgende Beispiel ist eine vereinfachte Version eines benutzerdefinierten Google Tag Manager-Pixels, das anzeigt, wie Daten an GTM gesendet werden. Um weitere Ereignisse an dein dataLayer zu übergeben, kannst du weitere Standard- und benutzerdefinierte Ereignisse abonnieren.

(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');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Tipps und Tricks zum Einrichten von Google Analytics 4

Beachte die folgenden Tipps für das Einrichten von Google Analytics 4 (GA4), wenn du Google Tag Manager als benutzerdefiniertes Pixel verwendest.

URLs für bereinigte Seiten

Wenn GA4 in einer Sandbox ausgeführt wird, siehst du möglicherweise, dass die Seiten-URLs Informationen über die Sandbox enthalten, in der die Ausführung erfolgt. Wenn du die Sandbox-Informationen aus diesen URLs entfernen möchtest, kannst du die automatische Seitenverfolgung von GA4 ausschalten und stattdessen deine Seitenverfolgung implementieren. Verwende dazu das Standard-page_viewed-Ereignis.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Nachdem du dein eigenes Ereignis an dataLayer übergeben hast, kannst du ein GA4-page_view-Tag erstellen, das vom page_viewed-Ereignis ausgelöst wird. Meistens kannst du den Google Analytics: GA4-Ereignis-Tag-Typ verwenden und den Ereignisnamen als page_view festlegen. Nachdem du den Tag-Typ und den Ereignisnamen festgelegt hast, solltest du einen Parameter für page_location hinzufügen und den Wert auf denselben Wert festlegen, den du von deinem benutzerdefinierten Pixel an die Datenebene übergeben hast.

Optimierte Analysen

Wenn GA4 in der Pixel-Sandbox von Shopify geladen wird, müssen einige Ereignisse, die normalerweise automatisch abgeleitet werden, manuell eingerichtet werden. Beispielsweise können Klicks für ausgehende Links im Rahmen der Einstellung "Optimierte Analysen" von GA4 aus Sicherheitsgründen nicht automatisch ausgelöst werden, wenn benutzerdefinierte Pixel verwendet werden. Es ist jedoch möglich, die optimierten Analysen für Ereignisse von GA4 selbst als benutzerdefinierte Ereignisse zu implementieren.

Der unten bereitgestellte Code enthält ein vereinfachtes Beispiel für das Nachverfolgen von Klicks für ausgehende Links.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Erstelle schließlich in GTM ein GA4-Tag, das den Link-Klick an GA4 sendet, indem du sicherstellst, dass der Ereignisname Klick ist und der erweiterten Ereignisbenennung von GA4 entspricht.

Du kannst dasselbe Tracking für alle Kennzahlen der optimierten Analysen von Google erreichen.

Testen und Fehlerbehebung

Hinweis

Der Google Tagging Companion funktioniert nicht mit benutzerdefinierten Pixeln. Wenn du die Browsererweiterung Google Analytics Debug verwendest, wird das Debug-Signal an GA4 gesendet, damit deine Ereignisse in der Anwendung angezeigt werden.

1. Öffne deinen Shopify-Shop in einem Chrome-Browser.
2. Öffne den Netzwerk-Tab in deinem Browser und suche die Anfrage collect?..., die deine GA4-Analyse-ID enthält, wenn Daten von deinem Google Tag Manager an GA4 gesendet werden.
3. Klicke in deinem Google Analytics-Konto auf Verwaltung und dann auf Debug-Ansicht.
4. Vergewissere dich, dass du die GA Debug Google-Erweiterung zu deinem Chrome-Browser hinzugefügt hast:
   • Schalte GA Debug ein.
   • Öffne deinen Shopify-Shop in einem separaten Tab.
   • Gehe zurück zu GA4 in der Debug-Ansicht und überprüfe die page_viewed-Ereignisse.