#GTMTips: Prevent Clicks and Form Submits From Redirecting

Google Tag Manager offers us some nice built-in triggers so that we can automatically listen for specific user interactions on the website, reacting to them however we wish, though typically it would be to fire a tag. The tricky thing especially with the click triggers and form submission tracking is that the page has a nasty habit of redirecting you to the link or form target page before letting you see the respective data in Google Tag Manager’s excellent preview mode.

There are many solutions to this issue, and I want to share some of them in this #GTMTips article.

Tip 89: Prevent click and form redirects from messing with Preview mode use

So, let’s go over some solutions to this popular problem.

The silly ESC key trick

I first want to share you the easiest and also the silliest (and many times not at all effective) workaround. Just try to press the ESC key in your keyboard before the page has time to redirect you. This often halts the process, letting you stay on the current page.

Why is this silly? Because first of all, it’s one of those things you sometimes end up doing 20 times in a row, not getting it right, and then thinking there must be more to life than this.

Also, if the redirect is handled in a custom way not related to the actual browser click or submit events, pressing the ESC key won’t even help.

1. CMD/CTRL + Click

This is typically the easiest way to handle the redirect problem. It’s also very simple.

Instead of just clicking the link or the submit button, simply hold down the CMD key (OS X) or the CTRL key (Windows) and press the left mouse button as you normally would.

This key combination automatically opens a new tab where the redirect is handled. Thus, the old tab is left on the page where the click happened, allowing you to inspect the Preview mode result without interruption.

This won’t work, again, if the redirect is handled with custom code not related to the actual click or submit browser events. This is quite typical especially with forms, but with most link click events this should work pretty nicely.

2. Custom beforeunload script

This solution should work with all redirects regardless of how they’re implemented. The trick is to add an event listener to the beforeunload browser, opening a prompt that asks if you really want to leave the current page. You can then press “Cancel” (or equivalent) to stay on the current page to see what the browser event wrote into dataLayer. To do this, you need to open the JavaScript console in the browser and copy-paste the following code, pressing enter when done:

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
  e.returnValue = '';
});

Now when submitting the form or clicking a link, a prompt should pop up and you can press Cancel to see the Preview mode output.

3. Automatically pause page upon a beforeunload event

Using Google Chrome’s amazing DevTools, you can actually have the page pause in the debugger when a beforeunload event is dispatched.

It doesn’t let you interact with Preview mode (because that would require the page to un-pause), but you can use the JavaScript console, exploring the dataLayer object there.

To do it, you need to open DevTools, select the Sources tab, scroll down the Event Listener Breakpoints, expand Load, and check the box next to beforeunload.

Once you’ve done this, when you try to submit a form or click a link, the page will pause with a grey overlay, and you can then interact with the JavaScript console:

It’s not as nice as the previous tip, because you can’t interact with Preview mode.

Bonus tip: use a browser extension

Personally, I prefer using a browser extension to keep a record of what’s stored in dataLayer. No, it’s not the same as using Preview mode, but it does let me access all the information that was pushed into dataLayer.

My personal favorite is dataslayer simply out of habit, but there are other really nice extensions out there that give you even more functionality:

1. Data Layer Inspector+

2. GTM Debug

3. WASP.inspector

Summary

Do you have other tips to add to the list?

As I wrote above, my personal preference is using a browser extension, because they usually come packed with other goodies as well. However, GTM’s Preview mode is not something to ignore, so if you really want to preserve its usefulness on the current page, then leveraging the beforeunload event might be the way to go (if the click or ESC tricks don’t work).

I hope that some day GTM introduces persistence to the Preview mode data, storing history to browser storage so that you could see the full content of Preview mode visited on previous pages, too!