Google Analytics – Next Level – Custom Variables and Events

So I have this Google Analytics tracking installed on my site for quite few years. It has good reporting so far for basic tracking like page visits, unique visitors and the like. Now, I take it to the next level and added custom variables and event tracking.

Google Analytics Custom Variables

I have worked on other Analytics provider like Omniture Site Catalyst and we used some page tracking variables like page name, page type or channel. So I wanted to have this same strategy with Google Analytics, that is, to track what page is being visited.

Having a quick look at Google Analytics Custom Variables documentation, it seems a straightforward implementation. It says it supports up to 5 slots to hold the custom variables. This means that we can only have up to 5 variables on a page at a time. I wanted to start with the following variables.

• page_name
• section
• sub_section

For each variable, here is how to tag them on the page.

 _gaq.push(['_setCustomVar',
      1,                   // This custom var is set to slot #1.  Required parameter.
      'Items Removed',     // The name acts as a kind of category for the user activity.  Required parameter.
      'Yes',               // This value of the custom variable.  Required parameter.
      2                    // Sets the scope to session-level.  Optional parameter.
   ]);

For example, I assigned the variable page_name to slot 1. Therefore, we should never assign page_name to other slots to be consistent. I assigned section to slot 2 and sub_section to slot 3. For the variable name, we put the name of the variable, ex: page_name. For the variable value, for ex at home page, we set value to Home Page.

The last parameter is the scope of the variable. For my implementation, I used 3 which means page level tracking. Here is an example code for the 3 variables at home page.

_gaq.push(['_setCustomVar', 2, 'section', 'Home Page', 3]);
_gaq.push(['_setCustomVar', 1, 'page_name', 'Home Page', 3]);
_gaq.push(['_setCustomVar', 3, 'sub_section', 'Home Page', 3]);

For my site, since it is just a small site, I used a YAML config file that lists all possible custom variables and its values, mapped on several pages. Below are the config content.

---
index:
  page_name:
    slot: 1
    value: 'Home Page'
  section:
    slot: 2
    value: 'Home Page'
  sub_section:
    slot: 3
    value: 'Home Page'
about:
  page_name:
    slot: 1
    value: 'About Us'
  section:
    slot: 2
    value: 'About Us'
  sub_section:
    slot: 3
    value: 'About Us'
projects:
  page_name:
    slot: 1
    value: 'Projects Index'
  section:
    slot: 2
    value: 'Projects'
  sub_section:
    slot: 3
    value: 'Projects Index'

Since I’m using Google AppEngine, what I did is set the custom variables for every handler but fetching the related page on the configuration. Then in my template, I set the variables into the JS snippet provided by Google Analytics.

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-2']);
{% if has_ga_tags %}
    {% for name,tag in ga_tags.items() %}
        _gaq.push(['_setCustomVar', {{ tag.slot }}, '{{ name|e }}', '{{ tag.value|e }}', 3]);
    {% endfor %}
{% endif %}
_gaq.push(['_trackPageview']);

The value of ga_tags is a dictionary we get from the huge list of analytics configuration. For example from the configuration above, we get the projects portion, we get the following values.

page_name:
  slot: 1
  value: 'Projects Index'
section:
  slot: 2
  value: 'Projects'
sub_section:
  slot: 3
  value: 'Projects Index'

Then we get the following JS snippet as output.

_gaq.push(['_setCustomVar', 2, 'section', 'Projects', 3]);        
_gaq.push(['_setCustomVar', 1, 'page_name', 'Projects Index', 3]);        
_gaq.push(['_setCustomVar', 3, 'sub_section', 'Projects Index', 3]);

We can use the Omnibug plugin for Firefox/Firebug for viewing the variables.

Google Analytics Event Tracking

Tracking events is cool like tracking how frequent the visitor engage on your site, for example, how frequent the visitor clicks a button or views/enlarge a thumbnail image. You can track whatever events you like. For my small site, I wanted to track the click events of my URL Encode/Decode tool here.

This is the guide I used – the Google Analytics Event Tracking guide. Below is the basic syntax.

_gaq.push(['_trackEvent', category, action, label]);

There is a fourth parameter but I would not include that on my post. If you are interested about the fourth parameter, you can read the docs instead. It talks about some bounce rate and stuff. Now back the event tracking, for example I wanted to track every time the user tries to decode a string, I will fire the tracking event. For simplicity, I have exploited data attributes to simplify collecting the tagging data.

<a data-label="Decode URI Component" data-action="Decode URI Component" data-category="URL Encode" class="btn btn-primary ga-track" id="decode-uricomp-btn" href="javascript:void(0);">Decode</a>

As you can see, I have embedded the category, action and label parameters straight to the link/button. Then I simply attach a click event (via jQuery) then fire the tracking code. Below is the JS code.

$(function(){
    $(".ga-track").click(function(){
        var category = $(this).attr("data-category");
        var action = $(this).attr("data-action");
        var label = $(this).attr("data-label");

        fire_ga_event(category, action, label);
    });
});

function fire_ga_event(category, action, label) {
    if (typeof _gaq !== "undefined") {
        _gaq.push(['_trackEvent', category, action, label]);
    }
}

I have just pushed this tracking codes to live site and the result will be available 1 day after. We’ll see tomorrow.

Enjoy and share.