Ah, fragment URLs – you know these URLs with a hashtag (such as www.example.com/categoryA.html#filter1=abc&page=2), that can’t be tracked with Google Analytics…

Indeed Google Aanalytics strips out everything after the hashtag. Yet seeing what’s after the hashtag can be useful to know what are the most popular filtering options for example or to check if your visitors go beyond the first page of your product listing.

With Google Tag Manager, tracking these URLs as virtual pageviews becomes relatively easy. No need to be a developer or adding any codes on your web pages.

Here is how to do it.

 

How to Track Fragment URLs in Universal Analytics with Google Tag Manager

 

1. Create a Universal Analytics tag for Virtual Pageviews with a hashtag

This tag is different from your existing Universal Analytics Page View tag.

In the field for Document Path, click on the brick to insert the new {{hashtag URL}} macro that you create in step 2.

 

2. Create the {{hashtag URL}} Custom JavaScript macro with the function below:

function() {
var newURL = window.location.pathname + window.location.search + window.location.hash;
return newURL;
}

 

3. Create the firing rules for the UA Virtual Pageview tag

You want to fire the virtual pageview tag when:

• The URL changes in the browser without the page is loaded again (history change event rule)
• Or when the user lands directly on a hashtag URL (fragment URL is present on the page load).

The first “History change event” firing rule is as follows:

The rule calls the History Listener tag: {{event}} equals gtm.historyChange (see https://support.google.com/tagmanager/answer/3415369?hl=en#HistoryListener).

The second “Fragment URL loaded” firing rule is like below:

For this rule, you’ll need to create the {{fragment url}} macro as below:

 

4. Save your UA Virtual Pageview tag

 

5. Create the History Listener tag

 

6. Add the “Fragment URL loaded” rule as a blocking rule in your “standard” UA pageview tag

Because you don’t want to double track the hashtag URL on the page load.

 

7. Preview & Debug your container version

Check that your Virtual Pageview tag for hashtag URLs fires when a fragment URL is loaded (tag fired on GTM Page Load event) AND also when you navigate to another hastag URL (tag fired on gtm.hisotryChange event)

 

8. Visit your site and check your Real-Time Content report in Google Analytics

Hooray, it works!

 

9. Create your new Google Tag Manager container version, name it, publish it, and get you a well deserved cup of coffee, tea or whatever beverage you most prefer 🙂

 

Story based on:

• http://www.simoahava.com/analytics/google-tag-manager-history-listener/
• http://www.lunametrics.com/blog/2014/01/14/cheat-and-win-google-tag-manager/

 

Let’s throw some ideas around so we can all improve our data. Send us a message or give us a call at +64 9 9201740.