Google Tag Manager installeren op Shopify

Het is voor veel webshops op Shopify altijd een drama geweest: Het goed instellen van Google Tag Manager. Met Shopify Plus waren er altijd mogelijkheden om de code goed te installeren (doordat de checkout.liquid aan te passen was), maar bij de ‘normale’ Shopify pakketten waren er altijd beperkingen met het meten:

  • De Javascript code moet in een template worden geplaatst. Hierdoor mis je informatie in de checkout
  • De code moet ook in de scripts op de bedankpagina/orderstatuspagina geplaatst worden. Deze wordt echter niet altijd getoond.
  • De DataLayers werken niet altijd, afhankelijk van het thema.

Er zijn meerdere apps beschikbaar die enkele pijnpunten verhelpen, maar helemaal foutloos werken deze vaak ook niet.

Sinds kort (het vierde kwartaal van 2022) heeft Shopify echter een nieuwe functie, genaamt “Klantgebeurtenissen” (of in het Engels: Customer events) gelanceerd.

Wat zijn Klantgebeurtenissen/Customer Events?

Simpel gezegd: De optie klantgebeurtenissen binnen Shopify is simpelweg een alternatief voor Google Tag Manager. Je kunt binnen de klantgebeurtenissen pixels toevoegen, die verschillende gebeurtenissen/events meten, en door kunnen geven aan derde partijen. Klinkt herkenbaar? ;-)

Het grote voordeel van deze klantgebeurtenissen is dat dit rechtstreeks is geïntegreerd binnen Shopify. Dit betekent dat er geen cookies nodig zijn, en je dus “Server-side” kunt meten. Hiermee worden de metingen nauwkeuriger, en kun je meer informatie meten.

Daarnaast zijn er nog een flink aantal extra voordelen ten opzichte van de Google Tag Manager:

  • Doordat de functie rechtstreeks binnen Shopify geïntegreerd is, kunnen apps gebruik maken van deze functie. Als een app gebruik maakt van deze functie, wordt deze rechtstreeks geïntegreerd in de klantgebeurtenissen, en ben je verzekerd van een goede meet-methode. Enkele apps die gebruik maken van deze functie zijn onder andere Snapchat, Lucky Orange en Mailchimp. Een complete lijst vind je in de App Store van Shopify.
  • De pixels worden geplaatst in de instellingen van Shopify. Je hoeft geen wijzigingen te doen in de template. Hierdoor blijven de pixels werken wanneer je wisselt van thema, en worden de codes ook niet overschreven als het thema verandert. Bijkomend voordeel voor een shopeigenaar: Je hoeft niet meer te zoeken in .liquid bestanden om stukken code toe te voegen.
  • Standaard heeft Shopify al een flink aantal events toegevoegd. Dit zijn events die niet altijd te meten zijn met Tag Manager, doordat deze code niet overal geplaatst kan (kon) worden. Daarnaast zijn de events uit te breiden met eigen gebeurtenissen, als je meer wilt kunnen meten.
  • De klantgebeurtenissen werken goed samen met de AVG/GDPR instellingen binnen Shopify. Hier zijn geen extra aanpassingen voor nodig.

Google Tag Manager integreren in Shopify

Al met al bieden de klantgebeurtenissen binnen Shopify een hoop goede functies, waardoor Tag Manager overbodig kan zijn.

Toch is dit niet altijd gewenst: Veel marketingbureaus zijn gewend aan Tag Manager, en werken liever via Google Tag Manager om alles te onderhouden. En logisch: Google Tag Manager is al jaren een ontzettend krachtige tool om de verschillende pixels overzichtelijk te houden. Zeker voor marketing-bureaus die naast Shopify shops ook andere sites onderhouden, is het niet handig om weer een extra tool te leren.

Gelukkig is hier een oplossing voor: Je kunt de Google Tag Manager code plaatsen als een pixel binnen de klantgebeurtenissen. Dit werkt met een paar aanpassingen in de code, voor alle shops op Shopify. Je hebt hiervoor geen Shopify Plus nodig!

De stappen die je moet doorlopen zijn vrij goed uitgelegd door Shopify, en dus overbodig om hier nogmaals uit te leggen. Kort gezegd gaat het om de volgende stappen:

  1. Je moet allereerst een Google Tag Manager account hebben. Maak deze aan via de site van Google.
  2. Heb je al een Tag Manager code? Dan is het belangrijk om eerst alle bestaande code te verwijderen.
  3. Plaats de code van de GTM-container in een nieuwe aangepaste pixel. Je vindt deze aangepaste pixels in de Instellingen van Shopify, onder “Klantgebeurtenissen” > Aangepaste pixels.
  4. Vervolgens koppel je de events van Google Tag Manager aan de events binnen Shopify. Dit doe je door bij een event van Shopify een event in de DataLayer van Google Tag Manager te ‘pushen’.

Shopify geeft het volgende voorbeeld aan voor een productweergave:

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

De complete uitleg van Shopify is te lezen op de pagina “Een aangepaste Google Tag Manager-pixel aanmaken”, op het helpcentrum van Shopify.

Op deze manier kun je verschillende events naar Google Tag Manager pushen. Hierdoor ben je verzekerd van een zo compleet mogelijke meting, maar kun je toch gebruik maken van de functionaliteiten binnen Tag Manager. Mist er een bepaald event? Dan kan er in het thema een eigen event aangemaakt worden.

En nu?

Zodra Google Tag Manager goed ingesteld staat, is het aan jou, of je marketing-partij om de zaken goed te gaan meten. De ‘Customer Events’ functionaliteit is nog vrij nieuw binnen Shopify, dus heeft het nog zijn beperkingen. Daarom is een koppeling met Google Tag Manager zeker niet vreemd. Mijn verwachting is dat de compatibiliteit met apps, en het aantal standaard events in de toekomst flink uitgebreid wordt, waardoor een koppeling met Google Tag Manager steeds minder belangrijk wordt.