Testing webhooks and live preview mode via your sGTM
When you're testing events in the web container using the preview mode, you can easily see the events being triggered and where they are being sent in the server container preview. However, this process is a bit different for webhook events. Webhooks are handled in the backend of your system, like your CMS, and are sent directly to the server. This means you don’t get to see the same real-time event flow as you do with standard tags in the preview mode.
In this document, we'll walk through how to test webhook events and track their flow in the server container, using the live preview mode in sGTM.
Let’s get started 🚀
To begin testing webhooks through the server-side Google Tag Manager (sGTM), you first need to enable the preview header in Trytagging. This setting allows you to view the events in real-time as they flow through the system. The preview mode lets you track what is being sent to your server container, ensuring that the events are accurately captured before going live. By activating the preview header, you’re essentially setting up a safe testing environment where you can monitor and verify the data flow without affecting your production environment.
Once the preview header is enabled, the next step is to test the setup with a test purchase. This involves simulating a purchase on your website to ensure the server is correctly tracking events like 'purchase', or 'add_to_cart'.
You can either complete a purchase yourself or wait for a real visitor to trigger the events.
When you enable the GTM preview header in Trytagging, it requires the ‘x-gtm-server-preview’ HTTP header to help the server recognize and process requests in the preview environment. This header links your test data to the GTM container in preview mode. By including it in your HTTP requests, you can test and verify how tags, triggers, and events behave in a safe, non-live setting, ensuring the data flows correctly during testing.
Once you are done testing, make sure to deactivate the Preview Header setting within Trytagging. Don’t forget to save!
In this document, we'll walk through how to test webhook events and track their flow in the server container, using the live preview mode in sGTM.
Let’s get started 🚀
Activate preview header in Trytagging
To begin testing webhooks through the server-side Google Tag Manager (sGTM), you first need to enable the preview header in Trytagging. This setting allows you to view the events in real-time as they flow through the system. The preview mode lets you track what is being sent to your server container, ensuring that the events are accurately captured before going live. By activating the preview header, you’re essentially setting up a safe testing environment where you can monitor and verify the data flow without affecting your production environment.
Testing Your Setup with a Test Purchase
Once the preview header is enabled, the next step is to test the setup with a test purchase. This involves simulating a purchase on your website to ensure the server is correctly tracking events like 'purchase', or 'add_to_cart'.
You can either complete a purchase yourself or wait for a real visitor to trigger the events.
Find ‘x-gtm-server-preview’ HTTP header
When you enable the GTM preview header in Trytagging, it requires the ‘x-gtm-server-preview’ HTTP header to help the server recognize and process requests in the preview environment. This header links your test data to the GTM container in preview mode. By including it in your HTTP requests, you can test and verify how tags, triggers, and events behave in a safe, non-live setting, ensuring the data flows correctly during testing.
Once you are done testing, make sure to deactivate the Preview Header setting within Trytagging. Don’t forget to save!
Updated on: 08/01/2025
Thank you!