Purchase webhooks for Shopify and WooCommerce
To set up a webhook for the ecommerce purchase event, you must configure all other ecommerce events and tags in the web container similar to setting up Google Analytics server-side tracking. The only change required is in the Analytics Configuration Tag (Google Tag) inside the web container.
Follow the steps below for the Google Tag Manager Web Container setup:
Create DataLayer variables from our DataLayer Event "trytagging_user_data" as shown in the image below:
marketing.user_id
marketing.session_count
marketing.session_id
Ensure that the Google Analytics Configuration Tag (Google Tag) fires with the Custom event "trytagging_user_data" and not with the "All Pages" Trigger.
Make sure the Analytics Configuration Tag (Google Tag) fires before all ecommerce and other events.
Add 3 parameters with the variables created in STEP 01:
ClientId = {{ marketing.user_id }}
sessionid = {{ marketing.session_id }}
sessioncount = {{ marketing.session_count }}
Server CONTAINER CHANGES NEED TO MAKE:
In the Server Google Tag Manager, create three event data variables:
sessioncount
sessionid
ClientId
Create Transformations inside the Google Tag Manager server container with Transformation type Augment Event:
client_id = {{ ClientId }}
ga_session_id = {{ sessionid }}
ga_session_number = {{ sessioncount }}
Now attached tag with Google Analytics follow screenshot
NB: Exclude GA4 client purchase event from GA4 trigger in the server container.
Add a new CLIENT to receive the webhook event. Download it from https://github.com/stape-io/data-client
Open Templates tag in the GTM server container -> Click new -> Import Data Client -> Click save and publish the server container.
Set up a Data Client by opening a Client tab -> Click New -> Select type Data Client Accepted Path Settings -> Add Path -> Save.
Create numerous Event Data variables for the purchase webhook event 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)
Create a purchase tag with the following Parameter Name and Value:
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
Create a TRIGGER for the webhook purchase tag that fires on:
Client Name equals Data Client
Event Name equals trytagging_purchase
Test the trigger with the tag of the webhook purchase event and publish all changes.
Follow the steps below for the Google Tag Manager Web Container setup:
STEP 01: Create DataLayer variables
Create DataLayer variables from our DataLayer Event "trytagging_user_data" as shown in the image below:
marketing.user_id
marketing.session_count
marketing.session_id
STEP 02: Setting up Google Tag
Ensure that the Google Analytics Configuration Tag (Google Tag) fires with the Custom event "trytagging_user_data" and not with the "All Pages" Trigger.
Make sure the Analytics Configuration Tag (Google Tag) fires before all ecommerce and other events.
STEP 03: Add parameters
Add 3 parameters with the variables created in STEP 01:
ClientId = {{ marketing.user_id }}
sessionid = {{ marketing.session_id }}
sessioncount = {{ marketing.session_count }}
Server CONTAINER CHANGES NEED TO MAKE:
STEP 04: Add event data variables in server container
In the Server Google Tag Manager, create three event data variables:
sessioncount
sessionid
ClientId
STEP 05: Create Transformations
Create Transformations inside the Google Tag Manager server container with Transformation type Augment Event:
client_id = {{ ClientId }}
ga_session_id = {{ sessionid }}
ga_session_number = {{ sessioncount }}
Now attached tag with Google Analytics follow screenshot
NB: Exclude GA4 client purchase event from GA4 trigger in the server container.
STEP 06: Add Data Client to receive data
Add a new CLIENT to receive the webhook event. Download it from https://github.com/stape-io/data-client
Open Templates tag in the GTM server container -> Click new -> Import Data Client -> Click save and publish the server container.
Set up a Data Client by opening a Client tab -> Click New -> Select type Data Client Accepted Path Settings -> Add Path -> Save.
STEP 07: Add event data variables
Create numerous Event Data variables for the purchase webhook event 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)
STEP 08: Add parameters to the purchase Tag
Create a purchase tag with the following Parameter Name and Value:
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
STEP 09: Create Trigger for Purchase
Create a TRIGGER for the webhook purchase tag that fires on:
Client Name equals Data Client
Event Name equals trytagging_purchase
Test the trigger with the tag of the webhook purchase event and publish all changes.
Updated on: 16/08/2024
Thank you!