Track Browsing Paths with GTM and GA – The Quick & Dirty Solution

The User Flow in Google Analytics is a great visualization tool for checking the most used browsing paths in your website. However it has it’s flaws – it’s sometimes hard to read and the export options are not good for data analyzes in 3rd party tools (actually the export is available just in PDF).

So… how to start collecting this data in a way that it’s easy to read and export? Just follow the steps below:

Create a 1st party cookie variable

Name it Path Cookie and set it’s value to browsingPath:

Create HTML tag for the cookie

This tag stores the browsing path of the visitor until he/she leaves the website.

Basically this script checks if the user has a cookie with the name “browsingPath”, if it doesn’t – it creates a new cookie with 30 min expiration time. If you have a custom session time for your website – tweak the expiration time to be the same as your session settings.

If there is already a cookie – it read it’s value (the current page/path) and adds the current page to it (using the build-in {{Page Path}} variable).

Create the trigger for the Browsing Path event.

This is where the things got a little weird – you need to create another HTML tag to push event when the user leaves the current page, using the onbeforeunload event:

Creating Browsing Paths Cookie

JavaScript

1

2

3

4

5

6

<script>

window.onbeforeunload=function(){

dataLayer.push({"event":"sendBrowsingPath"});

returntrue;

}

</script>

This simple scripts sends an event when the user leaves a page. It’s not ideal, as it uses a function in HTML tag just for dataLayer.push, but at the moment I can’t think of a better way to do this. If you have any ideas how to improve this – I’ll be happy to read your suggestions!

As the previous tag – use {{All Pages}} as a trigger:

The Actual Event trigger

The trigger you should use for sending the data to Google Analytics should listen for the event sendBrowsingPath and also checks if the Click URL is valid hostname, so it fires only when there is no click to internal page. You don’t want to send the event on every page leave, just when the user leaves your website.

The event tag to send everything in GA

Here is the final event tag that will send the collected data to Google Analytics:

The event tag will sends both event and custom dimension with the cookie value when the user exits the site (working smoothly for both outbound links and tab closing).
The custom dimension should be session based, so it sends just the current session browsing path. Tweak the dimension index according to your GA setup and don’t forget to add the custom field transport:beacon, as it’s used to hook to the onbeforeunload event.

I am sending custom dimension instead of just event because it gives me the option for great custom reports, as CR for the path, comparing path changes after website changes, etc… However it’s entirely optional and if you want – you may use just the event.

Have in mind – this is kinda “quick and dirty” solution, it may have it’s problems and it could be improved further (For example, as Simo Ahava pointed out after reviewing it – it will have problems with the 150 byte restriction in the Custom Dimension field, unintentional page reloads or moving around with browser history).

This tracking is relatively easy for setup even for beginners and it may (or may not) give you great information when used in custom reports.

thanks for sharing this!
I really love the idea, however, I’m having some complications setting this up. The “onbeforeunload” causes a popup window (“Do you really want to leave this site?”) every time I click on a new page.

From what I understand, the trigger is supposed to be limited to only fire when the user leaves the domain (“Click URL does not contain hostname”)

For some reason though, that does not work. Do you have any idea why that is or perhaps a different solution by now?