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 GTM-Pixel zu testen, nutze den Shopify Pixel Helper, um sicherzugehen, dass alle Ereignisse, die du verfolgen möchtest, ohne Fehler zur Sandbox hinzugefügt werden.

Du kannst auch mithilfe der Seitenerweiterung Google Tag Assistant testen, welche Google-Tags auf der Seite geladen werden. Die Funktion Troubleshoot tag des Google Tag Assistant ist jedoch nicht mit benutzerdefinierten Pixeln kompatibel und erkennt keine Google-Tags in einem benutzerdefinierten Pixel oder anderen Pixeln, die von GTM geladen werden.

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.

Bringe dein Geschäft voran

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.

Hinweis

Dieses Pixel-Beispiel enthält auch beispielhafte Einstellungen, die den Google Consent Mode v2 widerspiegeln. Dieser Mode ermöglicht es einem Pixel, die Cookie-Einwilligungseinstellungen der Besucher:innen für den Traffic, inklusive des Europäischen Wirtschaftsraum (EWR), zu respektieren. Weitere Informationen zum Consent Mode findest du in der Google Ads-Hilfe.

Diese Beispieleinstellungen entsprechen möglicherweise nicht den Anforderungen für deinen Shop, je nach den Datenschutzbestimmungen deiner Region. Wenn du Hilfe beim Hinzufügen oder Anpassen der Einwilligungseinstellungen in deinem individuellen Pixel benötigst, lies dir die Anleitung von Google zur Einrichtung des Consent Mode auf Websites durch oder engagiere eine:n Shopify-Partner:in.

// 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 standardmäßigen Shopify-Kundenereignisse, die mit Pixeln verwendet werden, im Vergleich zu den entsprechenden Kundenereignissen im Google Tag Manager sowie dem Trigger, der für das Auslösen der Ereignisse erforderlich ist.

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):

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 Shopify Extensions 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 wird auf diese Weise angezeigt, wodurch die Daten an dein benutzerdefiniertes Pixel übergeben werden.

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

In deinem Code für das benutzerdefinierte Pixel würdest du dann etwas wie dies 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.

Benutzerdefiniertes Pixel testen und Fehler beheben

Wenn du bereit bist, dein benutzerdefiniertes GTM-Pixel zu testen, nutze den Shopify Pixel Helper, um sicherzugehen, dass alle Ereignisse, die du verfolgen möchtest, ohne Fehler zur Sandbox hinzugefügt werden.

Du kannst auch mithilfe der Seitenerweiterung Google Tag Assistant testen, welche Google-Tags auf der Seite geladen werden. Die Funktion Troubleshoot tag des Google Tag Assistant ist jedoch nicht mit benutzerdefinierten Pixeln kompatibel und erkennt keine Google-Tags in einem benutzerdefinierten Pixel oder anderen Pixeln, die von GTM geladen werden.