jQuery Plugin gaTrackers

Hiho,

A few months I built a jQuery plugin to help to track your pages views and events using a Google Analytics. View the source in my github.

To use you’ll need add the jQuery and my plugin in your HTML file. Like that:

1
2

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="path/to/jquery.gaTrackers.js"></script>

And then you need to initialize the plugin on $(document).ready() function, like that:

1
2
3
4

$(document).ready(function(){
  $(document)
      .gaTrackers({UA: 'UA-XXXXXXX-X', initialTrackers: []})
})

In UA: 'UA-XXXXXXX-X' value you need to put your UA track code. In initialTrackers: [] you can put yours initial tracks in your page like a ['_trackPageview'] or ['_setDomainName', 'example.com']. If you put this parameters in your code, it’ll be like this:

1
2
3
4

$(document).ready(function(){
  $(document)
      .gaTrackers({UA: 'UA-XXXXXXX-X', initialTrackers: [ ['_trackPageview'] , ['_setDomainName', 'example.com'] ]})
});

Ok!?

To track your page views and events, you’ll do like that:

track page view :

$('.your-DOM-element').gaTrackers('pageview-id' [, DOMevent or 'now']);

In DOMevent parameter you can put click, mouseenter or any type of DOM events, but if you put now the track will be fired immediately.

1
2
3
4
5
6
7
8
9

//tracking home pageview
$(document).ready(function(){
  $(window).gaTrackers('/', 'now');
});

//tracking my-modal pageview
$('.my-modal').bind('open', function(){
  $(window).gaTrackers('my-modal', 'now');
});

track event :

$('.your-DOM-element').gaTrackers('event-categort', 'event-name', 'event-label' [, DOMevent or 'now']);

In this case you must parametrize the first three arguments. The DOMevent works like the other case.

1
2
3
4
5
6
7
8
9
10
11

//tracking home click event
$('nav.menu .home a').gaTrackers('menu', 'home', 'top nav');

//tracking my-modal open event
$('a.my-modal').gaTrackers('modal', 'open', 'about modal');

//tracking page scrolling
$(window).gaTrackers('interactions', 'page-scrolling', '', 'scroll');

//trancking field fill
$('input[name="name"]').gaTrackers('form', 'fill-field', 'name', 'blur');

If you omit the DOMevent parameter, in both cases by default, the plugin will use the DOM event click

I used this plugin in my job: www.ameocoracao.com.br

If you need help comment here please. I hope I have helped you at your work

Don’t forget to follow me on twitter and github.

Thanks