One of the great ways to leverage Google Tag Manager<\/a> in your web analytics tracking is to make use of all the possible custom events<\/a> that the browser has to offer. One such event is We can use this event for many things, but in this article I\u2019ll show you how to setup the listener, and then use it to send an event to Google Analytics<\/a> which contains the deepest<\/strong> scroll depth threshold<\/a> the user crossed on the page. So if they scrolled all the way to 75% of the document, this event would send that threshold to Google Analytics. Why? Because sometimes we simply want to know the farthest<\/strong> the user scrolled to any given page, rather than all<\/strong> the thresholds they crossed on the way there.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n First of all, let\u2019s create the event listener for One important<\/strong> thing to note is that if you use a The tag is a simple Custom HTML tag<\/strong> that fires on the All Pages<\/strong> trigger. Feel free to use a more restrictive trigger, if you want the listener to be active only on specific pages.<\/p>\n Here are the contents:<\/p>\n All this tag does is create the listener. The listener has a callback which pushes the Now if you go to Preview mode, by clicking a link away from any page, you should just<\/em> see the beforeunload<\/strong> text appear in the Preview mode event list before you are whisked away. If you see it, it means the listener works.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Next thing to do is to create a Custom Event trigger<\/strong> with the following settings:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n If you add this trigger to a tag, that tag will fire just<\/em> when the user is about to leave the page.<\/p>\n Because the trigger fires on the threshold of unloading the page, there is a very real risk that the page is unloaded before<\/strong> the asynchronous request initiated by the tag (firing on the trigger) has time to complete. To let your requests complete in time, you can use the Beacon API<\/a> – another cool browser feature that\u2019s almost essential to web analytics tracking.<\/p>\n Thankfully, if you are using Google Analytics tags, you don\u2019t need to build the beacon utility yourself. The Universal Analytics library, analytics.js<\/strong>, has a special field called To add this field, either use a Google Analytics Settings variable<\/a>, or override the settings of your tag. Scroll down to Fields to set<\/strong>, and add a new field:<\/p>\n Field name<\/strong>: With this setting, the tag now utilizes the Beacon API to dispatch the asynchronous request even if<\/em> the browser has unloaded the page. The cool thing about this implementation is that if the browser doesn\u2019t support this API, the tag automatically falls back to either GET or POST, just like it would normally do.<\/p>\n One \u201cside effect\u201d of using the Beacon API is that the request is automatically turned into a POST request. This means that if you\u2019re using the Network tab of your browser\u2019s developer tools, the request parameters won\u2019t be outlined as nicely as they would with a GET request. For this reason, I strongly recommend you use the Google Analytics Debugger<\/a> to analyze the requests.<\/p>\n To send the deepest (or farthest) the user has scrolled on any given page, you need the following components.<\/p>\n A Scroll Depth trigger with the thresholds configured<\/strong><\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Note that you do not<\/strong> need to add this trigger to any tag. Its sole purpose is to push the threshold values into A Google Analytics tag which fires on the The tag needs to fire on the <\/p>\n <\/a><\/p>\n<\/div>\n Again, feel free to add trigger exceptions or to modify the Custom Event trigger to restrict this tag to fire only on relevant pages. It doesn\u2019t make sense to collect scrolling data on pages where that information is not relevant.<\/p>\n Once you\u2019ve created the Custom HTML tag for the listener, the Custom Event trigger, the Scroll Depth trigger, and the Google Analytics tag, you\u2019re good to go. When the user is about to leave any page, the So if the user scrolled all the way down to 70% of the page (if you\u2019ve set it up as a vertical threshold in the trigger settings), the value This way you\u2019ll preserve your hit quota (remember there\u2019s a 500 hits per session<\/a> limit in Google Analytics), and you\u2019ll avoid sending a lot of noisy information about the intermediate thresholds to Google Analytics.<\/p>\n The scroll depth trick was just a tangent, though. The Do you have other cool uses for the One of the great ways to leverage Google Tag Manager in your web analytics tracking is to make use of all the possible custom events that the browser has to offer. One such event is beforeunload. It\u2019s dispatched in the browser when the user is about to unload the page. This means, typically, that the […]<\/p>\n","protected":false},"author":1,"featured_media":105025,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[1074,14492,18247,4347,22089,21854],"dealstore":[],"offerexpiration":[],"class_list":["post-105023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-fire","tag-gtmtips","tag-leave","tag-page","tag-trigger","tag-user"],"yoast_head":"\nbeforeunload<\/code><\/a>. It\u2019s dispatched in the browser when the user is about to unload<\/em> the page. This means, typically, that the user is about to leave the page after clicking a link, or they are about to exit the browser by either closing the tab or the entire window.<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nTip 82: Fire a trigger on the
beforeunload<\/code> event<\/h2>\n![\"Beforeunload](\"https:\/\/www.simoahava.com\/images\/2018\/07\/fire-trigger-beforeunload.jpg#ZgotmplZ\")
<\/p>\nbeforeunload<\/code>, so that the impatient readers can go right ahead and start working on their own solutions around this trigger.<\/p>\n\n
beforeunload<\/code> listener, you invalidate the Back-Forward Cache<\/strong> of some browsers (e.g. Firefox). On some websites this might break user experience, so be sure to consult with your developers before implementing this, particularly on pages with forms.<\/p>\n<\/blockquote>\nscript>\n window<\/span>.addEventListener('beforeunload'<\/span>, function<\/span>() {\n window<\/span>.dataLayer.push({\n\t event: 'beforeunload'<\/span>\n\t});\n });\nscript<\/span>><\/code><\/pre>\n<\/div>\nbeforeunload<\/code> custom event into dataLayer<\/code>.<\/p>\n![\"beforeunload](\"https:\/\/www.simoahava.com\/images\/2018\/07\/beforeunload-event-preview.jpg#ZgotmplZ\")
<\/p>\n![\"beforeunload](\"https:\/\/www.simoahava.com\/images\/2018\/07\/custom-event-trigger.jpg#ZgotmplZ\")
<\/p>\nSet the
transport<\/code> field in Google Analytics tags<\/h3>\ntransport<\/code><\/a>, which you can set to the value beacon<\/code> in case you want to leverate the Beacon API with your Google Analytics hits.<\/p>\ntransport<\/code>
Value<\/strong>: beacon<\/code><\/p>\nSend the deepest Scroll Depth threshold<\/h3>\n
![\"Scroll](\"https:\/\/www.simoahava.com\/images\/2018\/07\/scroll-depth-trigger.jpg#ZgotmplZ\")
<\/p>\ndataLayer<\/code>.<\/p>\nbeforeunload<\/code> trigger<\/strong><\/p>\nbeforeunload<\/code> trigger, and it needs to send the value of the {{Scroll Depth Threshold}}<\/strong> Built-in variable<\/a> to Google Analytics. Don\u2019t forget to add the transport<\/code> field there, too!<\/p>\n![\"Scroll](\"https:\/\/www.simoahava.com\/images\/2018\/07\/scroll-depth-tag.jpg#ZgotmplZ\")
<\/p>\nSummary<\/h2>\n
beforeunload<\/code> event triggers your Google Analytics tag. This tag grabs the latest value from {{Scroll Depth Threshold}}<\/strong> and sends it with the event to GA.<\/p>\n70<\/code> would get sent with the tag.<\/p>\nbeforeunload<\/code> listener can be used for a million different things, such as form abandonment<\/a> and content engagement<\/a> tracking.<\/p>\nbeforeunload<\/code> listener? Let us know in the comments!<\/p>\n<\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"