ga or _gaq.push for Google Analytics event tracking?

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>

Solution 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).

Solution 2:

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');

Solution 3:

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>

Solution 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);