Google Tag Manager offers us some nice built-in triggers so that we can automatically listen for specific user interactions on the website, and respond to them as we wish, although it is usually a tag launch. The tricky thing especially with click triggers and form submission tracking is that the page has a bad habit of redirecting you to the form’s target page or link before letting you see the data in question in Google Tag Manager’s excellent preview mode.
There are many solutions to this problem, and I want to share some of them in this article #GTMTips.
Simmer . Newsletter
Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!
Tip 89: Prevent clicking and forwarding the form from messing with preview mode
So, let’s go over some solutions to this common problem.
Ridiculous ESC key trick
First I want to share with you the easiest and smartest (and often not very effective) solution. Just try to press Exit A key on your keyboard before the page has time to redirect you. This often causes the process to stop, allowing you to stay on the current page.
Why is this ridiculous? Because first of all, it’s one of those things that you sometimes end up doing 20 times in a row, not doing it right, and then thinking there must be more to life than this.
Also, if the redirect is handled in a custom way that is not related to the actual browser
submit Events, pressing the ESC key won’t even help.
1. CMD / CTRL + CLICK
This is the easiest way to deal with the redirection issue. It’s also very simple.
Instead of just clicking the link or the submit button, hold down the CMD key (OS X) or CTRL key (Windows) and hold down the left mouse button as you normally would.
This key combination automatically opens a new tab where the redirect is processed. Thus, the old tab is left on the page where the click occurred, allowing you to check the result of the preview mode without interruption.
This won’t work, again, if the redirect is handled with a custom token that isn’t actually associated with the actual
submit Browser events. This is quite typical especially with forms, but with most link click events this should work just fine.
This solution should work for all redirects regardless of how they are implemented. The trick is to add the event listener to
beforeunload Browser, opens a prompt asking 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 has written
window.addEventListener('beforeunload', function(e) e.preventDefault(); e.returnValue = ''; );
Now when you submit the form or click on a link, a prompt should pop up and you can press cancel to see the preview mode output.
3. The page stops automatically at a
With the amazing DevTools from Google Chrome, you can actually pause the page in the debugger when a file
beforeunload The event has been sent.
dataLayer object there.
To do this, you need to open DevTools, select File Resources Tab, scroll down in File Event listener breakpoints, expanded Pregnancy, and check the box next to
It’s not as pretty as the previous tip, because you can’t interact with the preview mode.
Bonus tip: Use a browser extension
Personally, I prefer to use a browser extension to keep a record of what is stored in it
dataLayer. No, it is different from using the preview mode, but it allows me to access all the information that has been paid
My personal favorite is simply dataslayer, but there are other great extensions that give you more functionality:
Data Layer Inspector +
GTME Error Correction
WASP . Inspector
Do you have other tips to add to the list?
As I wrote above, my personal preference is to use the browser extension, as they usually come packed with other goodies too. However, GTM preview mode isn’t something to ignore, so if you really want to keep its usefulness on the current page, take advantage of
beforeunload The event might be the way to go (if the click or ESC tricks don’t work).
I hope someday GTM will offer a persistence of preview mode data, and store history in browser storage so you can see the full preview mode content visited on previous pages as well!