Scribd
Upload
43 views6 pages

WWW Matthewedgar Net Easy-Way-Track-Clicks

The document discusses ways to track clicks on a website more effectively using Google Analytics event tracking. It provides details on tweaking the tracking to differentiate between internal and external links, track specific elements clicked using CSS classes, and track the time spent on a page before a click.

Uploaded by

Ryan Barril
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views6 pages

WWW Matthewedgar Net Easy-Way-Track-Clicks

The document discusses ways to track clicks on a website more effectively using Google Analytics event tracking. It provides details on tweaking the tracking to differentiate between internal and external links, track specific elements clicked using CSS classes, and track the time spent on a page before a click.

Uploaded by

Ryan Barril
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

An Easy Way To Track Clicks

Matthew
Edgar  Jul 17, 2017

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?
 Home
And one of the key types of engagement is the click or the tap. As part of needing to

 About 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,
 Speaking
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
 Books
a few small tweaks, we can get even more information.

 Blog

 Learn Tech SEO


Tweak #1: Internal Links
To best track click/tap interactions, we want to track links that take people somewhere
 Web Analytics Tips 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.
 Contact
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
Social Links is great when you want to know what pages people visited. But, what links led people to
PDF created on https://www.htm2pdf.co.uk via the HTML to PDF API
   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
Elsewhere Online might have two links to your contact page—a key conversion point—with one link saying
Elementive “Contact us now” and the other saying “Get in touch to place your order.” Beyond
Matthew on Amazon knowing that people visited the contact page, you want to know which link gets your
Matthew on O’Reilly visitors to the contact page.
Matthew on LinkedIn
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?


PDF created on https://www.htm2pdf.co.uk via the HTML to PDF API
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;

PDF created on https://www.htm2pdf.co.uk via the HTML to PDF API


}

})

.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
PDF created on https://www.htm2pdf.co.uk via the HTML to PDF API
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.

Related Posts
Advanced Google Analytics Event Tracking
What Goals To Track
What Is Google Analytics & How Does It Work?

About Me Recent Posts Elements of a


Successful Website
I'm a consultant, speaker, How To Find & Fix
and author specializing in Duplicated Content
web analytics and Performing Regular Tech
technical SEO. SEO Checks with SE
PDF created on https://www.htm2pdf.co.uk via the HTML to PDF API
Ranking Buy Elements of
2020 SEO Plans & a Successful
Common Misconceptions Website Now At
Amazon

© 2001-2019 Matthew Edgar, All Rights


Reserved

   

PDF created on https://www.htm2pdf.co.uk via the HTML to PDF API

You might also like