[Shopify] Purchase webhooks instellen
Let op: Om de webhooks goed werkend te krijgen is het belangrijk dat je de Google Tag (GA4 configuratietag) voorziet van extra parameters genaamd de marketing.user_id, marketing.session_count, en markeing.session_id
Wil je gebruik maken van Templates die al volledig ingericht zijn voor Shopify? Ga dan naar dit artikel.
Voeg DataLayer variabelen toe van het "trytagging_user_data" event als variabelen in je Google Tag Manager web container.
marketing.user_id
marketing.session_count
marketing.session_id
Zorg ervoor dat de Google Tag wordt afgevuurd via de "trytagging_user_data" event, anders is het niet mogelijk om de user data op te halen.
De Google Tag zal ten alle tijden afgevuurd moeten worden voor alle standaard eCommerce events. Mocht dat niet lukken, kies er dan voor om een Trigger groep te maken.
Voeg de 3 parameters toe die we hebben aangemaakt in stap 1.
Voeg 3 event data variabelen toe
session_count
sessionId
ClientId
Maak een Transformation aan met het type "Augment event"
client_id = {{ clientId }}
ga_session_id = {{ sessionId }}
ga_session_number = {{ session_count }}
Zorg er nu voor dat deze Transformations worden toegevoegd aan de GA4 Tag van de Servercontainer.
Zorg ervoor dat het "purchase" event wordt ge-exclude van de GA4 trigger. Dit doen we omdat de Purchase events voortaan via de Webhooks worden gestuurd, anders krijg je dubbele data.
Voor het maken van de Dataclient maken we gebruik van de Stape Dataclient. Je kunt deze hier downloaden: https://github.com/stape-io/data-client
Ga naar templates in sGTM -> Klik op new -> Import Data Client -> en klik op "Save"
Maak Dataclient aan door naar Clients te gaan -> Klik op nieuw -> Selecteer type Data Client Accepted Path Settings -> Add Path -> Voeg de endpoint toe zoals "order_created"
Voeg de volgende Event Data variabelen toe voor de Purchase webhooks data:
Download de hele template voor de variabelen van stap 12 en van de Purchase tag en trigger van stap 13 en 14 hier.
Array Map GA4
Maak een advanced Lookup table aan met alle GA parameters.
We hebben een aparte template gemaakt waarin je deze "Advanced Lookup table" direct kunt importeren. Je kunt deze hier downloaden.
Maak een de Purchase Tag aan en zorg dat je de volgende parameters toevoegt als purchase tag.
value = {{ total_price }}
currency = {{ presentment.currency }}
transaction_id = {{ name }}
items = {{Array Map GA4}}
tax = {{ total_tax }}
coupon = {{ discount_codes }}
page_location = {{ page_location }}
user_agent = {{ client_details.user_agent }}
ip_override = {{ client_details.browser_ip }}
client_id = {{ user_id }}
ga_session_id = {{num session_id}}
page_title = {{ page_title }}
event_time = {{ timestamp }}
page_hostname= {{ page_hostname }}
ga_session_number = {{session count}}
engagement_time_msec = 1564
Let op! Zorg ervoor dat je de variabelen checkt of deze gevuld worden in preview modus en check ook of het de juiste parameters zijn. Bijvoorbeeld: als page_location een andere URL heeft dan in werkelijkheid dan zul je deze variabelen moeten aanpassen.
Maak vervolgens een Trigger aan die wordt afgevuurd op basis van:
Client Name equals Data Client
Request Path contaings /order_created
source_name equals web
source_name is een Event Data variabele die je aan kan maken om de aankopen van buitenaf (fysieke winkel of een marketplace als bol of amazon) tegen te houden.
Ga vervolgens een test doen door live orders te testen of door zelf een order te plaatsen. Via het volgende artikel kun je zien hoe je deze test kan doen:
Webhooks testen via de sGTM
Wil je gebruik maken van Templates die al volledig ingericht zijn voor Shopify? Ga dan naar dit artikel.
Volg onderstaande stappen om de Google Tag in de webcontainer aan te passen:
Voeg DataLayer variabelen toe van het "trytagging_user_data" event als variabelen in je Google Tag Manager web container.
marketing.user_id
marketing.session_count
marketing.session_id
Zorg ervoor dat de Google Tag wordt afgevuurd via de "trytagging_user_data" event, anders is het niet mogelijk om de user data op te halen.
De Google Tag zal ten alle tijden afgevuurd moeten worden voor alle standaard eCommerce events. Mocht dat niet lukken, kies er dan voor om een Trigger groep te maken.
Voeg de 3 parameters toe die we hebben aangemaakt in stap 1.
| Configuratieparameter | Variable | Variabele Configuratie |
|---|---|---|
| x-fb-ck-fbc | x-fb-ck-fbc | 1st-Party Cookie |
| x-fb-ck-fbp | x-fb-ck-fbp | 1st-Party Cookie |
| first_party_collection | true | - |
| send_page_view | false | - |
| user_data | User-Provided Data | template |
| server_container_url | @ Server URL | Constant |
| clientId | marketing.user_id | Data Layer Variable |
| sessionId | marketing.session_id | Data Layer Variable |
| session_count | marketing.session_count | Data Layer Variable |
Volg onderstaande stappen om de servercontainer aan te passen:
Voeg 3 event data variabelen toe
session_count
sessionId
ClientId
Maak een Transformation aan met het type "Augment event"
client_id = {{ clientId }}
ga_session_id = {{ sessionId }}
ga_session_number = {{ session_count }}
Zorg er nu voor dat deze Transformations worden toegevoegd aan de GA4 Tag van de Servercontainer.
Zorg ervoor dat het "purchase" event wordt ge-exclude van de GA4 trigger. Dit doen we omdat de Purchase events voortaan via de Webhooks worden gestuurd, anders krijg je dubbele data.
Voor het maken van de Dataclient maken we gebruik van de Stape Dataclient. Je kunt deze hier downloaden: https://github.com/stape-io/data-client
Ga naar templates in sGTM -> Klik op new -> Import Data Client -> en klik op "Save"
Maak Dataclient aan door naar Clients te gaan -> Klik op nieuw -> Selecteer type Data Client Accepted Path Settings -> Add Path -> Voeg de endpoint toe zoals "order_created"
Voeg de volgende Event Data variabelen toe voor de Purchase webhooks data:
Download de hele template voor de variabelen van stap 12 en van de Purchase tag en trigger van stap 13 en 14 hier.
| Event Data Naam | Variable | Variabele Type | Templatelink |
|---|---|---|---|
| total_price | total_price | Event Data | - |
| presentment_currency | presentment_currency | Event Data | - |
| name | name | Event Data | - |
| Array Map Ga4 | download en importeer template van stap 5 | Array Map | Array map GA4 |
| total_tax | total_tax | Event Data | - |
| discount_codes | discount_codes.0.code | Event Data | - |
| page_location | https://www.jouwurl.com/checkouts/cn/{{source_identifier}}/thank_you | Constant | - |
| client_details.user_agent | client_details.user_agent | Gebeurtenisgegevens | |
| client_details.browser_ip | client_details.browser_ip | Gebeurtenisgegevens | |
| user_id | advanced lookup table zie import | Extract from JSON | user_id template |
| num session_id | Session id variable | String to number | num session_id template |
| page_title | Exacte titel van de pagina | Constant (bij 1 taal) of Tabel met reguliere expressies | Template voor tabel met reguliere expressies |
| timestamp | timestamp | Gebeurtenisgegevens | - |
| page_hostname | www.jouwdomeinnaam.nl | Constant | Zorg dat je checkt of dit met of zonder www is |
| ga_session_number | Extra check om bug te voorkomen | Number & String Operations | Download template |
| engagement_time_msec | 1564 | Geen variabelen nodig | - |
Array Map GA4
Maak een advanced Lookup table aan met alle GA parameters.
We hebben een aparte template gemaakt waarin je deze "Advanced Lookup table" direct kunt importeren. Je kunt deze hier downloaden.
Maak een de Purchase Tag aan en zorg dat je de volgende parameters toevoegt als purchase tag.
value = {{ total_price }}
currency = {{ presentment.currency }}
transaction_id = {{ name }}
items = {{Array Map GA4}}
tax = {{ total_tax }}
coupon = {{ discount_codes }}
page_location = {{ page_location }}
user_agent = {{ client_details.user_agent }}
ip_override = {{ client_details.browser_ip }}
client_id = {{ user_id }}
ga_session_id = {{num session_id}}
page_title = {{ page_title }}
event_time = {{ timestamp }}
page_hostname= {{ page_hostname }}
ga_session_number = {{session count}}
engagement_time_msec = 1564
Let op! Zorg ervoor dat je de variabelen checkt of deze gevuld worden in preview modus en check ook of het de juiste parameters zijn. Bijvoorbeeld: als page_location een andere URL heeft dan in werkelijkheid dan zul je deze variabelen moeten aanpassen.
Maak vervolgens een Trigger aan die wordt afgevuurd op basis van:
Client Name equals Data Client
Request Path contaings /order_created
source_name equals web
source_name is een Event Data variabele die je aan kan maken om de aankopen van buitenaf (fysieke winkel of een marketplace als bol of amazon) tegen te houden.
Ga vervolgens een test doen door live orders te testen of door zelf een order te plaatsen. Via het volgende artikel kun je zien hoe je deze test kan doen:
Webhooks testen via de sGTM
Bijgewerkt op: 03/10/2024
Dankuwel!