Blog

anchor tags

How To Track Anchor Tags in Google Analytics

In most cases, installing Google Analytics to track your websites traffic is as simple as copying and pasting the tracking code.

The Problem

The above code is a simple example of the Universal Tracking code that Google Analytics uses to track each page view. Each time the page is loaded, the script sends a notification to Google to track the page view along with various other information. This however poses a problem for parallax or single page websites as the tracking code does not track the users clicks on the anchor tags that they use to scroll through the page.

The Solution

Until Google updates their analytics to take this issue into consideration, we’ll have to hack the code a little. We’ll start by editing the following two lines in the analytics code:

Old:

New:

By adding in the following code, we are telling Google Analytics to track the entire URL including the anchor tag and we can link users directly via an anchor and it will be added the the statistics. This however does not solve the issue of users clicking on the menu links that scrolls through various other content on the page. As mentioned previously, the tracking code is sent to Google once when the page is loaded. To fix this, we simple add the following javascript code to the footer of the page.

 

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.

Google Analtics Anchor Tag

Questions? Comments? Leave a note in the comments below or reach out us at connect@mediacause.org. Follow us on Facebook and Twitter for more nonprofit marketing tips, and sign up for our newsletter for a monthly update from our nonprofit marketing pros!

Asitha de Silva

asithade@gmail.com
  • Marwan Salfiti

    Thanks for the article. I am confused, though, with the secondary jQuery code snippet. Where do you enter this? I placed it right before tag and it appeared on the page in the site.

    • asithade

      I’d personally place it in the footer file as many jQuery scripts are not loaded in the header. Also don’t forget to add the tag around it.

    • I’d personally place it in the footer file as many jQuery scripts are not loaded in the header. Also don’t forget to add the tag around it.

    • Zack

      Marwan, add

      before Asitha script and

      at the end.

  • Jamin

    I did this exactly and it didn’t work. Here’s what I added right before tag:

    (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-53549640-1’, {‘allowAnchor’: true});

    ga(‘send’, ‘pageview’, { ‘page’: location.pathname + location.search + location.hash});

    jQuery(document).ready(function () {

    var hashtag = /#S+/

    jQuery(‘.GATMenu a’).click(function(){

    var match = jQuery(this).attr(‘href’).match(hashtag);

    ga(‘send’, ‘pageview’, ‘/’ + match[0]);

    })

    });

    I also made sure that all of the links are surrounded by the GATMenu class.

    What am I missing?

    • Could you possible paste an example of one of your menu links so I can take a look?

  • Zack

    Asitha, thank you for your article.
    I see in the script ‘.menu a’. If my internal link is inside an element with another class, can I change it in ‘.myclass a’? Or can I use only ‘a’ to catch every link? Or, if I need to catch only links with a specific class, can I use ‘a.myclass’?

    Thank you, and I’m sorry but I am a newbie.

    • Zack

      Your suggestion is working, but in Analytics seem to lost the full url and track #myhash instead /mysection/mypage/#myhash
      It’s possible can be a limit of your solution?
      Thank you

      • Hi Zack,

        I have updated the code to get the path name instead of just using the root path. Let me know if this works for you.

  • Václav Málek

    This was exactly what I was looking for, thank you!

  • Natalie

    Great solution. Thank you.

  • Tom

    Hey, thanks for the article! it’s exactly what I was looking for. I’ve inserted all the code above to my one-page website, though Google analytics shows the link clicks as general clicks (see image attached). what am I missing? This is the exact code in my index.html:

    in the head:

    (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-65357659-1’, {‘allowAncor’: true});
    ga(‘send’, ‘pageview’ {‘page’: location.pathname + location.search + location.hash});

    in the footer:

    jQuery(document).ready(function () {
    jQuery(‘.menu ul li a’).click(function(){
    var match = jQuery(this).attr(‘href’).match(/#S+/);
    ga(‘send’, ‘pageview’, location.pathname + match[0]);
    });
    });

    • Hi Tom,

      Your code seems fine to me, but we could test a few things. Ideally if I could see the website, I’ll be able to help more.

      A couple of questions though. Do you have jQuery setup? If so, are you meant to use jQuery or the $ sign for your jQuery commands.

      One thing you could try is the following:

      jQuery(document).ready(function () {
      jQuery(‘.menu ul li a’).click(function(){
      console.log(‘testing’);
      });
      });

      Then check your console to see if you are seeing the “testing” message there. This will tell us if the code is executing when clicking on the menu item.

      • Tom

        Hi Asitha, thanks for your reply. I have tested the code with console.log and it is working, whenever I click on a nav link, it appears. However, I cant manage to see the clicks in google analytics. The website I’m working on is: safe-e.ca . Thanks again!

        • Hi Tom,

          It looks like you’re using the old version of the Google Analytics script. Please go to your Google Analytics dashboard, and use the “Universal Tracking” code then do the steps above again.

      • Tom

        Hi Asitha, Thanks for your reply!
        I have tried inserting a console.log test and the test is working. However, nothing shows up in Google Analytics. When I click on a nav link, the console shows:
        “testing”, “Uncaught RefrenceError: ga is not defined”. Here is the link to the website, it might help: safe-e.ca

        Thanks,

  • Nina

    Thank you for the article Asitha! I’m wondering where to add ”, as I already have the ‘allowLinker’ command in use:

    ga(‘create’, ‘UA-XXXX-Y’, {‘allowLinker’: true});

    Can I add the ‘allowAnchor’ command right after it, on the same row, see below?

    ga(‘create’, ‘UA-XXXX-Y’, {‘allowLinker’: true} {‘allowAnchor’: true});

    Thanks already in advance, your help is highly appreciated!

    • Hi Nina,

      You can probably get away with the following:

      ga(‘create’, ‘UA-XXXX-Y’, {‘allowLinker’: true, ‘allowAnchor’: true});

      Let me know if that works!

  • What if user refreshes page multiple time, will it increase count. how will I get bounce rate of website?

  • Guy

    this wont wotk for wix sites, any help with that?

  • Hi Asitha, thank you for the article! Do you have any suggestions on how to implement the code using Google Tag Manager?

  • Michael Couts

    Where do you go in GA to view the clicks?

  • Gnosis Media Group

    This works very well for anchor links — thanks!

    Trying to get it to work for the new Google Custom Search bar now, which uses hashed URLs.