#GTMTips: Prevent clicks and form submissions from redirecting – News Couple
ANALYTICS

#GTMTips: Prevent clicks and form submissions 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, 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.


X


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 click or 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 click or submit Browser events. This is quite typical especially with forms, but with most link click events this should work just fine.

2. Custom beforeunload script

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 dataLayer. To do this, you need to open the JavaScript console in your browser and copy and paste the following code, pressing enter when done:

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.

Cancel claim before download

3. The page stops automatically at a beforeunload Event

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.

It does not allow you to interact with the preview mode (because that would require unpausing the page), but you can use the JavaScript console, and explore 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 beforeunload.

Event listener breakpoints

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

Pause in debugger

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 dataLayer.

My personal favorite is simply dataslayer, but there are other great extensions that give you more functionality:

  1. Data Layer Inspector +

  2. GTME Error Correction

  3. WASP . Inspector

data layer

summary

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!



Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button