With Intelligent Tracking Prevention, the Safari browser is on a crusade against cross-site tracking. One of the most obvious and long-standing ways to battle cross-site tracking has been to block third-party cookies in the web browser, and this is exactly what Safari does by default.
However, Google Tag Manager’s Preview mode relies on a third-party cookies, so that it can serve you the draft version of the container while serving the regular, live container to your site visitors.
Thus, to be able to use the Preview mode in the Safari browser, you will need to relax the cross-site tracking blockers in the browser, or just not use Safari for debugging the container.
The Simmer Newsletter
Follow this link to subscribe to the Simmer Newsletter! Stay up-to-date with the latest content from Simo Ahava and the Simmer online course platform.
Tip 102: Enable Preview mode in the Safari browser
When you enter Preview mode in the Google Tag Manager UI, GTM actually sends you to the googletagmanager.com domain, where a first-party cookie is set in your browser with an authentication token and details about the container version to be previewed. Then, when you visit your site and fetch the gtm.js container from the same domain, the cookie originally set on googletagmanager.com is now used in a third-party context to serve you the correct, draft container file.
If your browser is blocking third-party cookies, the request for gtm.js will not have access to the cookies written on googletagmanager.com, and thus you get served with the live container instead.
In Safari, to enable third-party cookies and thus enable GTM’s preview mode, you need to do the following steps.
1. Enable cross-site tracking in Safari
The new “Cross-site tracking” toggle in Safari’s Privacy settings is essentially the ITP switch. By unchecking it, you are giving the browser authorization to read, write, and make use of cookies in the third-party context. If this sounds unappealing, you will need to use some other browser for previewing GTM’s containers.
To find this switch, click the Safari menu, choose Preferences, expand the Privacy tab, and uncheck the Prevent cross-site tracking checkbox.
2. Restart the browser
This is important - you need to restart the browser for the change to come into effect.
3. Go to Preview mode in Google Tag Manager
Now, browser to your container in the GTM UI, and click the PREVIEW button. Contrary to how the other browsers work, you will be taken to a page on the googletagmanager.com domain, where you will now explicitly need to click that START PREVIEW button.
If you’re wondering why that button is there, it’s a good question. Most likely it has to do with the early versions of ITP (1.x), where you could use third-party cookies as long as there was a meaningful interaction on the domain where the cookies are written. Clicking a button is interpreted as a meaningful interaction.
However, ITP 2.x, this is no longer enough, so the button doesn’t really do anything if you have cross-site tracking prevention toggled on.
If everything worked, you should see the familiar orange preview bar in your GTM UI. If you don’t see it, make sure you actually restarted the browser.
4. Go to the website and clear the cache
Finally, you can browse to the website itself. If you don’t see the Preview panel, it’s most likely because your site is caching the non-preview version, and you need to clear the cache. To clear the cache, hit CMD + OPT + E, or choose the “Empty Caches” option in the browser’s Develop menu. If you don’t see a Develop menu, follow this link for instructions.
After clearing the cache, simply reload the page, and you should see your debug panel.
Summary
Just a quick tip this time, in response to a number of queries around this topic every since ITP really started having an impact on browsing behavior.
Let me know in the comments if you still can’t get it to work, but you should be fine by dutifully following the steps outlined above.