An Easy Way To Track Clicks

One of the key questions to answer about your website is what do people do when they visit your website? What pages are they looking at? Do they convert? Do they engage? And one of the key types of engagement is the click or the tap. As part of needing to know what people do, you need to know what they click or tap on.

There is a great open source script that goes a long way toward tracking this. By default, this script automatically adds event tracking to every outgoing link, jump link, downloaded files, email links, and phone calls links. This is a tremendous start and with a few small tweaks, we can get even more information.

Tweak #1: Internal Links

To best track click/tap interactions, we want to track links that take people somewhere else on our site—internal links. This kind of information can be gleaned from review the all pages report or by reviewing the previous/next pages.

So, with those default reports already available in Google Analytics, why do we need to track this as an event as well? The page reports look at the pages people visited. Which is great when you want to know what pages people visited. But, what links led people to those pages?

Knowing which links people clicked on lets you dig deeper into the experience people have on your website and what is drawing their interest the most. For instance, you might have two links to your contact page—a key conversion point—with one link saying “Contact us now” and the other saying “Get in touch to place your order.” Beyond knowing that people visited the contact page, you want to know which link gets your visitors to the contact page.

To track internal links, you want to modify the script above to add an extra conditional to detect internal links and we’ll call this event category “Internal Links.” Then, as with the other link types already included in this script, set the action to the link itself, and the event label to the page the click happened on and the text to the text of the link. We’ll set the variable of “track” to true so it actually tracks.

/* internal link */
} else if(el.href.indexOf(location.host) > 0){
  evCat = "Internal Links";
  evAction = el.href;
  evLabel = "Page: " + document.location.pathname.toLowerCase() + "; Text: " + el.innerHTML;
  track = true;
}

Tweak #2: But which exact link?

Across all the categories in this link script, including Internal links, there is a problem: which exact link did people click? Sure, you can tell what link text but you might have the same link text in a few different locations on the page. For instance, “Download PDF” might be listed at the top of the page but repeated at the bottom of the page for convenience. Without modifying it, this script would lump those clicks together and you wouldn’t know which link got clicked on the most. In that example, did people click on the top or bottom “Download PDF” link? Knowing that answer changes how you will write and design the page.

The easiest way I’ve found to tweak this is to get the chain of class names leading up to this element using something link jQuery code below. If your website doesn’t use jQuery, then this will require some modification. After getting the CSS chain, it adds it to an event label.

// get css to know which element people click on
var parentEls = $( el ).parents()
.map(function() {
 if (this.tagName.toLowerCase() != 'body' && this.tagName.toLowerCase() != 'html') {
  if (this.className) {
    return this.tagName + '.' + this.className;
  } else {
    return this.tagName;
  }
 }
})
.get()
.join( "," );
evLabel += "; CSS: " + parentEls;

With this script in place, you can then differentiate the links by adding a unique class in the element that contains the link. So, back to the example of two “Download PDF” links, maybe the first one is contained in a paragraph tag and I add the class name of “top-pdf-link” to that paragraph tag and the span tag containing the lower “Download PDF” gets the class of “bottom-pdf-link”. With that in place, I would then know which link is which when looking at the Event Labels in Google Analytics.

Tweak #3: Time To Click

A big part of the click experience is the time leading up to the click. Do people click the link immediately after arriving on the page? If so, that means they are leaving this page almost immediately to go somewhere else—which may or may not be what you intended. Alternatively, do people spend an inordinate amount of time before clicking a link? In that case, maybe people are confused by the website or confused by the link. A long delay before clicking may also suggest people are struggling to find the link or understand where to go next.

Tracking the time request the use of a timer. Ideally, you can use a JavaScript timer that factors in visibility so that you can determine the time people actively spend on the page (instead of just leaving the website open in a background tab). This code snippet below assumes that there is a timer already running and the current time value is returned from a function called getActiveTime().

// get click time (active time) - requires use of UX Events
evLabel += "; Click Time: " + getActiveTime();

This adds the click time to the event label (which already includes the page, the link text, and the CSS chain—give all the information in here, it will take some parsing in Excel to make it easier to find all the values). With this, you can get an average for how long it takes people to click on all links on a page, how long it takes to click certain types of links, and more so that you have a deeper understanding of the click or tap experience, link-by-link.