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:
- The browser captures the click
- The browser responds to the click by running (or executing) the
- urchinTracker creates a pageview in Google Analytics named ‘/clicks/images/foo.jpg’
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.
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:
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:
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 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.
One thing I did not cover in this post is how to use
urchinTracker to track these technologies, but the implementation is different.
Next up, I’ll talk about an advanced way to track visitor clicks.
Julien Raby says
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?
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:
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)?
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,
Yes I have! That’s actually the very next post in the series!
Brad Warthan says
Great write up. Very useful!
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.
Hence what modification would I need to do to this line and would that only suffice:
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,
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
The next post in this series has a sample script.
Thanks for reading!
Gavin Doolan says
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?
I’m still not a expert on filters.
Justin Cutroni says
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.
Will Quick says
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,