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>

Solution 1

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 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>

Solution 3

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

Comments

[Blexy]

@lulalala you're correct. I made the mistake of copying and pasting OP's code. I've updated my code.

[landed]

Yes for me I am noticing issues with the new preferred way ! So the new way ga('send'... isnt working though I see the network request go just fine ... We seem to need to provide both but I am concerned that stats may not be accurate when google fix their code if it is broken.

[cramopy]

please add some more information and not only code. thanks!