How To Install & Test Google Event Tracking

event tracking

Event tracking is extremely useful for webmasters who want extra data on how their website is being used from users.

It can track actions called by users in many different forms and be implemented on items such as:

  • File / PDF downloads
  • Contact Forms
  • Video Pause/Play
  • Product / Article Rating
  • User registration forms
  • Social (FB, Twitter, etc) buttons
  • …and many more!

This can help you collect and segment data such as the amount of enquiries on a contact form from PPC, SEO or referral traffic.

You can then make educated decisions on click through rates and conversions based on the event tracking data straight from Google Analytics.

What Do I Need To Know?

 

If you’re using the latest Google Analytics tracking code (ga.js) it’s as simple as adding a ‘gaq.push’ to your contact form, link or type of web element that gets triggered on a user’s interaction.

gaq.push(['_trackEvent', Category, Action, Label,  Value]);

The gaq.push accepts four parameters to help you categorise, label and assign values to your user’s interactions.

Category – This is the name you can supply for a group of objects you would like to track.

For example:

The universal category name “Contact” could be assigned for all contact forms on your website.

Action – This defines your user’s direct triggered interaction.

For example:

You could use “Enquiry”, “Submit” or “Clear Form” (if you wanted to record how many people use the clear button)

Label – Here you can assign a “name” to distinguish it from different events in the same category.

For example:

 

If you have multiple contact forms on your website you could label it “Contact_Us_Page”, “Quotes_Page”, etc.

 

Value – This is an optional field that can be used to assign a numeric value to the event.

For example:

Some type of enquiries may be more valuable to you than others and you can assign a value based on that.

 

 

How To Install This On Any Page

 In this example we’ll be adding it to the submit button a contact form which is hosted on ROI.com.au.

To install this we need to add a simple onclick attribute to the submit button which will automatically be called every time the form is submitted.

Before:

<input id=”contact_submit” type=”submit” value=”Submit” name=”submit” >

After:

<input id=”contact_submit” type=”submit” value=”Submit” name=”submit” onclick=”_gaq.push(['_trackEvent', 'Enquiry', 'Contact_Form', 'Contact_Us']);”>

As you can see there’s not much to it, and if we look at just the gaq.push code you’ll see that we have set it up as the following:

gaq.push(['_trackEvent', 'Enquiry', 'Contact_Form', 'Contact_Us']);

Category: Enquiry

Action: Contact_Form

Label: Contact_Us

 

 

This can be applied to any element on a page that looks for a user’s mouse click interaction.

If you wanted to track a PDF document such a product or company brochure you could add this exact code to a link element.

For example if our original link was:

<a href=”/downloads/latest_brochure.pdf”>View our brochure here</a>

You would simply add: onclick=”_gaq.push(['_trackEvent', 'Files', 'Download', 'latest_brochure']);”

The complete code:

<a href=”/downloads/latest_brochure.pdf” onclick=”_gaq.push(['_trackEvent', 'Files', 'Download', 'latest_brochure']);”>View our brochure here</a>

 

It’s as simple as that!

 

How to Test if Event Tracking is working

 

The event tracking data can take up to 12 hours to process and come through in Google Analytics. As a result, you can sometimes be unsure as to whether it’s set up and tracking correctly before any campaigns go live.

Fortunately it’s very easy to see whether or not the event tracking code is being triggered through some crafty inline browser editing that will only be visible to you and won’t affect your visitors at all.

In this particular case we’re checking if our contact form’s event tracking is correctly working.

To do this we’ll be using the Google Chrome browser.

1)      Visit the page with the element you’re tracking

 

2)      Right click element with the event tracking installed and click “Inspect Element”.

Here we will need to locate the forms action attribute as seen below.

<form method=”post” action=”http://www.roi.com.au/mail” name=”enquiry” id=”enquiry” onsubmit=”return contact_check();”>

What we need to do is change this to javascript:void();which will prevent the page from changing and allow us to to see the event being triggered.

You can do this simply by double clicking on the action attribute or by right clicking it and selecting Edit Attribute.

Altered version:

<form method=”post” action=”javascript:void();” name=”enquiry” id=”enquiry” onsubmit=”return contact_check();”>

 

3)      Click the button to trigger the event

4)      Switch over to the Network tab and look for __utm.gif as seen below.

If you click on it you can view the headers sent with the event.

What you need to look for is Category, Action & Label elements we originally assigned the event.

 

Request URL:

http://www.google-analytics.com/__utm.gif?utmwv=5.3.7&utms=7&utmn=420662449&utmhn=www.roi.com.au&utmt=event&utme=5(Enquiry*Contact_Form*Contact_Us)&utmcs=UTF-8&utmsr=1920×1080&utmvp=1903×656&utmsc=32-bit&utmul=en-us&utmje=1&utmfl=11.5%20r31&utmdt=Contact%20Us%20%7C%20ROI.com.au&utmhid=1992641149&utmr=-&utmp=%2Fcontact%2F&utmac=UA-8089868-1&utmcc=__utma%3D115057156.586288479.1349762528.1352953254.1352958515.10%3B%2B__utmz%3D115057156.1351565824.6.3.utmcsr%3Dgoogle%7Cutmccn%3D(organic)%7Cutmcmd%3Dorganic%7Cutmctr%3D(not%2520provided)%3B&utmu=6AAAAAAAAAAAAAAAQ~

 

If you can see this then event tracking has been successfully installed!

 

The exact same methodology can be applied for links. If we used our previous PDF example:

<a href=”/downloads/latest_brochure.pdf” onclick=”_gaq.push(['_trackEvent', 'Files', 'Download', 'latest_brochure']);”>View our brochure here</a>

 

We would simply just need to change the href attribute to javascript:void(); just like we did with the contact form.

 

<a href=”javascript:void();” onclick=”_gaq.push(['_trackEvent', 'Files', 'Download', 'latest_brochure']);”>View our brochure here</a>

 

Post a Comment

Your email is kept private. 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=""> <strike> <strong>