Where Customization Begins 

  • How to utilise Google Analytics onClick Tracking

  • Programming languages, Web elements, styling, HTML, CSS
Programming languages, Web elements, styling, HTML, CSS
 #26541  by Neuropass
 09 May 2013, 14:15
Onclick Tracking is already built into your Google Analytics account, we just need to hook it up to your website. It’s got a lot of benefits, for tracking downloads, specific button clicks (such as how many people click your Logo instead of Home), and other data you may wish to track such as new launches and promotions. It works by placing a small specific piece of code on the links you’d like to track – when they’re (you guessed it) – clicked. To integrate your onclick tracking, make sure your Analytics snippet (above) has this piece of code:


Code: Select all_gaq.push(['_trackPageview']);



The trackPageview function sets the account up for pushing event data to your Google Analytics account.

So where do we use it? And how? The easiest way to integrate your onclick functionality is inside a hyperlink. You’ll need to pay special attention to the wording you place inside your onclick functions though, as this feeds directly back into Google Analytics and starts churning out results.


Code: Select allonclick="_gaq.push(['_trackEvent', '', '', '']);"




The above piece of code is the inline JavaScript that we need to use for tracking, but it needs to be setup correctly in order to get results. You’ll notice the quotation marks near the end are empty, this is because we need to set a few fields for data collecting.

The piece of code below was taken from the Download button from my previous article which includes a Free Download link, you can see it in the flesh here if you Inspect Element on the button (end of the article). So here’s what the inline JavaScript looks like inside the working Download hyperlink:


Code: Select all<a href="/downloads/CVDownload.zip" class="download" onclick="_gaq.push(['_trackEvent', 'Click', 'CV Pack Download', 'CV Zip Downloads']);">Download</a>



You’ll notice I’ve populated the end fields (quotations) with the Events that will be pushed back to my Google Analytics account. The sequence is as follows:

Click, CV Pack Download, CV Zip Downloads.

Which really means:


Category, Action, and followed by an Optional Label.



What now?

Copy this snippet of code and use it on any of your hyperlinks:


Code: Select all<a href="" onclick="_gaq.push(['_trackEvent', 'Category', 'Action', 'Extra Label if you like!']);">Click here!</a>




Inside Analytics

To access the data inside your Analytics Dashboard, simply hit the sidebar tab ‘Content’ followed by ‘Events’ then ‘Overview’, and you can check out the data you’re collecting with your onclick events there, by Event Category, Action or Label. It’s good to put all Clicks inside one category, to stack them up against each other to see which is getting more attention and which isn’t. You’ll notice that Google Analytics automatically takes care of any outbound link-click tracking too.
Notes

Your onclick Tracking doesn’t need to be setup in your Analytics Dashboard, wait a day or so after implementing your JavaScript and you will start to see data being pushed into your account.