Een aangepaste Google Tag Manager-pixel aanmaken

Je kunt Google Tag Manager (GTM) als aangepaste pixel gebruiken om je externe pixels te beheren.

Gebruik de Shopify Pixel Helper wanneer je klaar bent om je aangepaste GTM-pixel te testen, om er zeker van te zijn dat alle gebeurtenissen die je wilt volgen zonder fouten aan de sandbox worden toegevoegd.

Je kunt ook de Google Tag Assistant-pagina-extensie gebruiken om te testen welke Google-tags op de pagina worden geladen. De Troubleshoot tag-functie van Google Tag Assistant is echter niet compatibel met aangepaste pixels en detecteert geen Google-tags in een aangepaste pixel, of andere pixels die door GTM worden geladen.

Op deze pagina

Voorbereidingen voor het aanmaken van een aangepaste pixel

Voordat je een aangepaste pixel aanmaakt met Google Tag Manager, neem je de volgende informatie door om er zeker van te zijn dat je begrijpt hoe je de pixel moet configureren:

Maak een Google Tag Manager-account aan of open dit en haal de GTM Container-ID op.
Om veiligheidsredenen hebben tagmanagers die in onze sandbox worden geladen dezelfde beperkingen als andere pixels. Meer informatie over de beperkingen van de pixelsandbox.

Een aangepaste Google Tag Manager-pixel aanmaken

Je kunt een aangepaste Google Tag Manager-pixel aanmaken om je externe pixels te beheren.

Stappen:

Open je Google Tag Manager-account en selecteer het account waarmee je een aangepaste pixel wilt instellen.
Klik op Beheer en klik vervolgens op Google Tag Manager installeren om de installatiecode te openen.
Kopieer het codeblok dat in de head-sectie van een pagina thuishoort.
Verwijder de HTML-tags uit het codeblok. Bijvoorbeeld <script></script>.
Voeg de resterende code toe aan een nieuwe Shopify Custom Pixel.
Subscribe to customer events and push to GTM’s dataLayer.
Bekijk het example Google Tag Manager custom pixel om te zien hoe de code moet worden weergegeven.
Configure Google Tag Manager to accept events from your Custom Pixel.
Optioneel: als je bestaande dataLayer.push(event)-aanroepen in je checkout.liquid-bestand hebt, dan replace it with analytics.publish().

Abonneren op klantgebeurtenissen en pushen naar de dataLayer van GTM

Je kunt je abonneren op klantgebeurtenissen met de GTM-dataLayer in je aangepaste-pixelcode.

Standaard is er een set standard events waarop je je kunt abonneren. Als je echter klantgebeurtenissen wilt volgen die geen deel uitmaken van het aanbod van standaardgebeurtenissen, dan kun je publish your own custom events from Liquid template files.

Hieronder staat een voorbeeld van een abonnement op de standaardgebeurtenis ‘product_viewed’, die aangeeft wanneer iemand een product bekijkt. Wanneer de gebeurtenis wordt geactiveerd, wordt de gebeurtenis naar de dataLayer gepusht.

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

In dit voorbeeld wordt de producttitel doorgegeven in de event-payload. Je kunt een Google Tag Manager variable gebruiken om de producttitel uit de event-payload vast te leggen in de tag van je keuze.

Voorbeeld van een aangepaste Google Tag Manager-pixel

Het onderstaande voorbeeld is een vereenvoudigde versie van een aangepaste Google Tag Manager-pixel waarin wordt getoond hoe je gegevens naar Google Tag Manager verstuurt. Om meer gebeurtenissen naar je dataLayer te pushen, kun je je abonneren op meer standaard en aangepaste gebeurtenissen.

// 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,
  });
});

Google Tag Manager configureren om gebeurtenissen van je aangepaste pixel te accepteren

Nadat je je aangepaste pixel hebt aangemaakt, moet je Google Tag Manager configureren om gebeurtenissen van je aangepaste pixel te accepteren. Hiervoor heb je een tag, een trigger en dataLayer-variabelen nodig in Google Tag Manager.

Enkele voorbeelden van een selectie van standaard klantgebeurtenissen en hun equivalenten in Google Tag Manager staan in de volgende tabel:

Lijst met standaard Shopify-klantgebeurtenissen voor gebruik met pixels, vergeleken met de equivalente klantgebeurtenissen in Google Tag Manager, plus de trigger die nodig is om de gebeurtenissen te activeren.
Shopify-gebeurtenis	Trigger	GTM-gebeurtenis
payment_info_submitted	Betaalgegevens indienen	add_payment_info
checkout_address_info_submitted	Verzendgegevens indienen	add_shipping_info
product_added_to_cart	Een artikel toevoegen aan de winkelwagen	add_to_cart
checkout_started	Checkout starten	begin_checkout
checkout_completed	Checkout voltooien	purchase
product_removed_from_cart	Artikel uit winkelwagen verwijderen	remove_from_cart
cart_viewed	Winkelwagen bekijken	view_cart
product_viewed	Productgegevenspagina bekijken	view_item
collection_viewed	Een lijst met artikelen bekijken	view_item_list

De gebeurtenisparameters van de GTM-tag moeten overeenkomen met de expected naming conventions zodat de dataLayer-gebeurtenissen van je aangepaste pixel kunnen worden verwerkt.

Hieronder volgen enkele voorbeelden van een selectie van gebeurteniseigenschappen van de dataLayer van een aangepaste pixel en hun equivalente gebeurtenisparameters in Google Analytics 4 (GA4):

Lijst van `dataLayer`-gebeurtenissen van een aangepaste pixel met de GA4-naamgevingsconventie
`dataLayer`-gebeurtenissen van aangepaste pixel	GA4-gebeurtenisparameters
`event.data?.checkout?.currencyCode`	`currency`
`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`

Hier is een voorbeeld met de volgende gebeurtenis 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,
  });
});

De Google Tag Manager-trigger is een aangepast gebeurtenistype met de gebeurtenisnaam checkout_completed. Het veld Gebeurtenisnaam in de trigger moet overeenkomen met de sleutel event in je aangepaste pixel.

orderId en currency zijn de variabelen die je in Google Tag Manager gebruikt om de gegevens van de gebeurtenis vast te leggen. Ze kunnen worden gekoppeld aan een dataLayer-variabele in Google Tag Manager. Elke gebeurtenisvariabele vereist een eigen dataLayer-variabele. Stel de trigger zo in dat deze wordt geactiveerd bij alle aangepaste gebeurtenissen.

Maak een tag aan die de trigger gebruikt die je zojuist hebt aangemaakt. Voeg onder gebeurtenisparameters de variabelen toe die je wilt vastleggen. In het bovenstaande voorbeeld worden orderId, currency, price, shippingLine en totalTax ingesteld als dataLayer-variabelen. Elke keer dat de tag wordt geactiveerd, worden deze dataLayer-variabelen met de gebeurtenis vastgelegd.

Let op: er moet ten minste één tag en trigger zijn ingesteld in Google Tag Manager om gegevensoverdracht te laten plaatsvinden.

Oude dataLayer.push(event)-aanroepen vervangen door analytics.publish()

Als je Google Tag Manager al eerder hebt ingesteld, moet je je dataLayer.push-aanroepen vervangen door Shopify.analytics.publish()-aanroepen. Je vindt je dataLayer.push-aanroepen in je theme.liquid-bestanden, in de sectie Lay-out van je themabewerker.

Je moet ook de dataLayer.push-aanroepen in de checkout.liquid vervangen. Omdat checkout.liquid echter niet compatibel is met Shopify Extensions, moet je een UI-extensie gebruiken om gegevens naar webpixels te pushen.

Hieronder staat een vereenvoudigd voorbeeld van een aangepaste gebeurtenis voor e-mailaanmelding die wordt bijgehouden met dataLayer in theme.liquid-bestanden:

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

Het Shopify-equivalent ziet er als volgt uit en pusht de gegevens naar je aangepaste pixel:

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

Vervolgens voeg je in je aangepaste pixelcode zoiets als het volgende toe:

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

Oude dataLayer.push(data) vervangen

Google Tag Manager heeft een functie waarmee je bij elke gebeurtenis een stateful dataLayer-object kunt pushen. Hoewel de pixel-sandbox van Shopify geen vergelijkbare functie bevat, kun je hetzelfde resultaat bereiken door je eigen dataobject aan te maken en dit door te geven aan aangepaste gebeurtenissen.

Definieer bijvoorbeeld een ‘customData’-object voordat je aangepaste gebeurtenissen worden gepubliceerd:

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

Wanneer je vervolgens je aangepaste gegevens wilt opnemen, geef je deze door aan je publish-methode:

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

Tips voor het instellen van Google Analytics 4

Houd rekening met de volgende tips voor het instellen van Google Analytics 4 (GA4) wanneer je Google Tag Manager als een aangepaste pixel gebruikt.

Schonere pagina-URL's

Wanneer GA4 in een sandbox wordt uitgevoerd, merk je misschien dat de pagina-URL's informatie bevatten over de sandbox waarin het wordt uitgevoerd. Als je de sandbox-informatie uit die URL's wilt verwijderen, kun je het automatisch volgen van pagina's in GA4 uitschakelen en in plaats daarvan je eigen implementatie gebruiken met de standaardgebeurtenis page_viewed.

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

Nadat je je eigen gebeurtenis naar dataLayer hebt gepubliceerd, kun je een GA4 page_view-tag aanmaken die wordt geactiveerd door de gebeurtenis page_viewed. Meestal kun je het tag-type Google Analytics: GA4-gebeurtenis gebruiken en de Gebeurtenisnaam instellen op page_view. Nadat je het tag-type en de gebeurtenisnaam hebt ingesteld, voeg je een parameter voor page_location toe en stel je de waarde in op dezelfde waarde die je vanuit je aangepaste pixel hebt doorgegeven aan je dataLayer.

Geoptimaliseerde meting

Wanneer GA4 in de Shopify-pixelsandbox wordt geladen, moeten sommige events die normaal gesproken automatisch worden afgeleid, handmatig worden ingesteld. Zo kunnen klikken op uitgaande links, als onderdeel van de GA4-instelling voor verbeterde meting, om veiligheidsredenen niet automatisch worden geactiveerd bij het gebruik van custom pixels. Het is echter mogelijk om de enhanced measurement events van GA4 zelf als custom events te implementeren.

De onderstaande code bevat een vereenvoudigd voorbeeld van het bijhouden van uitgaande link-klikken:

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

Maak tot slot in GTM een GA4-tag aan die de link-klik naar GA4 stuurt. Zorg ervoor dat de gebeurtenisnaam click is, zodat deze overeenkomt met de naamgeving van geoptimaliseerde gebeurtenissen in GA4.

Je kunt dezelfde tracking realiseren voor alle statistieken van Google's geoptimaliseerde meting.

Een aangepaste Google Tag Manager-pixel aanmaken

Op deze pagina

Voorbereidingen voor het aanmaken van een aangepaste pixel

Een aangepaste Google Tag Manager-pixel aanmaken

Stappen:

Abonneren op klantgebeurtenissen en pushen naar de dataLayer van GTM

Voorbeeld van een aangepaste Google Tag Manager-pixel

Google Tag Manager configureren om gebeurtenissen van je aangepaste pixel te accepteren

Oude dataLayer.push(event)-aanroepen vervangen door analytics.publish()

Oude dataLayer.push(data) vervangen

Tips voor het instellen van Google Analytics 4

Schonere pagina-URL's

Geoptimaliseerde meting

Je aangepaste pixel testen en debuggen