EN

NL

DE

AMS01:00

Contact

AMS01:00

EN

NL

DE

AMS01:00

Insights

De nieuwe manier van tracken in Shopify: zo benut je Customer Events

Teamlid van Flatline Agency voor een bakstenen gebouw

Door Robin Laseur

Whitepaper aanvragen

Door je aan te melden ga je akkoord met ons privacybeleid

IN DIT ARTIKEL

Een praktische gids voor de nieuwe tracking in Shopify: zo richt je GTM in met Shopify Customer Events en Shopify Pixels.

Een praktische gids voor de nieuwe tracking in Shopify: zo richt je GTM in met Shopify Customer Events en Shopify Pixels.

Een praktische gids voor de nieuwe tracking in Shopify: zo richt je GTM in met Shopify Customer Events en Shopify Pixels.

Beeld van Shopify Customer Events op groen: add, change, manage, met Custom Pixels en Shopify Admin

Inleiding

Met Shopify Customer Events verandert er veel aan hoe webshopeigenaren klantgedrag kunnen meten en begrijpen. In deze blog duiken we in de nieuwe manier van tracken: waarom de Checkout 2.0 van Shopify Customer Events verplicht maakt, wat deze aanpak oplevert, hoe Shopify Pixels werkt, voorbeelden van integraties, en welke problemen en oplossingen er zijn met Google Tag Manager (GTM) in deze nieuwe situatie.

De overstap naar Customer Events met Shopify Checkout 2.0

Met Shopify Checkout 2.0 heeft Shopify de manier van tracken volledig omgegooid, en zijn Customer Events een onmisbaar onderdeel geworden. Anders dan eerdere versies is Checkout 2.0 gebouwd als een geavanceerdere, aanpasbare checkout die alleen met Customer Events nauwkeurig te meten is.

Waarom de verandering?
Shopify stapt over op Customer Events omdat er behoefte is aan gedetailleerdere en betrouwbaardere data tijdens de checkout, en die is cruciaal om gebruikersgedrag te begrijpen en de conversie te verbeteren.

Wat het betekent voor webshopeigenaren
Voor webshops betekent dit dat traditionele tracking, zoals methodes die alleen op GTM leunen, niet meer het volledige beeld geeft dat nodig is om de salesfunnel goed te optimaliseren.

Waarom Shopify Customer Events gebruiken?

Voortbouwend op de voordelen hierboven: dit is waarom Customer Events onmisbaar zijn voor een moderne Shopify-webshop:

Rechtstreeks geïntegreerd in Shopify
Omdat Customer Events onderdeel zijn van het platform zelf, is de data consistent en betrouwbaar, met minder risico op verschillen die bij externe tools kunnen ontstaan.

Nauwkeurige, gedetailleerde data
Customer Events leggen gedetailleerde, specifieke interacties op je hele site vast. Zo begrijp je gebruikersgedrag beter, vooral in de cruciale fase van de checkout.

Voldoen aan privacyregels
Nu privacyregels strenger worden, helpen de ingebouwde compliancefuncties van Customer Events je de complexiteit van externe trackingtools te vermijden.

Hoe Shopify Pixels en Customer Events worden ingeladen

Shopify Pixels, die Customer Events vastleggen, worden via iFrames direct in je webshop geladen. Zo blijven de content van je site en de trackingscripts van elkaar gescheiden, en dat heeft een aantal voordelen:

Beveiliging
Door iFrames te gebruiken draait de pixelcode in een afgeschermde omgeving. Dat beperkt het risico op beveiligingsproblemen die kunnen ontstaan als scripts direct worden ingeladen.

Consistent op alle apparaten
Met iFrames worden pixels op verschillende apparaten en browsers correct geladen, met consistente trackingresultaten.

Mogelijke nadelen
Deze methode kan ook problemen geven. Sommige externe tools kunnen niet bij de content in het iFrame, met problemen als gevolg, zoals het probleem met Google Tag Manager hieronder.

Het probleem met Google Tag Manager: beperkingen in de previewmodus

Een van de huidige beperkingen voor webshopeigenaren is de previewmodus van Google Tag Manager. Die kan Shopify Customer Events niet volledig meten, door de manier waarop deze events in het iFrame worden vastgelegd.

Waarom de GTM-preview tekortschiet
De previewmodus van GTM kan niet werken met content in iFrames, en kan Shopify Customer Events dus niet goed tonen of testen. Dat maakt debuggen en controleren of alles goed staat lastiger voor webshops die voor hun tracking op GTM vertrouwen.

Omwegen en oplossingen
Om te controleren of Customer Events goed zijn geïnstalleerd, gebruik je de eigen eventrapportage van Shopify, of externe analytics-tools die volledig werken met tracking in iFrames. Daarnaast heeft Shopify ingebouwde tools om de status en prestaties van je pixels te controleren, zodat je zeker weet dat je tracking werkt zoals bedoeld.

Customer Events meten: controleren of alles goed staat

Door de beperkingen van GTM heb je andere manieren nodig om te controleren of Customer Events goed zijn geïnstalleerd en werken:

De ingebouwde tools van Shopify
In het admindashboard van Shopify zie je een overzicht van Customer Events en de activiteit van pixels. Door die rapporten regelmatig te bekijken, weet je of alles werkt zoals verwacht. Tijdens de inrichting kun je bovendien met de testmodus van Shopify Pixels de website bekijken en zie je alle events die worden afgevuurd (zoals de previewmodus van GTM vroeger deed).

Scherm Customer events in de Shopify-admin met een custom GTM-pixel en de trackingcode


Externe analytics-tools
Tools als Google Analytics kunnen, goed ingesteld, nog steeds data uit Customer Events meten, ook als je ze in GTM niet volledig kunt previewen. Je kunt naast de GTM-pixel een aparte GA4-pixel inrichten. Daarmee test je de datalayers en events in het realtime-overzicht van Google Analytics.

Uitgebreide gids voor Shopify Customer Events

Om het meeste uit Customer Events te halen, moet je weten wat je ermee kunt meten. Dit zijn de soorten events:

Paginaweergaven
Meet wanneer klanten specifieke productpagina's, categorieën of je homepage bekijken. Zo zie je welke producten of content de meeste aandacht trekken.

Toevoegen aan winkelwagen
Zie wanneer klanten iets in hun winkelwagen leggen. Dat geeft inzicht in interesse voor producten en in hoe goed je productomschrijvingen en afbeeldingen werken.

Verwijderen uit winkelwagen
Begrijpen wanneer en waarom klanten iets verwijderen, helpt om problemen met prijs, verzendkosten of productomschrijvingen te vinden.

Checkout gestart
Meet wanneer klanten de checkout starten, zodat je ziet hoeveel klanten afhaken voordat ze de aankoop afronden.

Aankoop
Dit cruciale event legt vast wanneer een aankoop is afgerond. Het hangt het directst samen met omzet en maakt gedetailleerde verkooprapportage mogelijk.

Zoekopdrachten
Meet wanneer klanten de zoekfunctie op je site gebruiken. Zo zie je naar welke producten het meest wordt gezocht en kun je je zoekfunctie verbeteren.

Voorbeeldcode voor een GTM-pixel


Dit voorbeeld laat een eigen Google Tag Manager-pixel (GTM) zien voor gebruik met de Customer Events API van Shopify. De pixel meet specifieke events in je Shopify-webshop en stuurt de data naar Google Tag Manager. Je kunt de code aanpassen om de events te meten die voor de analytics van jouw webshop belangrijk zijn.

Stap voor stap inrichten

1. Vervang het GTM-ID: vervang 'GTM-XXXXXXX' in het script door je eigen Google Tag Manager-ID.

2. Voeg de pixelcode toe: plaats deze code in het onderdeel Customer Events in je Shopify-admin. De pixel luistert dan naar specifieke events in je webshop en zet de data in de dataLayer.

Voorbeeld van de pixelcode

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

<em>//Initialize GTM tag</em>
(<strong>function</strong>(w,d,s,l,i){w[l]<strong>=</strong>w[l]<strong>||</strong>[];w[l].<strong>push</strong>({'gtm.start':
<strong>new</strong> <strong>Date</strong>().<strong>getTime</strong>(),event:'gtm.js'});<strong>var</strong> f<strong>=</strong>d.<strong>getElementsByTagName</strong>(s)[0],
j<strong>=</strong>d.<strong>createElement</strong>(s),dl<strong>=</strong>l<strong>!=</strong>'dataLayer'?'&l='<strong>+</strong>l:'';j.<strong>async=true</strong>;j.src<strong>=</strong>
'https://www.googletagmanager.com/gtm.js?id='<strong>+</strong>i<strong>+</strong>dl;f.parentNode.<strong>insertBefore</strong>(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

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

<em>//subscribe to events</em>
analytics.<strong>subscribe</strong>("checkout_completed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("payment_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_shipping_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_address_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_contact_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_started", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("product_added_to_cart", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("cart_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("page_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("product_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("search_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("collection_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({


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

<em>//Initialize GTM tag</em>
(<strong>function</strong>(w,d,s,l,i){w[l]<strong>=</strong>w[l]<strong>||</strong>[];w[l].<strong>push</strong>({'gtm.start':
<strong>new</strong> <strong>Date</strong>().<strong>getTime</strong>(),event:'gtm.js'});<strong>var</strong> f<strong>=</strong>d.<strong>getElementsByTagName</strong>(s)[0],
j<strong>=</strong>d.<strong>createElement</strong>(s),dl<strong>=</strong>l<strong>!=</strong>'dataLayer'?'&l='<strong>+</strong>l:'';j.<strong>async=true</strong>;j.src<strong>=</strong>
'https://www.googletagmanager.com/gtm.js?id='<strong>+</strong>i<strong>+</strong>dl;f.parentNode.<strong>insertBefore</strong>(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

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

<em>//subscribe to events</em>
analytics.<strong>subscribe</strong>("checkout_completed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("payment_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_shipping_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_address_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_contact_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_started", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("product_added_to_cart", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("cart_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("page_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("product_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("search_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("collection_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({


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

<em>//Initialize GTM tag</em>
(<strong>function</strong>(w,d,s,l,i){w[l]<strong>=</strong>w[l]<strong>||</strong>[];w[l].<strong>push</strong>({'gtm.start':
<strong>new</strong> <strong>Date</strong>().<strong>getTime</strong>(),event:'gtm.js'});<strong>var</strong> f<strong>=</strong>d.<strong>getElementsByTagName</strong>(s)[0],
j<strong>=</strong>d.<strong>createElement</strong>(s),dl<strong>=</strong>l<strong>!=</strong>'dataLayer'?'&l='<strong>+</strong>l:'';j.<strong>async=true</strong>;j.src<strong>=</strong>
'https://www.googletagmanager.com/gtm.js?id='<strong>+</strong>i<strong>+</strong>dl;f.parentNode.<strong>insertBefore</strong>(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

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

<em>//subscribe to events</em>
analytics.<strong>subscribe</strong>("checkout_completed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("payment_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_shipping_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_address_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_contact_info_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("checkout_started", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("product_added_to_cart", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("cart_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("page_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("product_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("search_submitted", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({
    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.<strong>subscribe</strong>("collection_viewed", (event) <strong>=></strong> {
  window.dataLayer.<strong>push</strong>({


Meer informatie vind je in de officiële documentatie van Shopify, hier

1. Vervang het GTM-ID: vervang 'GTM-XXXXXXX' in het script door je eigen Google Tag Manager-ID.

2. Voeg de pixelcode toe: plaats deze code in het onderdeel Customer Events in je Shopify-admin. De pixel luistert dan naar specifieke events in je webshop en zet de data in de dataLayer.

Controleren of de pixel goed werkt

Controleer na het toevoegen van de code of de pixel goed afvuurt, met tools als het realtime-overzicht van Google Analytics of de debugmodus van GTM, al heeft die beperkingen bij iFrames. Je kunt de activiteit van de pixel ook direct in de Shopify-admin onder "Pixels" bekijken, of de netwerkverzoeken inspecteren met de ontwikkelaarstools van Chrome.

Met deze gids zet je de GTM-pixelcode goed op in je Shopify-webshop. Vervang de voorbeeldwaarden door je eigen trackingcodes en andere ID's die bij jouw inrichting horen.

Conclusie: de toekomst van eCommerce-tracking

De overstap naar Shopify Customer Events is een grote stap in hoe webshopeigenaren hun bedrijf kunnen meten en verbeteren. Er zijn uitdagingen, zoals het probleem met de GTM-preview, maar de voordelen wegen daar ruim tegenop. Wie volledig overstapt op Customer Events, krijgt dieper inzicht, nauwkeurigere data en persoonlijkere klantervaringen, en blijft bovendien binnen de veranderende privacywetgeving.

Wil je voorop blijven lopen, dan is dit het moment om over te stappen op deze nieuwe manier van tracken en de tools van Shopify volledig te benutten.

Wil je team dit liever in één keer goed ingericht hebben, dan zet ons eCommerce-bureau Customer Events en server-side tracking standaard op bij elke Shopify-build.

Deze opzet helpt je om je blog goed te structureren, zodat hij informatief en nuttig is voor je publiek. Voeg voorbeelden, screenshots en eventueel video toe om de gids te versterken en aantrekkelijker te maken voor je lezers.

Gerelateerde artikelen

Tablet en verzendlabel als illustratie van signalen dat losse systemen omzet kosten

eCommerce

Insights

Zeven signalen dat losse systemen je ongemerkt omzet kosten

Shopify POS-kassa en laptop met één voorraadgetal voor winkel en online

eCommerce

Hoe realtime voorraad echt synchroon blijft tussen je winkel en online (Shopify)

Shopify POS-kassa, webshop op laptop en één Shopify-record voor voorraad, klanten en orders, tegenover een unified commerce-stack

eCommerce

Heb je echt een unified commerce-platform nodig, of is Shopify POS genoeg?

Mis niets, schrijf je in

Door je aan te melden ga je akkoord met ons privacybeleid

Mis niets, schrijf je in

Door je aan te melden ga je akkoord met ons privacybeleid

Mis niets, schrijf je in

Door je aan te melden ga je akkoord met ons privacybeleid

Vertel ons over je project.

Consultant van Flatline Agency

Plan een call

Bekijk ons werk

Vertel ons over je project.

Consultant van Flatline Agency

Plan een call

Bekijk ons werk

Vertel ons over je project.

Consultant van Flatline Agency

Plan een call

Bekijk ons werk