Google Analytics Event Tracking

I’m enjoying my vacation this week on the beach, where it’s warm. It’s been a while since I posted a search marketing post.

I thought I would use this time to highlight a feature I’ve been using for years in Google Analytics. This feature has helped me quite a bit to determine the usefulness, value, and overall web page effectiveness.

Before I dive in and tell you more about this feature, answer the following questions:

  • Have you ever wanted to determine how many people are actively clicking an object on a web page?
  • Have you ever wondered if people are playing videos on your website?
  • Have you ever wanted to measure a user’s behavior when interacting with a web page?

These are just a few questions, but the list goes on. My point is that you don’t have to be in the dark on the questions above.

Today, I’ll show you how to answer yes to the questions and then record and retrieve data points using Event Tracking (Web Tracking) in Google Analytics.

Before I get into the nitty-gritty details of what you’ll do, I’ll use Google Analytics’ legacy tracking software, not their newest library. What we’ll cover today can be done with either code base, but Google does recommend using the latest and greatest tracking codebase. Let’s get started.

If you’re new to Google Analytics, let me invite you to read the following post covering both Google Analytics and Google Webmaster Tools: Using Google Webmaster Tools to Verify and Submit a Website Sitemap.

How to track events using Google Analytics in WordPress.

To begin the exercise, remember that I’m using legacy tracking code. If you want to use the most up-to-date, I suggest you read and implement Google’s Event Tracker Guide.

To get started, make sure the following code is either before the tag or if you’re going to implement it in your footer, then be sure the code is before the tag.

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
  _gaq.push(['_trackPageview']);
  //setTimeout("_gaq.push(['_trackEvent', '15_seconds', 'read'])",15000);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();


</script>

 

If using WordPress, edit your theme’s header.php or footer.php files accordingly. If your theme provides an area for additional javascript code, add the code above to the assigned area.

Be sure to change the account from “UA-XXXXXXXX-1” to your assigned Google Account Tracking Id. If you need help finding this account code, read more here.

Now that the tracking software has been successfully installed in your header or footer file, now we’re ready to add the code to track a user’s interaction on a page.

Tracking events using a text link.

One of the easiest ways to track events, a user clicking a button, image, or other page object, is using the onClick event trigger.

The onClick event trigger can be added to track when users click a text link or button to download and view PDF versions of whitepapers and case studies. Shown below is how to add Google’s Event Tracking code to your links.

// a few onlick examples using Google Analytics Event Tracking

// button example
<button onClick="_gaq.push(['_trackEvent', 'Downloads', 'Whitepaper', 'TestWhitePaper.pdf']);">Button1</button>

// hyperlinked text or link example
<a href="TestWhitePaper.pdf" onClick="_gaq.push(['_trackEvent', 'Downloads', 'Whitepaper', 'TestWhitePaper.pdf']);">View our latest whitepaper</a>

 

Notice that I’m using 3 fields to specify the Event’s Category (Downloads), Event Action (Whitepaper or Case Study), and Event Label (Name of the item – TestWhitePaper.pdf). Change the criteria to meet your desire, but be sure to stay organized by categorizing the various events tracked, or else events tracking will become a quagmire.

Tracking events using a short code button class or id.

I know some of you are wondering how you’ll add this onClick functionality to shortcode buttons generated by plugins. No need to fear as I have a solution for shortcode buttons too.

To add the events tracking to the shortcode buttons, you’ll need to be able to add a class or id to the shortcode button.

Let’s say you had the following shortcode button and added the class linkbuilder to it, as shown below.

// Google Analytics Events Tracking with WP Shortcode buttons

// shortcode button
 [download_button label='Download Now' link='http://www.msn.com/file.pdf' class='linkbuilder']

 

I know you’re wondering what this is going to do and where the onClick event gets triggered. Glad you thought and asked about it.

We’ll use a bit of jQuery to associate an onclick event to the linkbuilder class. Find the functions.php file in your theme, and copy and paste the following code into the file:

<?php

function add_custom_script(){
?>
<script>
jQuery(window).load(function(){	
	jQuery('.linkbuilder').attr('onclick', '_gaq.push([\'_trackEvent\', \'Downloads\', \'Whitepaper\', \'TestWhitePaper.pdf\']);');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

?>

 

What’s going on? What is happening is that you’re creating a custom WordPress function that is an added action when the wp_footer function is called.

Simply put, the code pasted above is placed in the footer of your page at the time of the footer creation when the page is loaded.

This code binds an onClick action to the linkbuilder class using jQuery. Each time you need an additional button, copy and paste the one line of jQuery below.

<?php

function add_custom_script(){
?>
<script>
jQuery(window).load(function(){	
	jQuery('.linkbuilder').attr('onclick', '_gaq.push([\'_trackEvent\', \'Downloads\', \'Whitepaper\', \'TestWhitePaper.pdf\']);');
	jQuery('.linkbuilder').attr('onclick', '_gaq.push([\'_trackEvent\', \'Downloads\', \'Whitepaper\', \'TestWhitePaper2.pdf\']);');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

?>

Conclusion

Now you’re ready to go and view your Events Tracking in Google Analytics. It may take up to 24 hours for the data to become visible.

To view the data, go to side menu options Behavior > Events > Overview in Google Analytics, and it should show you a page that looks something like the following. And that’s how you track what users are clicking and viewing on your website.

Google Analytics Event Tracking

I shall return soon from vacation, and in my return, bring back the long-awaited daily domain auction ending posts. So, sit tight, and we’ll be back to the normal posting schedule.

Let me know if this post helps you see Google Analytics in a new light. What else would you like to know?

Share:
Written by Alvin Brown
He's an experienced and passionate serial entrepreneur, founder and publisher of Kickstart Commerce. Alvin possesses a great love for startups dominating their market using profitable digital strategies for greater commerce.