Shopify Customer Events Instellen
Shopify Customer events installeer je om de events begin_checkout, add_paymentinfo, add_shippinginfo en purchase te meten via de Shopify checkout-pagina.
Om de bovenstaande events met succes te kunnen meten moet er een speciale pixel worden toegevoegd aan de customer events van Shopify.
Ga naar de instellingen van je shopify store
Ga vervolgens naar "Customer events"
Voeg een custom pixel toe. Geef deze custom pixel een duidelijke naam, bijvoorbeeld "AdPage Tagging".
Ga naar de trytagging omgeving, selecteer de sGTM container die hoort bij de shopify website waar jij de pixel op wilt installeren
Ga vervolgens naar "pixel installatie"
Als platform kies je "Shopify (Customer Events)" in plaats van "Shopify".
Heb je nog niet eerder een tagging pixel gegenereerd? Volg dan deze stappen om de rest van de tagging pixel te genereren.
Volg de instructies van de pixel installatie. Kopieer het script van instructie 3 en plak deze in de custom pixel die je aangemaakt hebt in Shopify.
Navigeer terug naar de eerder aangemaakte custom pixel in je shopify backend.
Plak het script in het daarvoor bestemde veld.
Onder 'Customer Privacy' klap je de 'Permissions' instellingen open, hier selecteer je "not required".
Helemaal bovenaan op je pagina klik je op Opslaan.
Druk vervolgens op connect om je Custom Pixel te activeren.
Nu dat de pixel is geïnstalleerd is het belangrijk dat we valideren of Shopify hem goed inzet, dit doen we door de ingebouwde pixel helper tool van Shopify te gebruiken
Ga naar de customer events pagina en click naast je zojuist geïnstalleerde pixel op de drie puntjes en daarna op 'Test'.
Er verschijnt nu een preview versie van je website. Navigeer naar een product, doe die in je winkelmandje en ga vervolgens naar de checkout.
Als de pixel helper hierbij aangeeft dat het event "Checkout_started" is gemeten is de installatie van de pixel succesvol geweest.
Nu is het belangrijk dat we de juiste tags toevoegen aan onze web container. De volgende gebeurtenistags ga je toevoegen: begin_checkout, add_shipping_info, add_payment_info & purchase
Ga naar je Google Tag Manager Web Container
Maak een nieuwe GA4 Tag aan
Geef je tag een toepasselijke naam, in dit geval "GA4 - begin_checkout" Voeg vervolgens je GA4 metings ID toe en de toepasselijke parameters. Deze parameters kan je in dit artikel vinden.
Scroll vervolgens naar onderen en click op "triggers"
Click op het blauwe plusje rechtsboven om een nieuwe trigger aan te maken
Selecteer "aangepaste gebeurtenis"
Noem de trigger hetzelfde als de tag en voeg de naam van het trytagging-event in die je hieronder kan zien.
Sla de trigger op. Sla de tag op.
Vanaf dat moment zal er een GA4 gebeurtenis aangemaakt worden op het moment dat een gebruiker die interactie uitvoert op je checkout-pagina. Als de rest van je Server-Side Tagging implementatie ingesteld is, worden de GA4 gebeurtenissen o.a. naar je server verstuurd en vanuit daar weer doorgestuurd naar de desbetreffende platformen.
Nu dat de pixel is gëinstalleerd op je Shopify website en je Google Tag Managers containers de nodige tags en triggers ingesteld heeft om de events van de pixel aan te maken en door te sturen is het tijd om te testen of alles goed ingesteld staat.
Dit testen doe je op de server preview mode. Omdat de checkout van Shopify technisch gezien in een iframe staat, kan je dit niet testen via de Google Tag Manager web container preview mode. Deze iframe kan je niet direct testen, maar je kan wel testen welke gebeurtenissen er binnenkomen op je server container.
Open je sGTM container en open de preview mode.
Open je webshop in een ander tabblad.
Navigeer op je webshop naar een product, voeg deze toe aan je winkelwagen en ga vervolgens naar je checkout.
Als je alles goed hebt ingesteld zie je nu in de debug view van google tag manager de gebeurtenis "begin_checkout" binnenkomen.
Selecteer die gebeurtenis en check onder het 'Event Data' tabblad of alle eCommerce parameters op de juiste manier doorgestuurd zijn.
Check dit ook voor add_payment_info & add_shipping_info. En als je een aankoop kan doen, check dan ook het purchase event.
Pixel Code installeren
Om de bovenstaande events met succes te kunnen meten moet er een speciale pixel worden toegevoegd aan de customer events van Shopify.
Ga naar de instellingen van je shopify store
Ga vervolgens naar "Customer events"
Voeg een custom pixel toe. Geef deze custom pixel een duidelijke naam, bijvoorbeeld "AdPage Tagging".
Ga naar de trytagging omgeving, selecteer de sGTM container die hoort bij de shopify website waar jij de pixel op wilt installeren
Ga vervolgens naar "pixel installatie"
Als platform kies je "Shopify (Customer Events)" in plaats van "Shopify".
Heb je nog niet eerder een tagging pixel gegenereerd? Volg dan deze stappen om de rest van de tagging pixel te genereren.
Volg de instructies van de pixel installatie. Kopieer het script van instructie 3 en plak deze in de custom pixel die je aangemaakt hebt in Shopify.
Navigeer terug naar de eerder aangemaakte custom pixel in je shopify backend.
Plak het script in het daarvoor bestemde veld.
Onder 'Customer Privacy' klap je de 'Permissions' instellingen open, hier selecteer je "not required".
Helemaal bovenaan op je pagina klik je op Opslaan.
Druk vervolgens op connect om je Custom Pixel te activeren.
Valideren of de pixel werkt
Nu dat de pixel is geïnstalleerd is het belangrijk dat we valideren of Shopify hem goed inzet, dit doen we door de ingebouwde pixel helper tool van Shopify te gebruiken
Ga naar de customer events pagina en click naast je zojuist geïnstalleerde pixel op de drie puntjes en daarna op 'Test'.
Er verschijnt nu een preview versie van je website. Navigeer naar een product, doe die in je winkelmandje en ga vervolgens naar de checkout.
Als de pixel helper hierbij aangeeft dat het event "Checkout_started" is gemeten is de installatie van de pixel succesvol geweest.
De juiste Tags aanmaken in de Google Tag Manager Web Container
Nu is het belangrijk dat we de juiste tags toevoegen aan onze web container. De volgende gebeurtenistags ga je toevoegen: begin_checkout, add_shipping_info, add_payment_info & purchase
Ga naar je Google Tag Manager Web Container
Maak een nieuwe GA4 Tag aan
Geef je tag een toepasselijke naam, in dit geval "GA4 - begin_checkout" Voeg vervolgens je GA4 metings ID toe en de toepasselijke parameters. Deze parameters kan je in dit artikel vinden.
Scroll vervolgens naar onderen en click op "triggers"
Click op het blauwe plusje rechtsboven om een nieuwe trigger aan te maken
Selecteer "aangepaste gebeurtenis"
Noem de trigger hetzelfde als de tag en voeg de naam van het trytagging-event in die je hieronder kan zien.
| Naam GA4 gebeurtenis | Naam aangepaste gebeurtenis trigger |
|---|---|
| begin_checkout | trytagging_begin_checkout |
| add_payment_info | trytagging_add_payment_info |
| add_shipping_info | trytagging_add_shipping_info |
| purchase | trytagging_purchase |
Sla de trigger op. Sla de tag op.
Vanaf dat moment zal er een GA4 gebeurtenis aangemaakt worden op het moment dat een gebruiker die interactie uitvoert op je checkout-pagina. Als de rest van je Server-Side Tagging implementatie ingesteld is, worden de GA4 gebeurtenissen o.a. naar je server verstuurd en vanuit daar weer doorgestuurd naar de desbetreffende platformen.
De Pixel gebeurtenissen testen
Nu dat de pixel is gëinstalleerd op je Shopify website en je Google Tag Managers containers de nodige tags en triggers ingesteld heeft om de events van de pixel aan te maken en door te sturen is het tijd om te testen of alles goed ingesteld staat.
Dit testen doe je op de server preview mode. Omdat de checkout van Shopify technisch gezien in een iframe staat, kan je dit niet testen via de Google Tag Manager web container preview mode. Deze iframe kan je niet direct testen, maar je kan wel testen welke gebeurtenissen er binnenkomen op je server container.
Open je sGTM container en open de preview mode.
Open je webshop in een ander tabblad.
Navigeer op je webshop naar een product, voeg deze toe aan je winkelwagen en ga vervolgens naar je checkout.
Als je alles goed hebt ingesteld zie je nu in de debug view van google tag manager de gebeurtenis "begin_checkout" binnenkomen.
Selecteer die gebeurtenis en check onder het 'Event Data' tabblad of alle eCommerce parameters op de juiste manier doorgestuurd zijn.
Check dit ook voor add_payment_info & add_shipping_info. En als je een aankoop kan doen, check dan ook het purchase event.
Bijgewerkt op: 28/08/2024
Dankuwel!