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.

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 ein benutzerdefiniertes Google Tag Manager-Pixel

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 dem Codeblock. Beispiel: <script></script>.
  5. Füge den verbleibenden Code in ein neues benutzerdefiniertes Shopify-Pixel ein.
  6. Abonniere Kundenereignisse und nimm eine Übertragung an dataLayer von GTM vor.
  7. Um zu überprüfen, wie der Code angezeigt werden soll, siehe das Beispiel für ein benutzerdefiniertes Google Tag Manager-Pixel.
  8. Konfiguriere den Google Tag Manager, um Ereignisse von deinem benutzerdefinierten Pixel zu akzeptieren.
  9. Optional: Falls bestehende dataLayer.push(event)-Aufrufe in deiner checkout.liquid-Datei vorhanden sind, ersetze diese mit analytics.publish().

Kundenereignisse abonnieren und an dataLayer von GTM mithilfe von Push übertragen

Du kannst Kundenereignisse mit dem dataLayer von GTM in deinem benutzerdefinierten Pixel-Code abonnieren.

Standardmäßig gibt es eine Reihe von Standard-Kundenereignissen, die du abonnieren kannst. Wenn du Kundenereignisse verfolgen möchtest, die nicht Teil des Standardereignisangebots sind, kannst du deine eigenen benutzerdefinierten Ereignisse mithilfe von 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 wird der Produkttitel über die Ereignis-Nutzdaten weitergegeben. Du kannst eine Google Tag Manager-Variable verwenden, um den Produkttitel über die Ereignis-Nutzdaten im Tag deiner Wahl zu erfassen.

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 Google Tag Manager gesendet werden. Um weitere Ereignisse an dein dataLayer zu übergeben, kannst du weitere Standard- und benutzerdefinierte Ereignisse abonnieren.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Konfiguriere den Google Tag Manager, um Ereignisse von deinem benutzerdefinierten Pixel zu akzeptieren.

Nachdem du dein benutzerdefiniertes Pixel erstellt hast, musst du den Google Tag Manager konfigurieren, um Ereignisse von deinem benutzerdefinierten Pixel zu akzeptieren. Dafür benötigst du ein Tag, einen Trigger und Datenebenen-Variablen im Google Tag Manager.

Verwende das Ereignis checkout_completed wie folgt:

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

Der Google Tag Manager-Trigger ist ein benutzerdefinierter Ereignistyp mit dem Ereignisnamen checkout_completed. Das Feld Ereignisname im Trigger muss mit dem Ereignisschlüssel in deinem benutzerdefinierten Pixel übereinstimmen.

orderId und currency sind die Variablen, die du im Google Tag Manager nutzt, um die Daten des Ereignisses zu erfassen. Sie können einer Datenebenen-Variable im Google Tag Manager zugewiesen werden. Jede Ereignisvariable erfordert ihre eigene Datenebenen-Variable. Stelle den Trigger so ein, dass er bei allen benutzerdefinierten Ereignissen ausgelöst wird.

Erstelle ein Tag, das den gerade erstellten Trigger verwendet. Füge unter den Ereignisparametern die Variablen hinzu, die du erfassen möchtest. Im obigen Beispiel werden orderId und currency als Datenebenen-Variablen eingerichtet. Bei jedem Auslösen des Tags werden mit dem Ereignis orderId und currency erfasst.

Beachte dabei, dass in Google Tag Manager mindestens ein Tag und ein Trigger eingerichtet werden müssen, damit die Datenübertragung stattfinden kann.

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

Wenn du Google Tag Manager bereits eingerichtet hast, musst du deine dataLayer.push-Aufrufe durch Shopify.analytics.publish()-Aufrufe ersetzen. Du findest deine dataLayer.push-Aufrufe in deinen theme.liquid-Dateien im Abschnitt Layout des Theme-Editors.

Du musst außerdem die dataLayer.push-Aufrufe in der checkout.liquid-Datei ersetzen. Da die checkout.liquid-Datei jedoch nicht mit Checkout Extensibility kompatibel ist, musst du eine UI-Erweiterung verwenden, um Daten per Push an Web-Pixel zu übertragen.

Im Folgenden findest du ein vereinfachtes Beispiel für ein benutzerdefiniertes Ereignis zur E-Mail-Registrierung, das mithilfe von dataLayer in theme.liquid-Dateien 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>

Tipps für die Einrichtung 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

  1. Öffne deinen Shopify-Shop in einem Chrome-Browser.
  2. Füge die Google Tag Assistant Legacy-Erweiterung für Chrome zu deinem Browser hinzu.
  3. Klicke auf das Erweiterungssymbol und klicke dann auf Aktivieren.
  4. Navigiere zu deiner Website und löse die Ereignisse aus, die du testen möchtest.
  5. Klicke in der Erweiterung auf das Tag Google Tag Manager. Im Abschnitt Datenebene sollten die Nutzdaten des Ereignisses angezeigt werden, das ausgelöst wurde.
  6. Alle anderen Tags, die von Google Tag Manager geladen werden, werden ebenfalls in der Erweiterung aufgeführt. Du kannst auf diese Tags klicken, um die Daten zu überprüfen, die an die Tags übermittelt wurden.

Bereit, mit Shopify zu verkaufen?

Kostenlos testen