How To Track # Anchor Tags as URLs

The one-page site has become increasingly popular over the past few years especially among UX developers and designers. The fact that it allows them to host content, forms, images and video all on one page makes it much easier and quicker in terms of design and execution. But it also has its limitations, in its current format, one page sights are not great for SEO unless you've got a well-known brand or an extensive backlinking profile which isn't the case for any sites. But this is a story for another time. Today we'll be tackling another important shortcoming. How one-page site tracking limitations can cause issues and how better to track a one-page site that users anchor URLs.

What are anchor URLs?

One page sites or pages with long-form content usually require navigation as they become quite long especially on mobile devices. This is where fragment URLs come into play. These hashbang URLs rely on creating an anchor URL for a button or navigation link that points to a certain location on the page has become a common practice when dealing with one-page sites and long-form content.

These URLs would normally look something like this https://www.nichemarket.co.za/#services or https://www.nichemarket.co.za/#contact

Why track anchor URLs?

While this is an effective way to execute a one-page site it does have a few tracking shortcomings. Since the user spends all their time on site on one page it's very hard to interpret what they are doing and how well your content and navigation works in driving customers through your conversion funnel since all we have is the behaviour grouped together for one page. What would be ideal is tracking each location on the page as a separate page view. So how do we measure apples with apples? Simple, with Google analytics. Google Analytics does not have a standard way of dealing with this situation and there are has a few ways of tracking fragment URLs. But in the interest of time, I'll focus on the two simplest ways to implement tracking to get the best reporting results.

Option1: Google analytics

To start tracking you will need to edit two parts of your page template namely the head tag and footer tag. Update your current Google Analytics page view script to the following In the head tag add the following script: 

<script type="text/javascript>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXX-X', {'allowAnchor': true});
ga('send', 'pageview', { 'page': location.pathname + location.search + location.hash});
</script>

In the footer tag add the following script:

<script type="text/javascript>
jQuery(document).ready(function () {
jQuery('.menu a').click(function(){
var match = jQuery(this).attr('href').match(/#\S+/);
ga('send', 'pageview', location.pathname + match[0]);
});
});
</script>

By doing this, we’re telling the browser that each time a link within the class of “menu” is clicked, send a notification to Google Analytics with the anchor tag. Once firing correctly URLs like the ones below will be counted as separate pages and treated as such with data being attributed to these separate pages.

1. https://www.nichemarket.co.za/#services
2. https://www.nichemarket.co.za/#contact

To test if your code is firing correctly simply visit the real-time report in your GA account and click overview to see if its one of your top active pages.

Option 2: Google Tag Manager

If you're not really into the updating the code and page template of your CMS or afraid you might do more harm than good an easier and safer option is using Google Tag Manager,  which is my preferred approach.

To start, open up your Google Tag Manager account and create the variable we will need for the tag.

Creating the variable

1. Select variables
2. Click new variable
3. Give it a name - I called mine Page path with hashtag variable
4. Select variable type - custom Javascript
5. Add the following code

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

Creating the trigger

1. Navigate to triggers
2. Select new
3. Give the trigger a name - I called mine Fragment URL trigger
4. Select trigger type History change
5. Select trigger fires on - Some History Changes
6. Set trigger conditions to History Source, equals, popstate

And hit save. Step 2 done, let's move on to the final step!

Creating the tag

1. Create a new tag and supply a name - I called mine Fragment URL Tag
2. Select tag type universal analytics
3. Add your Google analytics tracking ID
4. Select track type page view
5. Click more settings and select fields to set
6. Provide a field name - I called mine Page
7. Select a frield value, whcih would be the variable you created earlier called "Page path with hashtag"
8. Add a trigger to your tag instructing the tag when to fire.
9. Select the trigger you created earlier called - Fragment URL trigger

Click save and test either using GA as I mentioned earlier or the Google Tag Manager browser debug tool.

On the right track

Now that you can track your anchor URLs we hope it helps improve your site and your site's analytics for better data, decision making and refinements. if you have any questions or comments leave a note in the comments below

Contact us

If you want to know more about tracking your site don’t be shy we’re happy to assist. Simply contact us here

Tags: google analytics, How to, SEO, Tools