One great way to take advantage of the Google Tag Manager for web analytics tracking is to take advantage of all the potential custom events that the browser has to offer. One of these events is
beforeunload. Sent in the browser when the user is about to do so evacuation the page. Typically, this means that the user is about to leave the page after clicking a link, or is about to exit the browser by closing the entire tab or window.
We can use this event for many things, but in this article I will show you how to set up a listener and then use it to submit an event to Google Analytics which contains deeper The scroll depth limit that the user has traversed on the page. So if they scroll up to 75% of the document, this event will send that limit to Google Analytics. why? Because sometimes we simply want to know the furthest The user has scrolled to any particular page, instead of everyone The thresholds they crossed on the way there.
Simmer . Newsletter
Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!
Hint 82: Shoot the trigger
First of all, let’s create the event listener for
beforeunload, so that our impatient readers can go ahead and start working on their own solutions around this trigger.
One Importance The thing to note is that if you use a file
beforeunloadListener, you invalidate Back-to-forward cache For some browsers (eg Firefox). This may disrupt the user experience on some websites, so be sure to consult your developers before implementing this, especially on pages with forms.
The tag is simple Custom HTML tag who called all pages Effects. Feel free to use a more restricted player, if you want the listener to be active only on certain pages.
Here are the contents:
<script> window.addEventListener('beforeunload', function() window.dataLayer.push( event: 'beforeunload' ); ); </script>
All this tag does is create the listener. The listener has a callback that pays
beforeunload custom event in
Now if you go into preview mode, by clicking a link away from any page, you should Just look at it before downloading The text appears in the preview mode event list before you are taken away. If you see it, then the listener is working.
The next thing to do is to create a file Custom event trigger With the following settings:
If you add this trigger to a tag, that tag will be activated Just When the user is about to leave the page.
transport In Google Analytics tags
Since the launcher runs at the page dump limit, there is a very real risk that the page will be unloaded before The asynchronous request initiated by the tag (trigger shooting) has time to complete. To allow your requests to be completed in a timely manner, you can use the Beacon API – another great browser feature that is almost essential for web analytics tracking.
Fortunately, if you use Google Analytics tags, you don’t need to build the tag yourself. Universal Analytics Library, analytics.js, it has a special field called
transport, which you can set to the value
beacon In case you want to level up the Beacon API using Google Analytics results.
To add this field, use either the Google Analytics settings variable or override your tag settings. Scroll down to Fields to be set, and add a new field:
With this setting, the tag now uses the Beacon API to send the asynchronous request even if The browser has unloaded the page. The cool thing about this app is that if the browser doesn’t support this API, the tag will automatically return to either GET or POST, just like you normally would.
One “side effect” of using the Beacon API is that the request automatically turns into a POST request. This means that if you use the “Network” tab of your browser’s developer tools, the parameters of the request will not be specified as well as with a GET request. For this reason, I highly recommend you to use the Google Analytics Debugger to analyze orders.
Send deeper scroll depth threshold
To send deeper (or farther) the user has scrolled on any given page, you need the following components.
Scroll Depth trigger with configuring thresholds
Note that you don’t do Need to add this operator to any tag. Its sole purpose is to push the threshold values to
The Google Analytics tag that is active on
Tag you need to shoot the
beforeunload Trigger, needs to send a value Threshold scroll depth Built-in variant of Google Analytics. Don’t forget to add a file
transport There is room too!
Again, feel free to add trigger exceptions or modify the Custom Event trigger to restrict activation of this flag to only relevant pages. It makes no sense to collect scroll data on pages where this information is not relevant.
Once you’ve created your custom listener HTML tag, custom event trigger, Scroll Depth trigger, and Google Analytics tag, you’re good to go. When the user is about to leave any page, a file
beforeunload The event triggers your Google Analytics tag. This brand captures the latest value from Threshold scroll depth and sends it with the event to GA.
So if the user scrolls all the way up to 70% of the page (if you set it as a vertical threshold in the launcher settings), the value
70 It will be sent with the tag.
This way you will keep your results quota (remember there are 500 hits per session in Google Analytics), and you will avoid sending a lot of noisy information about average limits to Google Analytics.
The scroll depth trick was just a shadow. The
beforeunload The listener can be used for a million different things, such as abandoning the form and tracking interaction with the content.
Do you have other cool uses for
beforeunload the listener? Let us know in the comments!