How To Tracking Click Event With Google Analytics
Posted by in Tips And Tricks April 20, 2011 3 Comments

As you know, Google Analytics is the most popular website analytics which let you see and analyze your website traffic include Visitors, Traffic Sources, PageViews, etc. In addition, it also allows you to set up Event Tracking. For example, you want to track how many time your download button/link is clicked or your play button is pressed or even track how many percent a particular video is played by with a call out function from your player script.

Before we continue, please make sure you placed Google Tracking Code on somewhere your website (before the </body> tag). To track a particular event, you can use either of following methods:

To make it simple, I will create a click with an event tracking when click on that link.

1. Event Tracking with _trackEvent

<a href="javascript:void(0);" onClick="_gaq.push(['_trackEvent', 'Downloads', 'Click', 'Test Download Tracking']);">Click here to raise a track</a>

The html code will render something like this:

Click here to raise a track

Assume that you’re browsing the page on Firefox with Firebug plugin installed. When click on the link above, the onClick event will call the _gaq.push function to track.

Firebug Google Analytics _trackEvent

Firebug Google Analytics _trackEvent

How the report looks like, let’s open the Google Analytics, from your Website Dashboard page, click on Content tab on the left then click on Event Tracking tab.

Google Analytics Event Tracking

Google Analytics Event Tracking

As you see on the image above, all event tracking is counted. That’s awesome.

Read more: go to Event Tracking Guide on Google

2. Page Tracking with _trackPageview

<a href="javascript:void(0);" onClick="_gaq.push(['_trackPageview', 'download_source_code']);">Click here to download the source code</a>

The html code will render something like this:

Click here to download the source code

When click on the link above, it will track and count for download_source_code as a page content. Let’s check how Firebug displays:

Firebug Google Analytics _trackPageView

Firebug Google Analytics _trackPageView

To see how many time the download_source_code was “viewed”, open the Google Analytics then go to Content => Top Content => type the tracking named ‘download_source_code‘ on the Filter Page text box => Go

Google Analytics Top Content

Google Analytics Top Content

Feel free to let us know how you go with it.

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com
  • http://www.in.uk.com/society/military/ uk web directory

    Hello my friend! I wish to say that this article is awesome, great written and include almost all vital infos. I’d like to peer extra posts like this .

  • Netz

    Hi!

    Great read – But i have a question. Why are you using a java around the code?
    On Google’s guide it only the code… What is the function of the java (to stop the page for reload?) Yours article is far better than google guide. You have real examples of code where Google don’t … Hope you can clarify this for me?

  • Flavio

    Sometimes the _utm.gif? relative to the element doesn’t appear on firebug, it’s normal?

    Great article! Thanks.