Hoe maak je Shopify checkout events meetbaar met Google Tag Manager?

Het goed meetbaar maken van de checkout events binnen Shopify is een essentieel onderdeel in het bijhouden van de resultaten van je advertentiecampagnes en het volgen van de klantenreis.

Voorheen was het mogelijk om trackingcodes toe via de "Additionele scripts" in de checkout-instellingen, om het klantgedrag tijdens het afrekenproces te meten. Met de overgang naar de nieuwe Shopify tracking pixel, is deze methode verouderd en wordt het gebruik ervan afgeraden.

De nieuwe Shopify aangepaste pixel in combinatie met Google Tag Manager biedt een krachtige oplossing. In deze blog bespreken we hoe je de checkout conversies instelt, de juiste datalayer bouwt om de event data te verrijken en vervolgens de verbinding legt met Google Tag Manager.

Vrijblijvende performance analyse

Tracking

8 min leestijd

Inhoudsopgave

Example H2

Het is gelukt!

Je aanmelding is succesvol gelukt.

Wij zullen je periodiek op de hoogte houden van online marketing tips en zullen je inspiratie opsturen.

Bekijk hieronder direct onze e-books.

Bekijk onze eBooks

Oops! Something went wrong while submitting the form.

Sparren over dit onderwerp?

Laat deze kans niet liggen en neem contact op voor een vrijblijvende performance analyse!

Neem contact op

Performance analyse

De standaard checkout-events in Shopify

Shopify biedt een reeks standaard events tijdens het afrekenproces die kunnen meetbaar gemaakt kunnen worden:

checkout_started: Wanneer een klant het afrekenproces start.
checkout_contact_info_submitted: Wanneer de contactinformatie is toegevoegd.
checkout_address_info_submitted: Wanneer de adresinformatie is toegevoegd.
checkout_shipping_info_submitted: Wanneer de verzendinformatie is toegevoegd.
payment_info_submitted: Wanneer de betalingsmethode is gekozen.‍
checkout_completed: Wanneer de aankoop is gedaan.

Het instellen van de aangepaste tracking pixel in Shopify

1. Aanmaken van de aangepaste tracking pixel in Shopify

Ga naar Instellingen → Klantgebeurtenissen in Shopify.
Klik op aangepaste pixel toevoegen.
Geef de pixel een naam

2. Verbind de Shopify tracking pixel met je Google Tag Manager container

Ga naar de webcontainer binnen Google Tag Manager
Duk op de Google Tag Manager code (GTM-XXXXXXX)
Kopieer de <head> code
Plak de code in de aangepaste pixel
Verwijder de <script> en </noscript> codes:

(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);

‍

Het instellen van de standaard checkout-events

Om de standaard checkout-events meetbaar te maken met de Shopify tracking pixel, is het belangrijk om de juiste datalayers toe te voegen. Een datalayer is een stuk website code die gegevens van de websitebezoeker en de productdata verzamelt. Google Tag Manager leest vervolgens deze datalayers en stuurt de data door naar Google Analytics 4 en de overige advertentiekanalen.

1. De datalayers toevoegen aan de Shopify tracking pixel

Abonneer je op een standaard checkout event, als voorbeeld gebruiken we checkout_completed, via de onderstaande code:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
   });

‍

Voeg vervolgens de event parameters toe:


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

‍

Het instellen van de checkout events in Google Tag Manager

Nu de aangepaste Shopify tracking pixel is opgezet en de datalayers zijn ingericht, is het tijd om deze data te koppelen aan Google Tag Manager. Dit zorgt er voor dat je de checkout-events door kunt sturen naar tools zoals Google Analytics 4 of advertentiekanalen. In dit hoofdstuk laten we stap voor stap zien hoe je de juiste triggers, tags en variabelen configureert.

1. De datalayers verbinden aan Google Tag Manager

Navigeer naar de webcontainer van Google Tag Manager
Ga naar Triggers → New → Trigger configuration → Custom Event‍
Gebruik als Event name de standaard checkout-events, in dit voorbeeld dus checkout_completed:

2. Google Analytics 4 tag instellen

Navigeer naar de Tags → New → Tag Configuration → Google Analytics → Google Analytics: GA4 Event
Vul de Measurement ID in: G-XXXXXXX
Vul de Event Name in: purchase
Selecteer de nieuwe trigger die we in de vorige stap hebben aangemaakt

3. Toevoegen van de event parameters aan de tag

Navigeer naar de Variables → New → Variable Configuration → Data Layer Variable‍
Vul bij de Data Layer Variable Name, de naam in van de parameter binnen de datalayer. Bijvoorbeeld: value

Druk op save
Navigeer naar je aangemaakte tag in de vorige stap
Vul onder Event Parameters de Event parameter in: value
Voeg onder Value de aangemaakte parameter toe door op de bouwsteen te drukken rechts van het invulveld, om vervolgens de aangemaakte variabel te kiezen

Het testen van de checkout events

Het is heel belangrijk om altijd goed te testen of alle events die zijn aangemaakt goed binnenkomen in Google Analytics. Daarom is het belangrijk om het betaalproces volledig te doorlopen, zodat je kan controleren of alles wordt gemeten.

1. Testen van de events binnen Google Analytics 4

Open je Google Analytics 4 domein
Navigeer in het menu naar Reports → Realtime overview

Doorloop de checkout stappen op je website en kijk of deze in dit overzicht goed binnenkomen. In het onderstaande voorbeeld zie je dat het purchase event goed wordt gemeten:

Conclusie

Door gebruik te maken van Shopify aangepaste pixel kun je waardevolle inzichten krijgen in het gedrag van je website bezoekers. Daarnaast zorgt het gebruik van de juiste datalayers, voor meer product en klantinformatie, wat gebruikt kan worden in je marketingstrategie. De combinatie met Google Tag Manager zorgt ervoor dat je tracking flexibel en overzichtelijk blijft.

Kom je er zelf niet uit en heb je hulp nodig met jouw Shopify tracking? Neem dan contact met ons op! Lees ook onze blog over het (laten) maken van een shopify website.

Geschreven door

Ward Jansen

Advertising, Tracking Specialist

Vrijblijvende performance analyse

Vaak gelezen en bekeken

Chase wordt gevormd door gepassioneerde mensen.

Blog

Leadgeneratie

Winnen met leadgeneratie voor recruitment agencies

Recruitment agencies staan voor een grote uitdaging. De concurrentie is hevig, bedrijven vissen vaak in dezelfde vijver, en budgetten lijken nooit groot genoeg. Bovendien is het lastig om met beperkte specialistische online marketing kennis, de juiste bedrijven als klant aan te trekken, zonder in de valkuil te lopen van irrelevante leads, zoals sollicitanten.

De grote vraag is: hoe bouw je een leadgeneratiestrategie op die effectief en duurzaam is? In deze blog nemen we je mee door drie bewezen stappen waarmee jouw recruitment agency kan uitblinken in een overvolle markt.

Wil je meer weten over ons leadgeneratie concept en hoe je hiermee jouw recruitment agency kan laten winnen? Bekijk dan ons leadgeneratie concept voor onze werkwijze.

Wat zijn Enhanced Conversions (Verbeterde Conversies) en hoe zet je het in?

Blog

Google Ads

Wat zijn Enhanced Conversions (Verbeterde Conversies) en hoe zet je het in?

Een van de grootste voordelen van online marketing in vergelijking met offline marketing is de meetbaarheid van jouw campagnes.

Shopify SEO-migratie: hoe ziet dit proces eruit?

Blog

Shopify blogs

Shopify SEO-migratie: hoe ziet dit proces eruit?

Heb je genoeg van je huidige webshop platform en wil je iets wat sneller, gebruiksvriendelijker en beter schaalbaar is? Dan is het tijd om te denken aan een Shopify migratie! In deze blog duiken we dieper in de wereld van Shopify en hoe je er voor kunt zorgen dat je je website in een keer perfect overzet. Wat zijn de stappen, waar moet je deze uitvoeren en hoe doe je dat? Pak je koffie en laten we erin duiken!