[WooCommerce & Wordpress] Setting up Purchase Webhooks
Note: To get the webhooks working correctly, it’s important to 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 triggered by the “trytagging_user_data” event; otherwise, it is not possible to retrieve the user data.

The Google Tag should always be triggered for all standard eCommerce events. If this is not possible, choose to create a Trigger group.
Add the 3 parameters created in step 1.

ClientId = {{ marketing.user_id }}
sessionid = {{ marketing.session_id }}
sessioncount = {{ marketing.session_count }}
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 }}
Now ensure that 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 are now sent via Webhooks; otherwise, you will get duplicate data.

For creating 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 Data Client by going to Tags -> Click on new -> Select type Data Client Accepted Path Settings -> Add Path -> Add the endpoint such as “order_created”

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 ensure you add the following parameters 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 populated in preview mode and also check if they are the correct parameters. For example, if page_location has a different URL than in reality, you will need to adjust these variables.

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

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 triggered by the “trytagging_user_data” event; otherwise, it is not possible to retrieve the user data.

The Google Tag should always be triggered for all standard eCommerce events. If this is not possible, choose to create a Trigger group.
Add the 3 parameters 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 }}
Now ensure that 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 are now sent via Webhooks; otherwise, you will get duplicate data.

For creating 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 Data Client by going to Tags -> Click on new -> Select type Data Client Accepted Path Settings -> Add Path -> Add the endpoint such as “order_created”

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 ensure you add the following parameters 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 populated in preview mode and also check if they are the correct parameters. For example, if page_location has a different URL than in reality, you will need to adjust these variables.

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

Updated on: 16/08/2024
Thank you!