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 syn
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).
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');
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>
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);
/* 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;
}
};