Digital Marketing News


Tracking fragment URLs in Universal Analytics with Google Tag Manager

Sep 19, 2014

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 Analytics 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 code on your web pages.

Here is how to do it :

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.

 

UA virtual pageview tag for hashtag URLs

UA virtual pageview tag for hashtag URLs
(Click image to enlarge)

2. Create the {{hashtag URL}} Custom JavaSscript 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 loading 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:

 

Firing rule for the UA Virtual Pageviews tag

Firing rule for the UA Virtual Pageviews tag
(Click image to enlarge)

 

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:

 

Fragment URL loaded firing rule

“Fragment URL loaded” firing rule
(Click image to enlarge)

 

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

 

Fragment URL macro

Fragment URL macro
(Click image to enlarge)

 

4. Save your UA Virtual Pageview tag

5. Create the History Listener tag

 

History listener tag to fire on all pages

History listener tag to fire on all pages
(Click image to enlarge)

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 and 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 hashtag URL (tag fired on gtm.hisotryChange event)

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

 

Google Analytics Real-Time Content report

Google Analytics Real-Time Content report
(Click image to enlarge)

Hooray, it works!

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

 

 Story based on: