Event Tracking with Google Analytics & WordPress

If you’re reading this, you should have already set up Google Analytics in your WordPress site. If you haven’t yet, go do that now! I’ll wait here.

…

Ok, so now that you’ve got that step done, we need to talk about event tracking. Event tracking can be any sort of thing you want to know about happening on your site. Do you want to know when someone’s added a product to their cart on your store? Great! When they’ve signed up for a newsletter? That makes sense. Submitted a form entry? Good idea! Hovered their mouse over that picture of your third cousin twice removed? I mean, why not? Let’s do this!

Depending on how you set up Analytics on your site, you may have a number of events being tracked for you automatically. Analytify, for example, does a great job of tracking eCommerce and many form plugin submissions. But what do you do if you want to track something that your Analytics integration of choice doesn’t track automatically? Well, we can build a solution that does. It’ll take a little bit of Javascript / jQuery, but it’s a lot easier than you might think.

Let’s look at the basics of submitting a Google Analytics event. First, the long form:

ga('send', {  
  hitType: 'event',
  eventCategory: 'UserAction',
  eventAction: 'Clicked',
  eventLabel: 'TheBlueButton'
});

That seems way too long and cumbersome, so you can shorthand it like this:

ga('send', 'event', 'UserAction', 'Clicked', 'TheButton');

That’s it; if you pop that into your browser’s console, it will send the event to Analytics and it’ll show up in your dashboard there. Now we just need to trigger it. We need an event.

Events, or “Did something just happen?”

Events happen all the time as your users use your site. Every mouse-over, scroll, click, everything – it’s all an event you can trigger off of if you want to. Some events are built in, others are included in the Javascript libraries in WordPress, and still others can be created manually (but that’s a different article to be written).

Let’s start with a basic one; a button that you want to do something with. Let’s say you have a button.

There you go, that’s a nice looking button! Now that you’ve got the button, you want to know every time someone clicks it. Let’s look at the code making up that button;

<div id="theButton" class="wp-block-button"><a class="wp-block-button__link">I am a button.</a></div>

Now we can see how it’s structured, we can target it with some Javascript. I prefer not to reinvent the wheel, so I’m going to use jQuery (as it’s included in WordPress anyways)

jQuery("div#theButton a").click(function() {
   ga('send','event','UserAction','Clicked','TheButton');
});

With that code in place on the page (remember to wrap it in <script> tags), it will fire a Google Analytics event as described whenever someone clicks the button. You can use the same sort of code, with some modifications, to track virtually any click on your page.

Help! My newsletter signup isn’t tracking!

This is exactly the issue I came up against with one of the sites I worked on. A submission form built in Formidable Forms, and the integration being used wasn’t tracking the submissions. No problem. Formidable Forms offers a Javascript Event to build things off of called frmFormComplete. Here’s an example of using that event to send a notification to Google Analytics.

<script>
jQuery(document).ready(function($){
$(document).on( 'frmFormComplete', function( event, form, response ) {
ga(send, event, "Category-Goes-Here", "Action-Name-Here", "Label-Goes-Here", "Optional-Value-Here");
});
});</script>

One example would be to use “Lead”, “Submit” “email Submission” and leave out the value section, so Google Analytics would know that in the “Lead” category, you had a “Submit”, and it was an “email Submission”. Pretty straightforward, right?

Not using Formidable? Check your Form Plugin’s documentation for any similar events, or – if all else fails – try tracking the click on the submit button using the previously covered “Click” capturing code!