WordPress Google Analytics (UA) Events Tracking Guide

Why You Should Track Events in Google Analytics

If you want your website to be successful you need to track events on your website that you consider to be forms of success. When you track success, you can identify how to achieve more success. If  you don’t track success, you’re just shooting in the dark and wasting your bullets. Imagine that these bullets are your effort, you only want to use them when there’s a good shot.

How To Track Events in WordPress with Google Analytics

Include Custom JavaScript in WordPress

First you should create a custom javascript file and load it in your header (if your theme doesn’t already have one you can use).

Create a new file and name it “custom.js” and add the following JavaScript to it:

jQuery( document ).ready( function( $ ) {
/* Add your custom Google Universal Analytics event JavaScript code here */
});

Upload it into the “javascript” folder in your theme (e.g. //penguininitiatives.com/wp-content/themes/bigbangwp/javascript/).

Now include it in your theme’s header.php file by adding the following line before the closing </head> tag:

Now you have a place to add all your custom Google Universal Analytics events JavaScript code in.

Google Universal Analytics ga function

Google Universal Analytics uses the ga function to track events. It is made up of a category, action, label & optionally a value as well. We will not use the value field for these examples.

A complete ga function without the value field looks like the following:

ga('send', 'event', 'category', 'action');

We will use the ga function and jQuery to track custom events. For all the examples, you should change the example values for all the fields to whatever labels you would prefer to use for your website.

What Events To Track & How To Track Them

Form Submissions

Identify the id of the form on your website that you want to track. We'll use the default WordPress search widget form as an example. The default WordPress search widget uses the id "searchform". To track the default search widget you would add the following JavaScript code to the custom.js file you created in the steps above:

$('#searchform').on('submit', function() {
ga('send', 'event', 'Searched', 'Submitted', 'All Pages - Header Right - Search - Form');
});

You can use the above code to track any form submissions on your website, you just need to copy it and replace the id to whatever other form you want to track submissions of and then adjust the field values accordingly.

Clicks

In order to track clicks on links on your website as events you just need to uniquely identify them somehow.

Let's say we wanted to track the following link, in the sidebar text widget with id "text-27" as an event, with the following HTML code:

Subscribe 
 RSS

We can track it one of two ways. The easiest way would probably be to add the following JavaScript code to the custom.js file we created in previous steps:

$('#text-27 .textwidget a').on('click', function() {
ga('send', 'event', 'RSS', 'Click', 'All Pages - Sidebar Widget - RSS - Text Link');
});

Alternatively we could adjust the HTML code as follows to accomplish the same result:

 
Subscribe
 
 RSS

You can use either tracking method above to track clicks on any link on your website, you just need to copy it and replace the uniquely identifiable CSS selectors and the field values accordingly.

404 Errors

In order to track 404 errors as events you simply need to add the following HTML to your WordPress template's 404.php file:

If your theme doesn't already have one you'll need to create one first.

You can use the above code to track visits to any page on your website, you just need to copy it to whatever page you want to track visits to and adjust the field values accordingly.

Disqus Comments

You can track Disqus comments by adding the following line of code in the comments.php file in the Disqus WordPress plugin within the disqus_config function. Below this line:

this.language = '<!--?php echo esc_js( apply_filters('disqus_language_filter', '') ) ?-->';

Simply add this line of JavaScript code:

this.callbacks.onNewComment = [function() { ga('send', 'event', 'Commented', 'Successful Comment Submission', 'All Pages - Comments - Successfully Commented - Form'); }];

Test Your Custom Universal Google Analytics Events

If you're currently filtering out traffic from your IP address you should disable it temporarily so you can test your events. Now login to your Google Analytics account and go to Real-Time > Overview, then go to your website and make sure you see yourself. It helps if you visit a page that isn't popular so you know for sure you're seeing your own activity. Once you have confirmed you are seeing your own activity, click on the Events report. Now perform the events you setup and see if they register in the Real-Time > Events report.

Here's an example of what it looks like when it registers properly for the event category "Searched":

Custom Google Universal Analytics Events Real-Time Report

RELATED ARTICLESMORE FROM AUTHOR

15 COMMENTS

  1. The event tracking numbers for Classic Analytics do not quite match up with Universal Analytics event tracking. Do you know why this is? I’m getting more event usage for the old GA eventhough the UA tracking is working.

    • Matt,

      Replace:

      ga(‘send’, ‘event’, ‘RSS’, ‘Click’, ‘All Pages – Sidebar Widget – RSS – Text Link’);

      with e.g. :

      dataLayer.push({‘event’:’rss-click’});

      Then create a rule for event = rss-click and use that to trigger any tag you want (e.g. an event tag which has category ‘RSS’, action ‘Click’, and label ‘All Pages – Sidebar Widget – RSS – Text Link’)

  3. Hi Andy !
    Thanks for your tutorial it’s the best one for the analytics.js Events 🙂

    I followed exacly your tutorial but there is something wrong.

    I can’t see the event in Google Analytics

    There is my code in the custom.js that is loaded in the Header
    ——————————————————————————
    “jQuery( document ).ready( function( $ ) {

    $(‘#eventtest’).on(‘click’, function() {
    ga(‘send’, ‘event’, ‘test’, ‘test’, ‘test’);
    });

    });
    ——————————————————————————

    And in my page :
    ——————————————————————————

    contact Me !

    ——————————————————————————

    iI also tried to put it directly in the HTML with :
    ——————————————————————————
    contact Me !
    ——————————————————————————

    In Analytics there is my setting for the event :

    http://img4.hostingpics.net/pics/521862Capturedcran20140422213050.png

    I don’t understand why is not working

    I’m beging for help…

    Thanks a lot

    Antoine

  5. Hi Andy,

    It looks like a nice tutorial and only good one out there. I’m busy doing Google Analytics for a client and I can’t get the event goals set up since it is my first time doing it on wordpress. I’ve tried your tutorial but I’m not seeing anything under events in behaviour and real-time? I used classes instead of ids (is this fine?) for my forms on the following pages:
    https://changingtools.com/events/sydney-public-speaking-course-12-may-2014/
    http://changingtools.com/public-speaking/business-presentation-training/

    Thanks in advance 🙂

  7. Sorry.
    Apparently the “a” tag that I placed as code messed with it.

    So explaining again.

    Inside my “a” tag there is a “span” tag. The theme shortcode generates it for the buttons.

    Thanks

  9. Hi Andy,

    I have followed the steps until I need to update the code in the disqus plugin comments.php file. The instructions state to add the code below:

    config.language = ”;

    Looking in this file this line does not appear to exist so I am unsure where to add your code.

    Can you help?

    Thanks

  10. Hey Graham,

    It would appear disqus has changed this line of code slightly since I originally published this post. Thanks for pointing this out, I have just updated that line of code in this post to make sense with the latest version of their WordPress plugin. The adjusted line of code I was referring to is now on row 125 and is as follows:

    this.language = '';

    Cheers,
    Andy

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.