ga or _gaq.push for Google Analytics event tracking?

Question

I would like to track an onclick of a button on a page on a site, after a condition is passed checking if a cookie is present.

Very simple but which syntax would work best?

I have researched the ga and gaq_push prefix of the GA event tracking syntax and (forgive me if I'm wrong) but they seem pretty similar?

_gaq.push

<script type="text/javascript">
jQuery(document).ready(function () {
    if (jQuery.cookie('entry_winagrand_cookie') !== null) {
        jQuery('notregisterbtn').on('click', function () {
            _gaq.push(['_trackEvent', 'QR_Win_A_Grand', 'Clicked through to Register']);
        });
    }
});
</script>

ga

<script type="text/javascript">
jQuery(document).ready(function () {
     if (jQuery.cookie('entry_winagrand_cookie') !== null) {
         jQuery('notregisterbtn').on('click', function () {
             ga('send', 'event', 'button', 'click', 'QR_Win_A_Grand', 'Clicked_through_to_register');
         });
     }
});
</script>

Answer 1

If you use ga.js ("traditional" asynchronous code) you have to use _gaq.push. If you use analytics.js you need to use ga send. The methods are not interchangeable, they belong to two different versions of the Google Analytics tracking code.

By now (2017) there is a new code version (gtag.js), so if you are using that you use neither ga nor _gaq.push but instead follow the migration guidelines to bring your code up to the latest version (or you quite sensibly start to use Google Tag Manager).

Answer 2

If you had both analytics.js and ga.js running on your site, which is recommended while analytics.js is still in beta, you can run both, although I would combine them in the notregisterbtn function, like so:

    <script type="text/javascript">
    jQuery(document).ready(function () {
        if (jQuery.cookie('entry_winagrand_cookie') !== null) {
            jQuery('notregisterbtn').on('click', function () {
                //you should first check if ga is set
                if (typeof ga !== 'undefined') {
                    ga('send', 'event', 'QR_Win_A_Grand', 'Clicked_through_to_register');
                 }
                //check if _gaq is set too
                if (typeof _gaq !== 'undefined') {
                    _gaq.push(['_trackEvent', 'QR_Win_A_Grand', 'Clicked through to Register']);
                }
             });
        }
    });
    </script>

Answer 3

I would create a function if you need to track different events, that way your code will be cleaner.

analytics.js

ga.js

function TrackEventGA(Category, Action, Label, Value) {
    "use strict";
    if (typeof (_gaq) !== "undefined") {
        _gaq.push(['_trackEvent', Category, Action, Label, Value]);
    } else if (typeof (ga) !== "undefined") {
        ga('send', 'event', Category, Action, Label, Value);
    }
}
TrackEventGA('QR_Win_A_Grand', 'Clicked_through_to_register');

Answer 4

This is my script I've got on Google Analytics page

 <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-77777777-2', 'auto');
    ga('send', 'pageview');
</script>

To track my other pages in Backbone.js, I put this code in each Backbone.js View script:

ga('send', 'pageview', myUrl);

Answer 5

/* universal event tracking */
function trackEventTag(category, action, opt_label) {
    /* analytics.js send event */
    ga('send', 'event', { 'eventCategory': category, 'eventAction': action, 'eventLabel': opt_label });
    /* add delay or additional tracking here */
    return true;
}
/* send ga.js _gaq.push() events to universal tracker */
var _gaq = window._gaq || {
    push: function (ar) {
        if (ar && ar.constructor === Array && 0 in ar) {
            if (ar[0] == '_trackEvent') {
                var category = 1 in ar ? ar[1] : null, action = 2 in ar ? ar[2] : null, opt_label = 3 in ar ? ar[3] : null;
                return trackEventTag(category, action, opt_label);
            }
            /* test for others you want to translate here */
        }
        return true;
    }
};