#GTMTips: Preview Requests In Server-side Google Tag Manager

Server-side Google Tag Manager has outstanding preview modewhich gives inspect incoming requests, Monitor event data objects, Show console messagesWhen identify outgoing requestsamong others.

To enable this preview mode for the web, preview then all requests sent from the container same browser instance It will automatically appear in the preview mode window.

But what if you want to send the request from another browser? Or from a non-browser data source? Or what if you want to play? XHR Also fetch Even without access to cookie credentials?

X

shimmer newsletter

Subscribe to our Simmer newsletter to receive the latest news and content from Simo Ahava right in your email inbox!

First, in the “normal” preview mode of server-side Google Tag Manager, cookie Set to server-side domain. If a request to the server contains these cookies, the request will be displayed in preview mode.

However, there are many cases where you can’t include these cookies, or your browser doesn’t support the mechanisms required for this method of dispatch (such as third-party cookies), or you want to use a different browser (instance). Cookies not included.

In this case, there is a special option in the preview mode action menu, Submit a request manually.

Clicking this will bring up an overlay that looks like the main image in this article.This overlay tells you to add a specific HTTP header to the request you want to see in preview mode of server-side GTM.

Overlay even gives you curl A command you can run in the terminal of your machine ( curl installed). For example, this looks like this in my macOS Terminal app:

you can do the same 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 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
});

non-standard headers (X-Gtm-Server-preview), for both XHR When fetch To work properly, you have to handle preflight request First by a server-side container.

Also note the header value not fixed. open in browser[プレビュー]As long as you send hits to the tab, the value will be the same for all other open tabs in preview mode. However, changing the browser instance where preview mode resides (for example, by sharing preview mode) will change the value of the header.

Similarly, Delete preview cookies Or preview another workspace and the value will change again.

In other words, it cannot be embedded in an app. Whenever the header value changes in the preview window itself, the value should be updated.

We hope you find these tips helpful as you set up your server-side Google Tag Manager workflow. Using a preview cookie is certainly the easiest way to view a request in preview mode, but cookies are not a viable option in all scenarios supported by server-side Google Tag Manager.