[Magento] Setting Up Purchase Webhooks
Note: To get the webhooks working correctly, it is important that you provide the Google Tag (GA4 configuration tag) with extra parameters named marketing.user_id, marketing.session_count, and marketing.session_id.
Add DataLayer variables from the “trytagging_user_data” event.
marketing.user_id

marketing.session_count

marketing.session_id

Ensure that the Google Tag is fired via the “trytagging_user_data” event; otherwise, it won’t be possible to retrieve the user data.

The Google Tag should always be fired for all standard eCommerce events. If that doesn’t work, choose to create a Trigger Group.
Add the 3 parameters we created in step 1.

ClientId = {{ marketing.user_id }}
sessionid = {{ marketing.session_id }}
sessioncount = {{ marketing.session_count }}
Follow the steps below to adjust the server container:
Add 3 event data variables.
sessioncount

sessionid

ClientId

Create a Transformation with the type “Augment event.”

client_id = {{ ClientId }}
ga_session_id = {{ sessionid }}
ga_session_number = {{ sessioncount }}
Make sure these Transformations are added to the GA4 Tag of the Server container.

Ensure that the “purchase” event is excluded from the GA4 trigger. We do this because the Purchase events will be sent via the Webhooks from now on; otherwise, you will get duplicate data.

To create the Data client, we use the Stape Data client. You can download it here: https://github.com/stape-io/data-client

Go to templates in sGTM -> Click on new -> Import Data Client -> and click on “Save.”

Create the Data client by going to Tags -> Click on new -> Select type Data Client Accepted Path Settings -> Add Path -> Add the endpoint like “order_created.”

Add the following Event Data variables for the Purchase webhooks data:
ecommerce.value

ecommerce.currency

ecommerce.transaction_id

ecommerce.items

ecommerce.tax

ecommerce.shipping

ecommerce.coupon

marketing_data.session_id

marketing_data.session_count

marketing_data.user_id

timestamp

page_location (depends on your CMS)

Then add these variables as parameters in the Purchase Tag.

Create the Purchase Tag and make sure to add the following parameters to it as a purchase tag.
value = {{ ecommerce.value }}
currency = {{ ecommerce.currency }}
transaction_id = {{ ecommerce.transaction_id }}
items = {{ ecommerce.items }}
tax = {{ ecommerce.tax }}
shipping = {{ ecommerce.shipping }}
coupon = {{ ecommerce.coupon }}
ga_session_id = {{ marketing_data.session_id }}
ga_session_number = {{ marketing_data.session_count }}
client_id = {{ marketing_data.user_id }}
event_time = {{ timestamp }}
page_location = {{ page_location }}
Engagement_time_msec = 1564
Page_hostname = domain.com
page_title = thank you page title
Note! Make sure to check the variables to see if they are filled in the preview mode and check if they are the correct parameters. For example, if the page_location has a different URL than the actual one, you will need to adjust these variables.

Create a Trigger that fires based on:
Client Name equals Data Client
Event Name equals trytagging_purchase

Proceed with testing by running live orders or placing an order yourself. You can see how to do this test via the following article: Testing Webhooks via sGTM
Follow the steps below to adjust the Google Tag in the web container:
Add DataLayer variables from the “trytagging_user_data” event.
marketing.user_id

marketing.session_count

marketing.session_id

Ensure that the Google Tag is fired via the “trytagging_user_data” event; otherwise, it won’t be possible to retrieve the user data.

The Google Tag should always be fired for all standard eCommerce events. If that doesn’t work, choose to create a Trigger Group.
Add the 3 parameters we created in step 1.

ClientId = {{ marketing.user_id }}
sessionid = {{ marketing.session_id }}
sessioncount = {{ marketing.session_count }}
Follow the steps below to adjust the server container:
Add 3 event data variables.
sessioncount

sessionid

ClientId

Create a Transformation with the type “Augment event.”

client_id = {{ ClientId }}
ga_session_id = {{ sessionid }}
ga_session_number = {{ sessioncount }}
Make sure these Transformations are added to the GA4 Tag of the Server container.

Ensure that the “purchase” event is excluded from the GA4 trigger. We do this because the Purchase events will be sent via the Webhooks from now on; otherwise, you will get duplicate data.

To create the Data client, we use the Stape Data client. You can download it here: https://github.com/stape-io/data-client

Go to templates in sGTM -> Click on new -> Import Data Client -> and click on “Save.”

Create the Data client by going to Tags -> Click on new -> Select type Data Client Accepted Path Settings -> Add Path -> Add the endpoint like “order_created.”

Add the following Event Data variables for the Purchase webhooks data:
ecommerce.value

ecommerce.currency

ecommerce.transaction_id

ecommerce.items

ecommerce.tax

ecommerce.shipping

ecommerce.coupon

marketing_data.session_id

marketing_data.session_count

marketing_data.user_id

timestamp

page_location (depends on your CMS)

Then add these variables as parameters in the Purchase Tag.

Create the Purchase Tag and make sure to add the following parameters to it as a purchase tag.
value = {{ ecommerce.value }}
currency = {{ ecommerce.currency }}
transaction_id = {{ ecommerce.transaction_id }}
items = {{ ecommerce.items }}
tax = {{ ecommerce.tax }}
shipping = {{ ecommerce.shipping }}
coupon = {{ ecommerce.coupon }}
ga_session_id = {{ marketing_data.session_id }}
ga_session_number = {{ marketing_data.session_count }}
client_id = {{ marketing_data.user_id }}
event_time = {{ timestamp }}
page_location = {{ page_location }}
Engagement_time_msec = 1564
Page_hostname = domain.com
page_title = thank you page title
Note! Make sure to check the variables to see if they are filled in the preview mode and check if they are the correct parameters. For example, if the page_location has a different URL than the actual one, you will need to adjust these variables.

Create a Trigger that fires based on:
Client Name equals Data Client
Event Name equals trytagging_purchase

Proceed with testing by running live orders or placing an order yourself. You can see how to do this test via the following article: Testing Webhooks via sGTM
Updated on: 16/08/2024
Thank you!