Open Search

Stop using hash symbols in Anchor Hrefs for js triggers

October 26, 2016 11:43 am
Categorised in:
Reading Time: 2 minutes

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

This joint was penned by @elmarko