Hash symbols in the href attribute of an anchor breaks in-page Analytics tracking. It always has done. I have no idea why this is still common practice. Especially when there is a far easier solution that my man John Hickling clued me up on many moons ago and if I know this one simple trick you bloody should too.
The problem with hash symbols in anchors
If you have an on-page element which requires some kind of click to show, be it an accordion or tabbed container don’t do this:
<a href="#">click me</a>
To Google Analytics this is a link back to page. So when I’m scouring Analytics to try and work out how many people have clicked somewhere, my data is always skewed because 10, 20, 40% of clicks are attributed to the hashed url. Which makes it incredibly difficult to infer what is actually going on.
The solution
This might blow your mind, but style a div to look like a button:
<div class="mybtn">click me</div>
Then trigger your js with an on click event, jQuery version:
$(".mybtn").on("click", function(){
// do stuff
});
dynamically inserted content? Use this version of the on click to ensure the clicks are captured:
$(".myBtnContainer").on("click", ".mybtn", function(){
// do stuff
});
And you are done. This way is easier to me at least because I’m then not having to set the anchor to prevent default every time.
Sure I have to add a css property for the hover state, maybe a javascript state for selected but it’s not a deal breaker. Especially when it makes everything else easier down the line.
Bonus points to you if you add event tracking to the btn div so I can see how many people have actually clicked on the container. Here is a lovely post on Stack Overflow explaining how to do just that
Now you know, stop muddying my damn Analytics!!! K thanks xxx