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:

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

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

The code you should use is:

Use {{All Pages}} as a trigger.

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

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:

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

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.

With this step your new tracking is ready. The result… something like this:
/ > /page1/ > /page2/ > /page1/ > /page3/

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.