Event Tracking for Google Analytics: WordPress Edition

In my previous post, “Event Tracking for Google Analytics: 3-Step Set Up”, I explained an easy way for site owners to set up Google Analytics by adding the tracking code to each item they want to track. In this post I am going to explain another way of setting up event tracking for WordPress sites with jQuery.

A Little Recap: Event Tracking

Event tracking is a feature of Google Analytics that allows site owners to trace actions on their site, even when a URL change is not recorded. This is done by adding a few lines of Javascript to your site either around a link, social icon, or email address. That line of Javascript for standard Google Analytics is:

_gaq.push([‘_trackEvent’,’Category’,’Action’,’opt_label’,’opt_value’]);

And for Universal Analytics it is:

ga(‘send’,’event’,’category’,’action’,’opt_label’, opt_value)

To set up event tracking there are a few steps that need to be taken. These steps are:

1. Decide what events are to be tracked
2. Categorize these events into similar buckets
3. Write and add code to the site
4. Add class to events to be tracked

Step 1: Decide what events are to be tracked

When deciding what events you want to track, think about what your marketing goals are and what the intention of the page is supposed to be. For example, let’s say you run a medical website and your doctors release previews to their latest journal article. Each of these releases would have their own landing page and the landing page may include the following:

• Content explaining what is on the page
• Video of the doctor speaking at an event
• Form to collect the information before providing journal link
• Link to download journal article preview
• Social links

With content like this, I would want to track the visitor’s intent and track how many times visitors perform each of the following actions:

• Click to play the video
• Click the form submit button
• Click to download the journal article preview (most importantly)
• And maybe even how many times social links are clicked

Being that the medical website releases numerous journals I wouldn’t want to add custom event tracking codes to each link; that would take a lot of time and flood the categories in Google Analytics. This is why we need to categorize our events.

Step 2: Categorize these events into similar buckets

Knowing that you are going to track clicks on videos, forms, journal downloads, and social icons on your landing pages, we might create the following categories & actions for your tracking code:

• For videos, lets call the category ‘Videos’ and the Action ‘Play’
• For forms lets call the category ‘Forms’ and the Action ‘Completion’
• For journal article downloads lets call the category ‘JournalArticles’ and Action ‘Download’
• For social links lets call the category “Social” and the Action “View”

The benefits of categorizing events comes in the reporting phase, by allowing you to see different types of events at a high level and then zoom in, plus it allows you to include different actions within the categories.

Step 3: Write code and add it to the site

Now that we have our categories and actions, let’s write the code. For this example I will use standard Google Analytics and we will be writing Javascript that you can add to your site’s Javascript file. The location for the Javascript file is typically:

wp-content>themes>THEME NAME>js>script.js

FTP access will be required and I always recommend backing up any file before making a change.

This code will be looking for a class that will need to be added to your links. It will also be pulling in the title of the attribute and the URL location where that event happened.  The code is (for standard analytics):

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

jQuery(function($){

if (typeof(_gaq) !== 'undefined') // Check if Google Analytics is Loaded

{

// Video Tracking for Google Analytics 
$('.video-track').click(function(e){_gaq.push(['_trackEvent', 'Videos', 'Play', 'Video_'+$(this).attr('title')+'_'+location.href]);  });

// Form Tracking for Google Analytics 
$('.form-track').click(function(e){_gaq.push(['_trackEvent', 'Form', 'Completions', 'Form_'+$(this).attr('title')+'_'+location.href]);  });

// Journal Tracking for Google Analytics 
$('.journal-track').click(function(e){_gaq.push(['_trackEvent', 'JournalArticles', 'Download', 'Journal_'+$(this).attr('title')+'_'+location.href]);  });

// Share Tracking for Google Analytics
$('.social-track').click(function(e){_gaq.push(['_trackEvent', 'Social', 'View', 'Social_'+$(this).attr('title')+'_'+location.href]);  });

}

});

Once this is added to the site, it will look to see if Google Analytics is loaded, and track each time something is clicked on that includes the class it is looking (for example, video-tracking or form-tracking).  If your site already has jQuery on it, you will not need the first three lines of this code and the final closing brackets.

Step 4: Add class to events to be tracked

In Step Three we identified the classes that need to be added to the landing page. These classes were:

• video-track
• form-track
• journalarticle-track
• social-track

Using these classes, go to the source code of the landing page and include them in the anchor text. For example, adding the class to the latest journal download link would look like:

a title=”Doctor John Doe” class=”journalarticle-track” href=”/john-doe-journal-preview.pdf”

Now what?

Now that tracking has been added, view your results! Go to Google Analytics and go to the behavior section>events overview.

There you see the total number of clicks that happened in those categories. You will be able to click in for more information of the categories, or see total numbers by actions or labels.  Hopefully this will help you start tracking items on your website.  Please share if you like it or comment if you have any questions!

If you are not comfortable adding code to your wordpress site, try our event tracking plugin on your site and learn how to use it on our blog post: Gravitate Event Tracking,Our New WordPress Plugin.

To get save this tutorial for future reference, download the “Event Tracking for Google Analytics: WordPress Edition” PDF.

[slideshare id=32553607&doc=eventtrackingforwordpress-140320161357-phpapp01]