Tracking Anchor Tag / Hashtag # Pageviews in Google Analytics using Google Tag Manager

I've come across this problem a lot with some existing clients.  When a website has hashtags in the URL, Google Analytics will not track anything past the hashtag by default. 

For example:

http://www.trackify.co.nz/#/test 

would track in GA as a home pageview. 

This will cause problems with your analytics and is highly likely to result in inaccurate data.

To track past the hashtag would normally require a code change by developers. However, with more and more sites using Google Tag Manager, there is another solution.

Step 1

Log into GTM and under the 'Variables' section of Google Tag Manager make sure you’ve checked the New History Fragment and History Source Built-In Variables.

Step 2

Create a new javascript custom variable called "page path with hashtag" and use the following code:

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

Save the new variable.

Step 3

Choose History Change as the Event, and set the following condition in the Fire On section of the Trigger where History Source equals hashchange:

 

Save your new trigger.

Step 4

Open your Universal Page tracking tag and scroll down to 'fields to set'. 

Now add a new field called "page" with the value {{page path with hashtag}}.

 

Step 5

Save the tag, create a new version and publish your container (once tested).

You should start to see the # pageviews coming through in the 'real time' section of Google Analytics.