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

clickerhand.jpgWhen 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:

My Image

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

My Image

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:

My 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

20030323-pdf-image.jpgThe 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:

20070323-outbound-example.jpg

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:

20070323-exclude-outbound-filter.jpg

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.

Be Sociable, Share!

    Like this post? Sign up to get posts delivered to your inbox.

    Comments

    1. says

      Hi,

      I was just wondering if there were a quick fix to exclude the traffic for all my outbound links with one filter. Since all my outbound links start with “/outbound/”, could we set-up this filter to not count pageviews whenever a outbound link is clicked using regular expressions?

      Thank you,
      Julien

    2. says

      Hi Julien,

      You can use a filter very similar to the one I show in the post. Use the following regular expression in the Filter Pattern field:

      ^/outbound/

      Justing

    3. says

      How comes that Google Analytics shows the time spent on outbound links? Is the Java Script capable to track when the user closes the external page (or continues on)?

    4. says

      Hey Jan,

      Great question. Google Analytics tracks time on a page based on the begining of the next page view. So, the start of pageview #2 marks the end of pageview #1. When someone clicks on an outbound link there is no subsequent pageview. This means that the session will time out (based on the session timeout variable, whose default is 30 minutes).

      Hope that helps,

      Justin

    5. Deborah says

      Justin,

      Have you considered implementing this method using unobtrusive JavaScript rather than coding the Javascript code directly in the markup?

    6. Hilario says

      I need to track the image on a page BUT not when it is clicked (as referenced above with onclick) but when the page itself which contains the image is opened. The image for all practical purposes may be a tiny invisible image.

      The reason for using an Image is because I cant use javascript or any kind of script.

      Hence what modification would I need to do to this line and would that only suffice:

    7. says

      Hi Hilario,

      I’m not sure if your entire comment was posted. It seems like the last line or so is missing. I’m guessing that you tried to post some JavaScript in your comment, which is not possible.

      To track an image when it loads in a page is difficult. The onLoad event is not a valid event attribute for the image tag, so you can’t add the urchinTracker() function to that event attribute. You could try to create some type of DOM script that executes when the page loads and dynamically calls urchinTracker() during the page load. I’m not sure if that will work for you, but it’s a thought.

      Hope that helps,

      Justin

    8. Hilario says

      Hi Justin,

      Could you give me an example of the “DOM Script” that you are refering to.. or a link on the internet which will have more information about the same

      thanks
      Hilario

    9. says

      Hi Justin,
      If I am tracking interal links to on say a home page to see how effective they are and how often they are used and I wish to exclude the pageview inflation as a result.

      would I so something like this in my filter?

      /front_page_links/www\.mydomain\.com

      I’m still not a expert on filters.

      Thanks,
      Gavin.

    10. says

      Hi Gavin,

      That regular expression is valid. As long as the value you’ve created using urchinTracker() or trackPageview() matches the reg ex then your exclude filter will work.

      Nice job excluding the extra traffic from the profile.

      Thanks for reading and thanks for the question.

      Justin

    11. says

      Justin,

      You are an absolutely beautiful man! I knew this would be simple, but the official Google tutorial was absolutely useless and left me completely stumped (I’m an IT professional and I STILL didn’t understand it; God knows what less tech-savvy people make of it).

      Anyway, I didn’t realise that we could put onclick=”” through Google Analytics… as soon as I read that I had an “Ahah!” moment, so thank you. You’ve saved me one major headache!

      All the best,

      Will

    Trackbacks

    1. […] Before you read this post, you might want to read a post that Justin Cutroni published on Saturday night. He wrote about tracking clicks to pages where you make the name up, because you can’t put the code on the page. Links that take you off the page, .pdfs, etc. It is a good basis for what Judah is going to talk about: creating page names out of thin air and then using the pretend pages to track events (and hence, rich media) in GA. So here we are, lucky again to have Judah Phillips: Since we all know about page tags, let’s get down to business with “the Google” and how it tracks “the Rich Media:” […]

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>