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:

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