Adaptive Mind

Google Analytics with jQuery

Posted on: 14. Srpen 2011

Warning: this is pretty heavy JavaScript stuff.

If you’d ask what the most used web analytics solution is, you would probably get pretty obvious answer. But what is not so obvious to the most people who use Google Analytics is the fact that it is a piece of JavaScript and it can be customized a lot. Especially these days when we measure dynamic websites full of JavaScript features that stay hidden to the basic generated tracking script.

Frontend developers got used to benefit from JavaScript libraries like jQuery that help them not to write repetitive code, resolve a lot of cross-browsers issues and achieve a better maintainability of their code. And as I said before, Google Analytics Tracking Code (GATC) is just another piece of JavaScript that you include into your website, so why wouldn’t you give it the same treatment as to the rest of the scripts.

A little optimized basic asynchronous tracking script (Google recommends to put it into your document’s <head> section as an inline script):

var _gaq = [];

_gaq.push(

       ['_setAccount', 'UA-XXXXXX-X'],   // doplnit vlastní ID účtu

       ['_trackPageview']

);

 

(function (d, t) {

       var g = d.createElement(t),

             s = d.getElementsByTagName(t)[0];

       g.async = 1;

       g.src = ("https:" === d.location.protocol ? "https://ssl" : "http://www");

       g.src += ".google-analytics.com/ga.js";

       s.parentNode.insertBefore(g, s);

}(document, "script"));

With this article I would like to start a series of implementation tips that should help you to make the most of Google Analytics implementation using the features of the most popular JavaScript library jQuery.

Prerequisites

And when I say that the tracking script is just another piece of JavaScript, I would give it a proper treatment also in terms of your website’s performance. Because the most of the setting script doesn’t change, you can remove it from the inline script block and include it (minimized) into a JavaScript bundle to:

  1. allow the browsers to cache some extra bytes of code;
  2. decrease the needed number of HTTP requests to your server.

Because we are going to use jQuery library, the only thing that you have to do is to make sure, that the library will be initialized, when we will need to use it. So I would recommend that jQuery is the first and our setting script the second script in the bundle. It might look like in this file.

First tip: Custom Events

With this functionality which is built-in the jQuery library you can easily measure activity of your website’s visitors that is purely controller by another JavaScript within a single page. You can use it for interactions with tabbed content, carousels, pagination or whatever you decided to implement in JavaScript or AJAX to enrich your visitor’s experience.

Somewhere within your JavaScript code:

// Fire Event

$(document).trigger("custom", [{

       param: "value"

}]);

The corresponding part handling the event:

// EVENT HANDLER

$(document).bind("custom", function (e, extraParameters) {

       alert(extraParameters.param);

});

The main advantage of this approach is that you can set some basic conventions for your frontend developers so they would fire a Custom Event on every measurable interaction. Then it is up to you whether you will implement the event’s handler to do the actual measurement.

Example 1: Measuring AJAX calls

You should probably measure only the successful requests, so the code might look like this:

// in the AJAX call definition

$.ajax({

       url: "myurl.html",

       success: function(){

             // ...

             $(document).trigger("ajax:call", [{

                    trackURL: $(this).url

             }]);

       }

});

And when you decide to measure this event, you can simply extend your GATC

// EVENT HANDLER

$(document).bind("ajax:call", function (e, extraParameters) {

       _gaq.push(["_trackPageview", extraParameters.trackURL]);

});

Conclusion

I hope this was somehow useful to you. I would like to continue with similar tips, so stay tuned.

2 odpovědí to "Google Analytics with jQuery"

What is conversion goal of this article? Press of Ctrl+C?
If so, could you share example of that code?🙂

$(document).keypress("c", function(e) {
if (e.ctrlKey) {
_gaq.push(["_trackPageview", "/ctrl_c_goal.html"]);
}
});

🙂

Napsat komentář

Vyplňte detaily níže nebo klikněte na ikonu pro přihlášení:

WordPress.com Logo

Komentujete pomocí vašeho WordPress.com účtu. Log Out / Změnit )

Twitter picture

Komentujete pomocí vašeho Twitter účtu. Log Out / Změnit )

Facebook photo

Komentujete pomocí vašeho Facebook účtu. Log Out / Změnit )

Google+ photo

Komentujete pomocí vašeho Google+ účtu. Log Out / Změnit )

Připojování k %s

Sleduj mě na Twitteru

Moje twíty

RSS Google Reader

  • Objevila se chyba, RSS zdroj je pravděpodobně mimo provoz. Zkuste to později.

RSS 417.cz

  • Objevila se chyba, RSS zdroj je pravděpodobně mimo provoz. Zkuste to později.
%d bloggers like this: