Presentation drawing

Track Events with Google Analytics

Asynchronous Complete Google Analytics with jQuery

Here is how to track all clicks on your website using google analytics asynchronously.

First in your html you need to use jQuery and a javscript file I named yga.js:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="yga.js"></script>

And here is the yga.js file:

$(document).ready( function() {
    // add an event to all link for google analytics
    $('a').click(function () {
        // tell analytics to save event
        try {
            var identifier=$(this).attr('id') ;
            var href=$(this).attr('href')
            var label="";
            if ( typeof( identifier ) != 'undefined' ) {
                label=label+'[id]:'+identifier
                category='JSLink'
            }
            if ( typeof( href ) != 'undefined' ) {
                label=label+' [href]:'+href
                if ( href[0] == '#' ) {
                    category='Anchor';
                } else {
                    category='Link';
                }
            }
            _gaq.push(['_trackEvent', category, 'clicked', label]);
            // console.log('[tracked]: ' + category + ' ; clicked ; ' + label );
        }
        catch (err) {
            console.log(err);
        }

        // pause to allow google script to run
        var date = new Date();
        var curDate = null;
        do {
            curDate = new Date();
        } while(curDate-date < 300);
    });
});

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
_gaq.push(['_trackPageview']);

(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

Replace the: UA-XXXXXXXX-1 by your google analytics code and you’re done.

To see what occurs, simply go in Content and Event Tracking as shown in the following screenshot:

Where to find events tracking in google analytics interface

Happy tracking!

comments

Copyright ©, Yann Esposito
Created: 06/17/2010 Modified: 06/17/2010
Entirely done with Vim and nanoc
Validation [xhtml] . [css] . [rss]