Erstelle ein benutzerdefiniertes Google Tag Manager-Pixel

Du kannst Google Tag Manager (GTM) als benutzerdefiniertes Pixel verwenden, um deine Drittanbieter-Pixel zu verwalten.

Wenn du bereit bist, dein benutzerdefiniertes Pixel zu testen, kannst du die Google Tag Assistant Legacy Chrome-Erweiterung verwenden, um deine benutzerdefinierten Pixel zu testen. Google Tag Assistant funktioniert nicht mit benutzerdefinierten Pixeln.

Hinweis

Bevor du ein benutzerdefiniertes Pixel erstellst, solltest du verfügbare Apps auf verbesserte Stabilität, Sicherheit und Leistung überprüfen. Wenn es jedoch keine App gibt, die deinen Anforderungen entspricht, kannst du Google Tag Manager als benutzerdefiniertes Pixel nutzen.

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

Du kannst ein benutzerdefiniertes Google Tag Manager-Pixel erstellen, um deine Drittanbieter-Pixel zu verwalten.

Hinweis

Dies ist ein Tutorial für Fortgeschrittene. Der Vorgang wird von Shopify nicht unterstützt. Wenn du Hilfe beim Hinzufügen benutzerdefinierter Pixel benötigst, kannst du einen Shopify-Partner 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 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 die GTM-Datenebene mithilfe von Push übertragen

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

Standardmäßig gibt es eine Reihe von Standard-Ereignissen, die du abonnieren kannst. Wenn du jedoch 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 übertragen.

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-Objekt zu übertragen, 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 Google Tag Manager konfigurieren, um Ereignisse von deinem benutzerdefinierten Pixel zu akzeptieren. Dafür benötigst du ein Tag, einen Trigger und dataLayer-Variablen in Google Tag Manager.

In der folgenden Tabelle werden einige Beispiele für ausgewählte Standard-Kundenereignisse und ihre Google Tag Manager-Äquivalente aufgeführt:

Liste der Standard-Shopify-Kundenereignisse mit äquivalenten GTM-Ereignissen

Shopify-Ereignis	Trigger	GTM-Ereignis
payment_info_submitted	Zahlungsinformationen senden	add_payment_info
checkout_address_info_submitted	Versandinformationen senden	add_shipping_info
product_added_to_cart	Artikel zum Warenkorb hinzufügen	add_to_cart
checkout_started	Checkout starten	begin_checkout
checkout_completed	Checkout abschließen	purchase
product_removed_from_cart	Artikel aus Warenkorb entfernen	remove_from_cart
cart_viewed	Warenkorb anzeigen	view_cart
product_viewed	Produktdetailseite anzeigen	view_item
collection_viewed	Artikelliste anzeigen	view_item_list

GTM-Tag-Ereignisparameter müssen mit der erwarteten Namenskonvention übereinstimmen, damit deine benutzerdefinierten dataLayer-Pixel-Ereignisse verarbeitet werden können.

Hier findest du einige Beispiele für ausgewählte benutzerdefinierte dataLayer-Pixel-Ereigniseigenschaften und ihre äquivalenten Google Analytics 4-Ereignisparameter (GA4-Ereignisparameter):

Ausgewählte Liste benutzerdefinierter dataLayer-Pixel-Ereignisse gemäß der GA4-Namenskonvention

Benutzerdefinierte dataLayer-Pixel-Ereignisse	GA4-Ereignisparameter
event.data?.checkout?.currencyCode	Währung
event.data?.checkout?.totalPrice?.amount	value
event.data?.checkout?.order?.id	transaction_id
event.data?.checkout?.discountAllocations	coupon
event.data?.checkout?.shippingLine?.price?.amount	shipping
event.data?.checkout?.totalTax	tax
event.data?.checkout?.lineItems	items

Es folgt ein Beispiel mit dem Ereignis checkout_completed:

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

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 in Google Tag Manager nutzt, um die Daten des Ereignisses zu erfassen. Sie können einer dataLayer-Variable in Google Tag Manager zugewiesen werden. Jede Ereignisvariable erfordert ihre eigene dataLayer-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 oben aufgeführten Beispiel werden orderId, currency, price, shippingLine und totalTax als dataLayer-Variablen eingerichtet. Jedes Mal, wenn das Tag ausgelöst wird, erfasst es diese dataLayer-Variablen mit dem Ereignis.

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 der Erweiterbarkeitsfunktion des Checkouts 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 zustandsabhängiges dataLayer-Objekt übertragen kannst. Die Pixel-Sandbox von Shopify enthält keine äquivalente Funktion. Du kannst jedoch dasselbe Ergebnis erzielen, indem du dein eigenes Datenobjekt erstellst und dieses an benutzerdefinierte Ereignisse überträgst.

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.

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 übertragen hast, kannst du das GA4-Tag "page_view" 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 das dataLayer-Objekt übertragen 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

Google Tag Assistant funktioniert nicht mit benutzerdefinierten Pixeln. Du kannst die Google Tag Assistant Legacy-Erweiterung für Chrome verwenden, um dein benutzerdefiniertes Pixel zu testen.

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.