Google Analytics, Ghostery, and Event Tracking

At the time I write this post, Google Ana­lyt­ics has a new ver­sion in beta called ​“Uni­ver­sal Ana­lyt­ics”. It’s basi­cal­ly Google Ana­lyt­ics ver­sion 3. This means that code you may have relied on dur­ing the ver­sion 2 of Google ana­lyt­ics may no longer work.

Google sug­gests that all new projects moved to ver­sion 3 now. It does offer ​“real time” ana­lyt­ics, so you can see who is on your site at that very moment. That’s pret­ty cool.

If you want just the basics, it is extreme­ly easy to set up. Google pro­vides sim­ple asyn­chro­nous JavaScript that you can place in the head of your HTML doc­u­ment to get the ana­lyt­ics up and run­ning quick­ly. You can get start­ed on the Google Ana­lyt­ics Overview page.

Event Track­ing

I’ve been set­ting up a site where the basic con­fig­u­ra­tion did not col­lect all of the data that my client want­ed to col­lect. The basic imple­men­ta­tion of Google Ana­lyt­ics will track page views. But I want­ed to track clicks on cer­tain but­tons on the site which is beyond page track­ing.

That meant I need­ed to rely on event track­ing in addi­tion to the page view track­ing. What are ​“events” when you refer to ana­lyt­ics? Accord­ing the doc­u­men­ta­tion, ​“event track­ing allows you to mea­sure how users inter­act with the con­tent of your web­site. For exam­ple, you might want to mea­sure how many times a but­ton was pressed, or how many times a par­tic­u­lar item was used in a web game.”

My site was already using jQuery, so it seems like I could rely on the sug­gest­ed code struc­ture pro­vid­ed in the Google Ana­lyt­ics Event Track­ing doc­u­men­ta­tion.

// Using jQuery Event API v1.3
$('#button').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});

This code does work in many cir­cum­stances, but I want­ed to track but­tons that lead to oth­er pages on the web­site. The prob­lem was that if I did that using this sam­ple code my events were not record­ed because the action that the user was tak­ing, the clicks away from the page to a new page, pre­vent­ed the ana­lyt­ics from being col­lect­ed due to the page being refreshed. I need­ed to delay the actu­al page request until I was sure the event had been record­ed. I need a call­back. Take a look at the hit­Call­back entry in the Field Ref­er­ences area of the doc­u­men­ta­tion.

This lead me to have event track­ing that looked some­thing like this:

$('#module-coupon').on('click', function(event) {
  event.preventDefault();
  ga('send',  {
    'hitType': 'event',
    'eventCategory': 'module-area',
    'eventAction': 'click',
    'eventLabel' : 'coupon-button',
    'hitCallback' : function() {
      document.location.href = event.currentTarget.href;
    }
  });
});

This is the ver­bose ver­sion of the code, but it helps you see what all the val­ues mean. Let’s go through it line by line. Imag­ine this is for a web site that has a series of but­tons in a mod­ule area on the page. Each of those but­tons links to a deep­er page in the site.

The func­tion opens by adding a lis­ten­er for a click on an a tag with the ID of ​“mod­­ule-coupon”. A click will trig­ger an anony­mous func­tion, which we’re pass­ing the event into using ​“event”.

Next it pre­vents the default action, which would be to take a user away from the page, with the event.preventDefault() com­mand. The word ​“event” here is the ​“event” we passed in with the anony­mous func­tion.

Now we begin the Google Ana­lyt­ics code with the ​“ga” func­tion by pass­ing in ​“send” along with an object of all the data it needs. (You can see the ​“ga” func­tion set up your ana­lyt­ics by pass­ing in ​“cre­ate” and then ​“send” in the default quick start code Google pro­vid­ed.)

The ​‘hit­Type’ is an ​‘event’ since we’re track­ing events. (The docs (https://​devel​op​ers​.google​.com/​a​n​a​l​y​t​i​c​s​/​d​e​v​g​u​i​d​e​s​/​c​o​l​l​e​c​t​i​o​n​/​a​n​a​l​y​t​i​c​s​j​s​/​f​i​e​l​d​— r​e​f​e​r​e​n​c​e​#​h​i​tType) say it must be one of ​‘pageview’, ​‘appview’, ​‘event’, ​‘trans­ac­tion’, ​‘item’, ​‘social’, ​‘excep­tion’, ​‘tim­ing’.)

The ​‘event­Cat­e­go­ry’ is up to you. You can put any­thing you want in here, but the cat­e­go­ry will help you nar­row your focus in your actu­al ana­lyt­ics con­trol pan­el. In my case, I called this ​“mod­­ule-area” since it’s an event (a click) in the mod­ule area of the page.

The ​‘even­tAc­tion’ is also up to you. I used the word ​‘click’ because it described the actu­al action, but you can choose what­ev­er text fits your need.

The ​‘event­La­bel’ is also up to you. You can see I’m using it to get very spe­cif­ic with the name of the but­ton that was clicked.

The ​‘hit­Call­back’ is the key though. Since we pre­vent­ed the default behav­ior of the user’s action, a click­ing through to a new URL, we still need to exe­cute that click through once we’ve got con­fir­ma­tion from Google Ana­lyt­ics that it has record­ed the event. The hitCallback’s anony­mous func­tion will be exe­cut­ed when that con­fir­ma­tion arrives. We want to make the web brows­er go to the href of the link that was clicked.

That’s it. It all looks like it should work.

And it does.

Most­ly.

Ghostery and oth­er pri­va­cy add ons. #

I say it works most­ly because it does. This should work, but what if Google Ana­lyt­ics didn’t get to load on the page? You’ve pre­vent­ed the user’s default behav­ior from hap­pen­ing with the event.preventDefault() func­tion and you’re count­ing on the Google Ana­lyt­ics hit­Call­Back to com­plete the user’s intend­ed action. If Google Ana­lyt­ics was pre­vent­ed from load­ing, by, for exam­ple, using Ghostery, the pri­va­cy add on for Chrome, Opera, Fire­fox, Safari and IE.

If a user has Ghostery, you’ve now pre­vent­ed them from being able to nav­i­gate your site with the but­tons you’re track­ing!

Ini­tal­ly I thought I need­ed to just check for the pres­ence of the ​“ga” func­tion. This didn’t work though. Ghostery allowed the Google Ana­lyt­ics to cre­ate the ga object so sim­ply test­ing for the pres­ence of it wasn’t enough. I need to test for the pres­ence of the ​‘cre­ate’ func­tion inside the ga object. If the ga.create func­tion wasn’t present, that means Google Ana­lyt­ics instance couldn’t be cre­at­ed. So what does that leave the event track­ing look­ing like? I’m glad you asked.

$('#module-coupon').on('click', function(event) {
 	if (ga.create)
      event.preventDefault();
      ga('send',  {
        'hitType': 'event',
        'eventCategory': 'module-area',
        'eventAction': 'click',
        'eventLabel' : 'coupon-button',
        'hitCallback' : function() {
          document.location.href = event.currentTarget.href;
        }
      });
    }
});

This updat­ed func­tion basi­cal­ly wraps the event track­ing, includ­ing the pre­vent­De­fault por­tion, in a test for the page’s abil­i­ty to cre­ate a Google Ana­lyt­ics instance. If the page can’t cre­ate it, then just let the user click through like they intend­ed.

Before I end this post… #

I want­ed to include a quick aside about the ​“Cat­e­go­ry” ​“Action” and ​“Label” val­ues I used above. I’m not sure I’ve got the best method for how I think of these dif­fer­ent vari­ables. Google’s doc­u­men­ta­tion seems to sug­gest the way I think of event cat­e­gories and event labels are back­wards.