Analytics Talk

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:

<img alt="My Image" src="/foo.jpg" />

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

<img onclick="" alt="My Image" src="/foo.jpg" />

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:

<img alt="My Image" onclick="javascript:urchinTracker('/clicks/images/foo.jpg');" src="/foo.jpg" />

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:

href="http://lunametrics.blogspot.com">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:

onclick="javascript:urchinTracker('/files/pdf/trail-map.pdf');">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.

Welcome to Part 1 of How to Track User Clicks using Google Analytics. Before we learn how to track clicks we need to review some of the technology behind Google Analytics. In particular, we need to understand how GA creates pageviews. Why? Because we will use the same technology to track clicks. This post may seem off topic, but it lays the foundation for the next post in the series.

urchinTracker: A JavaScript Function

It all starts with the Google Analytics tracking code:

I’d like to point out the second to last line. It contains a JavaScript function called urchinTracker. For those of you that don’t know what a function is, it’s a piece of code that actually ‘does stuff’.

There are two important features of a JavaScript function:

1. It can appear almost anywhere in your web page. There are certain limitations, but in general you can move it around.
2. It can appear more than once.

Applying these characteristics to urchinTracker means we can place urchinTracker almost anywhere in a web page AND we can include it multiple times, two important concepts.

urchinTracker: What it Does

We know that urchinTracker is a function and it ‘does stuff’, but what exactly does it do? While visitors engage with your website, urchinTracker is collecting information in the background. It identifies things like:

• Where the visitor came from
• How many times they’ve been to your site
• What content they are viewing
• Characteristics of their browsing environment (operating system, browser, etc.)
• The title of the current website page
• etc.

Please note that urchinTracker is not collecting any personally identifiable information. It is collecting generic information about the visitor.

After it collects the data, it sends it to Google Analytics in the form of a pageview. So every time urchinTracker runs, or as programmers say ‘executes’, it creates a pageview in Google Analytics. And, because urchinTracker is a function, we can add it to a web page multiple times. This means we can create multiple pageviews in Google Analytics every time a single page loads in the visitor’s browser.

‘Naming’ Pageviews with urchinTracker

Another important concept to understand is how urchinTracker ‘names’ pageviews. When I say ‘names’ a pageview, I mean the way that the pageview is represented in the GA reports. Let’s look at some pageviews in the Top Content report:

Everything in the ‘Content’ column was created by urchinTracker. Here’s how:

1. urchinTracker extracts the information from the location bar of your browser.
2. It modifies the value to show only the name of the directories, file and query string variables.

Here’s an example. This URL:

would appear in the top content report as this:

That’s the default behavior of urchinTracker. Recapping what we’ve learned; whenever a page loads in your browser, urchinTracker collects all the necessary information, creates a pageview name from the location bar and sends the data off to Google Analytics in the form of a pageview.

Important Stuff Below, Pay Attention :)

What’s really cool is that we can over-ride the default behavior and tell urchinTracker how to name a pageview. For example, let’s say we want to change the way the pageview for ‘/index.php’ is named in GA. We would modify urchinTracker as follows:

urchinTracker('ski-bum');

This modification forces urchinTracker to name the pageview ‘ski-bum’ rather than ‘/index.php’. This means that when you view the Top Content report you’ll see ‘ski-bum’ and not ‘/index.php’. Whatever you place in the parenthesis of urchinTracker becomes the name of the pageview in Google Analytics.

Summary

There are a few important concepts to take away from this post:

1. Google Analytics pageviews are created by a JavaScript function named urchinTracker
2. urchinTracker can appear almost anywhere in a web page
3. urchinTracker can appear multiple times in a web page
4. By slightly modifying urchinTracker we can change the ‘name’ of pageviews in Google Analytics

In Part two of this series we’ll put our knowledge of urchinTracker to work and talk about tracking visitor clicks.