Integrating google analytics in webapp: not able to log user interactions - google-analytics

I have created a webapp using backbone.js and I am trying to integrate google analytics in it. The thing is script execution always stops at some point inside ga.js. The code where the execution stops is like this (beautified version) ...
var o = e == "_gat" ? K : e == "_gaq" ? Tc : K.p(e);
o[f].apply(o, b[d][ha](1))
minified version (line 21)
new ActiveXObject(d),e=c.GetVariable("$version")}catch(o){}e&&(e=e[w](" ")[1][w](","),e=e[0]+"."+e[1]+" r"+e[2])}b=e?e:"-"}Pc=b;
I am logging the events like this:
_gaq.push('_trackEvent', '[header] login', 'click');
I am seeing the code being stopped at the live above in Firebug script tab. If I disable the debugging the google analytics request is not made. The app works fine.
What could be going wrong here? Has anybody else encountered such problem.
UPDATE
It seems like the problem is not related to backbone.js. Even created the simplest of page like this gave the same problem. I checked the Net tab in Firebug - the __utm.gif does load. ga.js also loads successfully. But the pressing the button again gives the same break in execution.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'XX-XXXXXX-XX']);
_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);
})();
</script>
<script type="text/javascript">
function check() {
alert("hi");
_gaq.push('_trackEvent', 'check');
}
</script>
</head>
<body>
<input type="button" value="abc" onclick="check();"/>
</body>
</html>

You're calling _trackEvent wrong. Note that the first 2 parameters to _trackEvent are required and the last 2 optional. Also it should be inside brackets.
Check the signature of the function.
You're call should be
_gaq.push(['_trackEvent', '[header] login', 'click']);
and
_gaq.push(['_trackEvent', 'check', 'something else']);

Related

The Event is not genrated with Track Event in Google Analytycs

I am generating the Event tracking in Google analytic. but i can not see the event is generated with in Behavior link -> Events -> Overview.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-46891304-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);
})();
_gaq.push(['_trackEvent', 'ProfileMenu', 'MenuClick', '', 1]);
</script>
</head>
<body>
<h1>This is for Tracking Event..!!!</h1>
</body>
</html>
Regards
You need to attach the event tracking script on to a event listener.
Your event tracking code does not seem to be attached to anything.
For example if I wanted to track a button click this is how I would write it with jQuery.
html
<button id='button1'>Button<button>
JavaScript/jQuery
$('#button1').click(function(){
//fires the event tracking method when button is clicked.
_gaq.push(['_trackEvent', 'Category', 'Action', 'Opt Label', Opt Value, 'Opt non-interaction'])
})
Here is all the documentation https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
And here is a post that I went in more in depth into event tracking.
Let me know if you have any other questions.
It takes 24 hours for data to be processed. Before that time you should be able to see your events in the Real-time reports under
Real-time -> events.
after 24 hours has passed the data should show up under.
Behavior link -> Events -> Overview.

GA - Experiments does not work

we try to set up experiments in our site. We would like to testing 3 type of banner on our home page.
1. If anybody click on the banner, makes event, which si set up as a goal in GA. This goal measure clicking correctly.
2. We implement code for measuring experiments and made javascript function for changing banners, they changing well.
3. For set up whole experiments in GA and in code we follow this documentation: https://developers.google.com/analytics/solutions/experiments-client-side
Finnaly our whole GA script on site looks this:
<script src="//www.google-analytics.com/cx/api.js?experiment=sTe5dJkJTfmSO8YXsc7Kuw">
<script>
var variation = cxApi.chooseVariation();
cxApi.setChosenVariation(variation);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
(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);
})();
</script>
<script type="text/javascript" src="http://oursite.cz/js/ga.js"></script>
<script type="text/javascript">
_gaq.push(['_trackPageview']);
</script>
Problem is, that experiment does not work. It does not measure anything. When we try to look on console, what data are sending, we realize, that ` correctly send hash Te5dJkJTfmSO8YXsc7Kuw, but that is all, There is no data of variation type, which was choosed by
<script>
var variation = cxApi.chooseVariation();
cxApi.setChosenVariation(variation);
</script>
It should sent 0 or 1 or 2, but it send nothing. What we make wrong? Thank you for answer,
You're missing the closing tag when loading the content experiment.
You have:
<script src="//www.google-analytics.com/cx/api.js?experiment=sTe5dJkJTfmSO8YXsc7Kuw">
Should be:
<script src="//www.google-analytics.com/cx/api.js?experiment=sTe5dJkJTfmSO8YXsc7Kuw"></script>

How to pass Google Analytics cookies from page contained in iframe, to page on different domain

Here is my problem:
We have page contained in iframe (url of iframe page - www.iframepage.com). That page has link UPGRADE on it. When user clicks on that link, he gets directed to billing page, which is located on different domain (www.billingsite.com/cc.html).
That page should be open on top (not in iframe).
If I use _link, GA cookie values will get passed to target page and cross domain tracking will work, BUT target page will open in iframe.
UPGRADE
https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._link
I would need a solution that will provide both: target page should open on top (not in iframe) and GA _utm parameters should be passed to target url so cross domain tracking could work.
Any help will be appreciated, thanks.
The _gaq.push(['_link', url]); function targets the current window with the 'url' you send it. It ignores target. What you need to do is call the Google function but then update the parent location.
Your page within the iFrame should look something link this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-xx']);
_gaq.push(['_setDomainName', 'example.com']);
_gaq.push(['_setAllowLinker', true]);
_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);
})();
</script>
</head>
<body>
Link
<script>
function your_GA_track_link(url){
_gaq.push(['_link', url]);
self.parent.location.href = url;
return false;
}
</script>
</body>
</html>
I think I have found solution. Here is code that should be put in body:
<script type="text/javascript">
function openWindow(link) {
_gaq.push(function() {
var tracker = _gaq._getAsyncTracker(); //add name param if needed
window.open(tracker._getLinkerUrl(link.href),"_parent");
});
return false;
}
</script>
UPGRADE</br>

YepNope (Modernizr) and Google Analytics

Im using the great async script loader yepnope.js (in Modernizr2).
My question is, what is the best way to incorporate the latset Google Analtics async code to yepnope (if at all)?
Google suggest this for the actual analytics code:
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>Page Content</p>
<script src="some_random_script.js"></script>
<p>Page Content</p>
<script type="text/javascript"> (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);
})();
</script>
</body>
</html>
But in Modernizrs docs, they mention this:
// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
// Presentational polyfills
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run your analytics after you've already kicked off all the rest
// of your app.
'post-analytics.js'
]);
Note the bottom line re: posting analyics. I dont want a new js file as that is another HTTP request however.
Shall I just keep this outside of yepnope? Is there any advantages to putting it within yepnope framework?
Adi
I found this on Ignited-HTML5-Boilerplate.
<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
Not sure if this is "the best way" to incorporate the latest Google Analytics code in yepnope, but a way to integrate google code in yepnope is:
<script type="text/javascript">
Modernizr.load([
{
// WEB ANALYTICS loaded by yepnope (beta)
test: Boolean(SITEID = ''), // TODO: Fill the site ID to activate analytics
complete: function() {
if (SITEID) {
var _gaq=[['_setAccount',SITEID],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
}
}
}
]);
</script>
It should be OK to place this code just before the </body> tag.

exclude my traffic from google analytics using cookie with subdomain

I got the cookie method of excluding my traffic to work when I didn't specify the domain. Now that I have specified the domain, it no longer works. It appears to be setting two cookies, the exclude.html page I created is setting a cookie of "mydomain.com" and the google analytics is setting a cookie of "www.mydomain.com".
Here is the code for my exclude.html page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exclude Me</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setVar', 'exclude_me']);
_gaq.push(['_setDomainName', 'www.mydomain.com']);
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_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);
})();
</script>
</head>
<body>
<p>
This computer now has a cookie placed on it to exclude it from any Google Analytics reports.</p>
<p>
If you delete your cookies, you will need to revisit/reload this page again.</p>
</body>
</html>
I added the _gaq.push(['_setDomainName', 'www.mydomain.com']); to try and get it to work which doesn't appear to be doing anything. That is the way I have it setup for all the other pages, using the www.mydomain.com.
As I was typing this it appeared to me that the '_gaq.push(['_setDomainName', 'www.mydomain.com']);' should probably be put in before '_gaq.push(['_setVar', 'exclude_me']);' So I switched them around and it is no longer creating two different cookies, so hopefully that works.
When setting a "setDomainName", you should exculde the www from .mydomain.com.
It's also important to notice that (.mydomain.com) and (mydomain.com) are two different domains and hence result two cookies (they are both valid, but you should stick with one of them).

Resources