August 16, 2021
See Incoming Requests in Server GTM Preview Mode Without Cookies
When you enable preview mode in server-side GTM, 3 first-party cookies are stored in your browser: gtm_preview, gtm_auth, gtm_debug. Thanks to these cookies, you can see incoming HTTP requests (coming from your website) in the SGTM preview if your website and your SGTM setup are using the same main domain (e.g. www.mywebsite.com and sgtm.mywebsite.com)
That is possible because those first-party cookies of the preview mode are also sent with every HTTP request from your website to your server-side endpoint.
But what if a request is sent to your server-side GTM setup from somewhere else (not from the frontend of your website)? Those debug mode cookies will not be present, hence the request will not be visible in the preview mode. Your GTM server will still receive them but they will not be displayed in the debug mode, hence the entire testing process will be very complicated.
In this guide, I will show how to see incoming requests in the SGTM preview mode (when browser cookies are not an option).
Server-side GTM is a tough topic
If you have never worked with SGTM before, this blog post might look quite confusing (because web GTM and server GTM are quite different beasts). If you want to get started with it, take a look at my intermediate/advanced GTM course where I have two modules dedicated to this topic.
Send requests manually with GTM HTTP header
Requests in server-side GTM preview mode can be displayed if they meet one of two conditions:
- Cookie header of the incoming request contains the information those three debug cookies
- Or the HTTP request contains another header X-Gtm-Server-Preview HTTP header with a particular value
Where you can get that expected X-Gtm-Server-Preview value? Enable server-side GTM’s preview and debug mode by clicking the Preview button in the GTM interface.
Then click 3 dots in the top-right corner of the preview mode and click Send requests manually.
You will see a popup with further instructions.
What’s next? You should give the HTTP header and its value to your developer (who is responsible for sending HTTP requests to your server-side endpoint). Ask him/her to include this in all HTTP requests that are sent from his/her system to your SGTM. Once the incoming requests contain X-Gtm-Server-Preview, you should start seeing them here:
Note: just_testing was, well, just my test. You should see something different in your server-side GTM preview mode.
Warning: this header’s value is not permanent
The value of the X-Gtm-Server-Preview header is an encoded concatenated string of the gtm debug cookies (that I mentioned at the beginning of this article).
If I had enabled the SGTM preview mode and the values of those cookies had been:
- gtm_debug = GTM-W5AX59Q=env-3
- gtm_preview = GTM-W5AX59Q=NltwFKNe4KoxSoxY8z86oA
- gtm_auth = GTM-W5AX59Q=17b4dc0fd08aa00958beA
…then the value of the X-Gtm-Server-Preview header would be env-3|NltwFKNe4KoxSoxY8z86oA|17b4dc0fd08aa00958beA (but encoded with base64).
The thing here is that those SGTM debug cookies have a short life span (expire in 5 minutes after you close the SGTM preview mode). So if you need to debug the setup after several days, you will have to get a new X-Gtm-Server-Preview value from the Preview mode and ask your developer to update it in the HTTP requests.
As a proof of concept, I have played around with Shopify webhooks and configured them in a way that I can see them in the SGTM preview mode. You can learn more here.
Remember, requests in SGTM preview mode are displayed only if they contain GTM preview mode’s cookies or if they contain the X-Gtm-Server-Preview header with certain values. In either way, their values will change over time so you have to be prepared to constantly change them in your webhook forwarding setup.