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.
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.
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.
@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.
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.
Hii tried many a times but still cldn’t track clicks on the same do we have any other way too….?????
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 =-.
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 & Website Promotion Articles =-.
@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.
@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 & Website Promotion Articles =-.
@Tiggerito: Good info, thanks! 🙂
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
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
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?