Tracking Clicks with GA Pt. 2: Basic Implementation

In Part 1 of this series I discussed urchinTracker: how it works and what it does. Today we’re going to put that knowledge to use and learn about tracking visitor clicks.

The concept behind tracking clicks with Google Analytics is simple. We capture the visitor’s click by modifying the page HTML and then send the click to Google Analytics in the form of a pageview. Because the click is stored as a pageview we can find the data in many Google Analytics reports.

Implementing click tracking is a two step process:

1. Capture the visitor’s click

2. Tell Google Analytics how to record the click

Here’s more detail about the process.

Basic Installation Process

1. Capture the Visitor’s Click

When a visitor clicks on a web page, the web browser captures the click. When I say ‘captures’ I mean that the browser knows that the user performed a click and what they clicked on. We can tell the browser to take some type of action at the exact moment when the click occurs. Here’s an example. When you click on this link a pop up message will appear.

How does it work? I made a small change to the HTML that ‘told’ the browser to pay attention when you clicked on the link. The browser does not know to pay attention to the click unless you tell it to. Normally we don’t care about every single click, so we don’t tell the browser to pay attention.

Let’s look closely at another example, an image tag. Here’s a standard HTML image tag:

Here is the same image tag that has been modified to capture a visitor’s click:

See the ‘onclick’ part of the image tag? It’s called an attribute and it’s the part that tells the browser to listen for the click. The onclick attribute can appear in almost any HTML tag. That means that we can capture the click when a visitor clicks on almost any part of your web page.

The onclick attribute is also the place where we specify what action we want the browser to take when the click happens.

2. Telling Google Analytics What Happened

Now we know how to to tell the browser to capture a click AND how to respond. What do we want to happen when the click occurs? We want to create a pageview in Google Analytics that identifies the visitor’s click. How do we create pageviews in Google Analytics? With urchinTracker :) See, it’s all coming together.

Let’s cut right to the chase. Here’s how to track a click on an image:

We’ve added a ‘reaction’ (urchintTracker) to the onclick attribute. Here’s the entire process that follows a click on the above image tag:

1. The browser captures the click
2. The browser responds to the click by running (or executing) the urchinTracker function
3. urchinTracker creates a pageview in Google Analytics named ‘/clicks/images/foo.jpg’

Don’t worry about the ‘javascript:’, that just tells the browser that the function is a JavaScript function.

The beauty of this system is that the onclick attribute exists for almost all HTML elements. This means you can apply the above example to almost any piece of HTML.

Implementation Examples

The most popular application is tracking clicks on links, also known as anchor tags. Why? Because anchor tags link to many objects that can not be tracked by Google Analytics. Two of the most common are non-HTML files (like PDF, MP3, etc) and links to other websites site (I call them outbound links). Here’s an example of tracking a link to another site:

Robbin's Blog

When someone clicks on the above link, a pageview will be created in Google Analytics. The pageview will be named ‘/outbound/lunametrics.blogspot.com’.

And here’s an example of tracking a link to a non-HTML file:

trail map

This PDF will be tracked as a pageview named ‘/files/pdf/trail-map.pdf’.

One thing to note is how I am structuring the name of the pageview. For the outbound link I added ‘outbound’ to the pageview name. It’s a good idea to have some type of naming convention for your non-HTML files and outbound clicks. It will help if you need to create a filter or want to easily sort the data in GA.

You’ve probably realized there is a downside to this tracking method. What happens if you have a huge number of clicks that you want to track? For example, what if your website has 1000 PDF files and you don’t want to modify all of those links? I have a solution for this and will cover it in my next post.

A Note About Your Data

You’re probably wondering where all this click data is stored. Remember, we’re creating pageviews. So any GA report that shows pageviews will show the visitor clicks. Here’s an example, the top content report:

One thing to consider is how your profile data will change if you start tracking clicks with urchinTracker. urchinTracker creates pageviews, so the number of pageviews in your profile will increase. If you need an accurate number of true pageviews then make sure you use an exclude filter to massage the appropriate data.

Here’s how an exclude outbound clicks filter would look:

So now you can see the importance of structuring the name of your pageview.

Final Thoughts
One thing I did not cover in this post is how to use urchinTracker to track non-HTML events. Certain technologies, like Flash, JavaScript and Ajax also create clicks but they can not be trackd in the manner described above. One does use urchinTracker to track these technologies, but the implementation is different.

Next up, I’ll talk about an advanced way to track visitor clicks.