Dynamic Google Analytics Event Tracking for WordPress

What Is Analytics Event Tracking?

Event tracking is a method made available by Google Analytics using the ga.js tracking code. It is used to track custom user activity with UI elements, known as “Events”. With Event Tracking, the total number of pageviews is never skewed–as is the case when using urchin.js to track user activity. Event Tracking provides for hierarchical organization of events into Categories, Actions, and Labels.

Though Event Tracking can be used in as many ways as you can imagine, this article focuses on dynamically tracking outbound links on a WordPress site.

Dynamic Outbound Tracking in Action

Follow these simple steps to automatically track all of your outbound links in Google Analytics. Make sure your Analytics code is already installed. This can be accomplished by adding the code to your header.php file right before the closing head element. Alternatively, if you don’t want to mess with your template files, there are plenty of plugins available to get the job done such as Google Analytics for WordPress.

Step 1

Create a new file called ‘event-tracking.js’ and place it in your theme’s js folder. Add the following code:

jQuery(document).ready( function($) {

	//set our domain as a variable
	var domainString = document.domain;
	
        //select each anchor whose href begins "http://"
        //this excludes relative urls and urls like "mailto:"
	$('a[href^="http://"]').each(function() {
	
		//set url's href as a variable
		var url = $(this).attr('href');
		
		//if url does not contain our domain name
		if ( url.indexOf( domainString ) == -1 ) {
			
                        //add onclick tracking event
			$( this ).attr( 'onClick', '_gaq.push(["_trackEvent","Outbound Links","Click","'+url+'"])' );
		
		} 
	});
});

Instead of using “.each( function() {} )”, you can use “.click( function() {} )” and fire the onClick event directly rather than append the onClick attribute in your html. In this example, I have appended the onClick event to make troubleshooting easy.

Step 2

Include the script in the head of each page/post by adding this function to your theme’s ‘functions.php’ file:

//if in front end (not admin)
if ( ! is_admin() ) { 

	//register our script with handle 'event_tracking'
	wp_register_script( 'event_tracking', get_bloginfo('template_directory') . '/js/event-tracking.js', array('jquery'), '1.0' );

	// enqueue the script
	wp_enqueue_script('event_tracking');

}

Note: If you’re using a child theme like Thematic, use ‘stylesheet_directory’ in place of ‘template_directory’

Finding the Results

In your Analytics account, navigate to Content>Event Tracking. You can click through the Categories and Actions to view all Labels tracked under each.

Feel free to explore the many different views available. To add a secondary dimension, like which page the event fired from, click the drop-down box next to the primary dimension (in the picture above, its value reads “None”).

Extending & Modifying the Code

The above code is just a small example of what you can do with Event Tracking. This code can be easily modified to suit your needs. For example, to assign different event categories to group outbound links in the header, body, and footer areas of your site, you might select anchor elements by class and apply your onClick events accordingly.

Event tracking is certainly not limited to outbound links. It can be used for tracking interactive events such as clicking the Play, Stop, and Pause buttons of a movie, or for tracking file downloads. A quick look at Google’s Event Tracking Guide should give you a few more ideas.

What have you used Analytics Event Tracking for in your projects?