LOG IN OR SIGN UP
Log in to your account
Sign up

How To Track # Anchor Tags as URLs

13 March 2017 | 0 comments | Posted by Che Kohler in nichemarket Advice

Tracking Hashbang & Anchor 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 field value, which 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 would like us to help with your site's tracking, Google Analytics or want to know more about digital marketing for your business, then don’t be shy we’ re happy to assist. Simply contact us

Are you looking to promote your business?

South African Business owners can create your free business listing on nichemarket. The more information you provide about your business, the easier it will be for your customers to find you online. Registering with nichemarket is easy; all you will need to do is head over to our sign up form and follow the instructions.

If you require a more detailed guide on how to create your profile or your listing, then we highly recommend you check out the following articles. 

Recommended reading

If you enjoyed this post and have a little extra time to dive deeper down the rabbit hole, why not check out the following posts on Google Tag Manager.

Tags: google analytics, How to, SEO, Tools

Previous: {{ previousBlog.sTitle }}

Posted {{ previousBlog.dtDatePosting }}

Next: {{ nextBlog.sTitle }}

Posted {{ nextBlog.dtDatePosting }}

You might also like

How to increase your conversion rate

10 Ways To Improve Your Conversion Rate

10 September 2017

Posted by Che Kohler in nichemarket Advice


Here are 10 ways to build the ultimate product page for your eCommerce site that not only looks great but is compelling enough to drive massive conve...

Read more
Tips for decorating home office

4 Ideas To Decorate Your Home Office Inspired By Florida Art Galleries

04 June 2019

Posted by Analisse Weathers in Constructive Criticism


How to turn your bland home office into a vibrant work station with just a few decorative changes that will make all the difference and provide an en...

Read more

Leave us a comment


{{comment.sUserName}}

{{comment.iDayLastEdit}} day ago

{{comment.iDayLastEdit}} days ago

{{comment.sComment}}

Sign up for our newsletter