How to Debug GTM when Preview Mode Isn’t Working

API Connector Add-On for Google Sheets

Check out my API Connector Add-on to easily connect and pull data from thousands of platforms (e.g. Shopify, Harvest, Mailchimp, ActiveCampaign, VWO, YouTube, etc.) directly into Google Sheets.

This post details several reliable methods for debugging your Google Tag Manager implementation when the GTM debugging console doesn’t work properly, when preview debug data disappears when the page refreshes, or when the GTM preview pane won’t open at all. When you can’t get it to work, sometimes the best (or only) option is to just use a different method altogether. In roughly ascending order of complexity, here are 3 GTM preview mode workarounds:

METHOD 1: USE THE DATASLAYER CHROME PLUGIN

This one is easy. Just click and install the dataslayer Chrome plugin and use it in place of the GTM preview pane. Note you will still need to click the Preview button from within GTM to activate your unpublished tags in the browser.

This works great for sites that force a refresh as you navigate around the site, since, unlike the GTM debugger, dataslayer stores the dataLayer information from the prior pages.  It also will show you all the data layer events and values. Here’s a screenshot of the dataslayer plugin output on popular home rentals site airbnb.com. You can see it contains a full inventory of data layer events and values.

gtm-debug-img1

While dataslayer is a fantastic tool, it doesn’t cover every capability of the GTM debugger. One key drawback is that it only shows values in the data layer, while the GTM debugger also shows the values of any Variables you’ve configured. So if you want to debug Variables, you can use one of the other GTM debugger workarounds:

METHOD 2: CONSOLE LOG YOUR OUTPUT

Say you have some Variables that you’d like to see the output of. One might be the page path, while another is a custom JS variable named {{Lowercase Click Text}} containing custom JS like this:

function () {
    var str = {{Click Text}}.toLowerCase();
    return str;
}

To see what these resolve to, create a custom HTML tag as follows. Enter all the Variables you’d like to validate, line by line:

<script type="text/javascript">
  console.log('Variables');
  console.log({{Lowercase Click Text}});
  console.log({{Page Path}});
</script>

Add an “All Clicks” or “All Pages” trigger and now you can check the dev tools Console to see how these variables get populated. All together it should look like this:
gtm-debug-img4

Enter Preview mode to make your tag active, and open Developer Tools in the console (Ctrl-J or F12). As you trigger your tag, your values will get printed to the console, like this:
gtm-debug-img5

As a variation on the above, instead of console logging the values, you could push them into the data layer instead and use Dataslayer, like this:

<script type="text/javascript" id="example">
 (function() {
  var str =  {{Click Text}}.toLowerCase();
   dataLayer.push({
     'lowerClickText': str
   });
}) ();
</script>

METHOD 3: PUSH YOUR VARIABLE INTO A DUMMY GA TAG

This is a little clunky, but might be useful in some cases. In this method you populate a Google Analytics tag with your Variable, then use a debugging tool like the Google Analytics debugger to view the output.

For example, say you want to use the Built-in Variable “New History Fragment” in your tag, but need to verify that it contains the right value.

gtm-debug-img2

In this case, you can set up a new Google Analytics tag in Google Tag Manager, and set one of the event or custom dimension values to the New History Fragment, like this:

gtm-debug-img3

Now you can click Preview, and switch on the Analytics Debugger to see what value is being set, as an alternative to the GTM preview pane. (If you like, you can enable the Google Analytics Opt-out Add On to prevent the tag from actually sending to GA’s servers.)

CONCLUSION

There are many reasons that Google Tag Manager preview mode might not be working on a website. Ideally you’ll find a solution to fix it, but in practice it may be faster or easier to just try something else. The above methods provide alternatives to debugging Google Tag Manager without requiring the GTM Preview Pane at all.

2 thoughts on “How to Debug GTM when Preview Mode Isn’t Working”

Leave a Comment