How To Track Clicks On #Anchors in Google Analytics

by Shockley Au December 7th, 2010 

Last week, a question from a client landed in my inbox, about whether or not it was possible to track clicks on anchors/fragments. Good question! While the vanilla out-of-the-box Google Analytics doesn't do this, a little bit of customization with JavaScript can do the trick.

What Are #Anchors?

In case you're not excited yet, let's do a quick #Anchors 101.

Many websites use named anchors (referenced by using a hashtag, #) to quickly link to specific areas on a webpage. Examples of named anchors you may have seen, are those "Back to Top" links, which link to the top of the page you're currently on.

The code to do this is normally <a href="index.htm#top">Back to Top</a>.

In Analytics, this will trigger a pageview for index.htm by default – not for index.htm#top.

Anchors can also be used for simple navigation to lower sections of a page. Here's one that links to the screenshot section of this blog post.

JavaScript Code

The key to capturing the hashtag is to use the location.hash property.

Old traditional tracking code:

var pageTracker = _gat._getTracker("UA-XXXXX-X");
pageTracker._trackPageview(location.pathname + location.search + location.hash);

New asynchronous tracking code:

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);

#Anchors in Google Analytics

You should now be able to see clicks on named anchors in the Content Drilldown report.

Anchors in Content Drilldown

Without the customized code, we would see 33 pageviews for index.htm (18+8+4+3), and no #section anchors anywhere.

Tracking clicks on anchors allows you to: better understand visitor behaviour; see how they interact with your site; and see what content works.

Shockley Au

Shockley is an experienced digital marketing consultant, helping businesses succeed online through SEM/PPC, SEO, Social Media, and Web Analytics. He is certified in Google Analytics, Google AdWords, and Bing Ads, and also blogs at State of Digital. Follow him on Twitter @ShockleyAu.

Shockley Au

You May Also Like

14 Responses to “How To Track Clicks On #Anchors in Google Analytics”

  1. Tiggerito says:

    Nice trick.

    This would track when the hash is in a link or directly typed in to a browser.

    It would not pick up proper internal page anchor links (like href="#top") or javascript that causes hash changes to the browsers URL. This is because they don't cause the page to reload and trigger your code.

    In those cases you would want to add javascript into an onclick attribute or the dynamic code, that included some _trackPageview code.

  2. Shockley Au says:

    @Tiggerito: Thanks, and yes good point. This was a recommendation we gave when the anchor was linked to from another internal page, which would work.

  3. Hello,

    I added this code to our google analytics and it is not tracking the anchor tag links.

    Could the error be because we are using a CMS that makes links with wild URLS? how does this actually work calling the location.hash?

    I wish i could explain this better. We are using Red Dot/Open Text.

  4. Nick Thomas says:

    Hii tried many a times but still cldn't track clicks on the same do we have any other way too….?????

  5. Shockley, I do not know if the question is timely, but what is the direct influence of the anchor on the placements? Is there any special treatment for the search engines? If so, how this influences the data in analytics?

    Thanks,
    Nuvenus Chovendus
    .-= Nuvenus Chovendus recently posted: Fab comenta sobre o Nuvenus e os Voos =-.

  6. Tiggerito says:

    I new that would happen!

    See if this works

    <a href="#somewhere" onclick="_gaq.push(['_trackPageview', location.pathname + location.search + '#somewhere']);">somewhere</a>

    Or you may want to track it as an event.

    <a href="#somewhere" onclick="_gaq.push(['_trackEvent', 'anchor', 'click', 'somewhere']);">somewhere</a>
    .-= Tiggerito recently posted: The Most Popular SEO &amp Website Promotion Articles =-.

  7. Shockley Au says:

    @Amanda, @Nick: Has the issue been resolved? If not, please post a link to your website and I can take a quick look.

    @Nuvenus: I'm not sure I understand your question, but Google seems to simply ignore anchors and index the page normally as if it didn't have any.

    @Tiggerito: Thanks! Also remember to be careful with inflating pageviews in some instances. You should look at the way you're using #anchors and decide what makes sense for your site.

  8. Tiggerito says:

    @Shockley: I agree about the pageview inflation issue. That's why I would track them as events.

    Google Analytics ignores anchor links because it does not see them. In reality a browser makes a request without the anchor (#) part then locally moves to its position when the page is returned. Google code tracks the URL in the request, which is anchor free.

    Also, when you have an in page anchor link, it will not trigger a new request. It just locally moves to that new position. Your browsers Address bar also gets updated but Google's code is not re-run to capture the click.

    Hence the code to manually trigger a page hit or event.
    .-= Tiggerito recently posted: The Most Popular SEO &amp Website Promotion Articles =-.

  9. Shockley Au says:

    @Tiggerito: Good info, thanks! :)

  10. joe limon says:

    I think I may have found my answer in the threadCan a url contain both a page anchor and campaign tracking codes? at the Google Help forum

  11. [...] in den Kommentaren zu einem ähnlichen Artikel zu erkennen ist, funktioniert diese Art der "URL-Erweiterung" nur, wenn von einer [...]

  12. Dave says:

    Trying to understand the # anchor and Google analytics

    I have the following at the top of my index.html file

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    Then on the intro page I have a menu bar which goes to different pages i.e.





    HOME PAGE


    ABOUT US



    ‘Future Use



    RESULTS

    Then I have the individual pages on the main index.html file i.e.






    ‘Test Website

    Where and what do I use as the code to track these

    ‘#!/page_HOME

    ‘#!/page_SERVICES

  13. Jeremy says:

    I'm still trying to understand this. The '_setAllowAnchor', true seems to be about replacing the delimiter for campaigns. What I want to do is track internal references to #anchors on the site.

    For that, I need + location.hash

    Is this right?