Server-side Google Tag Manager has an excellent Preview mode, which lets you inspect incoming requests, monitor the event data object, view console messages, and identify outgoing requests, among other things.
To enable this Preview mode on the web, you simply need to click the Preview button in the container, after which any requests sent from the same browser instance will be automatically shown in the Preview mode window.
However, what about if you want to send requests from another browser? Or from a non-browser data source? Or what if you want to play with XHR or Fetch without having access to cookie credentials?
X
The Simmer Newsletter
Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava into your email inbox!
First of all, the “regular” Preview mode in server-side Google Tag Manager uses cookies set on the server-side domain. If the request to the server includes these cookies, then the request will show up in Preview mode.
However, there are many cases where you either can’t include these cookies or your browser doesn’t support the necessary mechanisms (e.g. third-party cookies) for this dispatch method, or you want to use a different browser (instance) where those cookies are not included.
For this case, there’s a special option in the Preview mode action menu, called Send requests manually.
When you click this, you’ll see an overlay similar to the one in the main image of this article. This overlay instructs you to add a certain HTTP header to those requests that you want to show up in the server-side GTM’s Preview mode.
The overlay even gives you a curl command that you can run in your machine’s terminal (assuming curl has been installed). For example, this is what it would look like on my macOS terminal app:
You could do the same with XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://sgtm.simoahava.com/g/collect?v=2&en=page_view&tid=G-1234&cid=123.456&dl=https%3A%2F%2Fexample.com%2F');
xhr.setRequestHeader('X-Gtm-Server-Preview', 'ZW52LTI1NXx2RVNkYnBiSFdzTVRTZXBXak80UUhnfDE4MWI0MzYzZjIyN2EyNzQwZWZhZQ==');
xhr.send();
And with fetch:
fetch('https://sgtm.simoahava.com/g/collect?v=2&en=page_view&tid=G-1234&cid=123.456&dl=https%3A%2F%2Fexample.com%2F', {
headers: {
'X-Gtm-Server-Preview': 'ZW52LTI1NXx2RVNkYnBiSFdzTVRTZXBXak80UUhnfDE4MWI0MzYzZjIyN2EyNzQwZWZhZQ=='
}
}).then(response => {
// Do something with the response
});
Just note that since you’re sending HTTP requests with a non-standard header (
X-Gtm-Server-preview), for bothXHRandfetchto work properly, you’d need to handle preflight requests by the server-side container first.
Note also that the value for the header is not fixed. As long as you are sending hits to a Preview tab open in the browser, the value will be the same across any other tab you might open to Preview mode. But if you change the browser instance where the Preview mode is (by sharing the Preview mode, for example), the value of the header will change.
Similarly, if you delete the Preview cookies or preview another workspace, the value will change again.
In other words, it’s not something you could bake into your app – you would need to update the value whenever the header value changes in the Preview window itself.
Hopefully this tip helps you when setting up your server-side Google Tag Manager workflows. Utilizing the Preview cookies is certainly the easiest way to get your requests to show up in Preview mode, but cookies are not a viable option in all scenarios supported by server-side Google Tag Manager.