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.
Related
This is my GA Code:
<script type="text/javascript">
var _gaq = _gaq || [];
_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>
This code reports to GA Event tracking:
<li>Get Started</li>
But this code doesn't:
<li>Get Started</li>
Any idea what I'm doing wrong?
It's not that the GA tracking isn't firing, but that the data isn't being recorded.
_trackEvent records data by requesting a tracking pixel from analytics servers. Because the link visits a new page right after the _trackEvent call, the tracking pixel request can get canceled, resulting in no data being recorded.
The most common pattern is to add a slight delay (150ms works) before following the link to the new page. Do a search for "_trackEvent delay"
I fixed the issue.
I created this function with a small delay:
<script type="text/javascript">
function trackOutboundLink(link, category, action) {
try {
_gaq.push(['_trackEvent', category , action]);
} catch(err){}
setTimeout(function() {
document.location.href = link.href;
}, 100);
}
</script>
And I call the links like this:
<a href="http://www.example.com" onClick="trackOutboundLink(this, 'Outbound Links', 'example.com'); return false;">
Works like a charm
here your answer from ga team!
I've modified this to get a more easy way:
trackBeforeHref : function(element, category, event, label) {
ga('send', 'event', category, event, label, {'hitCallback':
function () {
document.location = element.href;
}
});
},
then you can use in this way:
<a onclick="trackBeforeHref(this, 'a category', 'a event', 'a label'); return false;"> </a>
Taking advantage of the facts that
_gaq executes the tasks pushed sequentially.
functions can be pushed into _gaq : link to google developers article
so the solution to the problem is
$("a").on("click", function(){
// stop opening the link using return false at end of this event callback function
var href = $(this).attr("href");
// pushing the track event task first and the call to open the href link so that both these tasks happen sequencially.
_gaq.push(['_trackEvent', 'click', 'some_link' ], function(){
window.location = href;
});
return false;
});
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>
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>
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']);
I have been trying to setup a custom variable for the past few days and it hasn't been working.
My Google tracking code is part of a master page (asp.net concept) so I can't set the custom variable inside the second script block labeled "Async Google Code" because it is shared by many other sections.
Below is my code and the order it appears in my page. Is there any way I can set it outside the "Async Google Code" script?
<head>
<!-- Setting Custom Var -->
<script type="text/javascript">
$(function () {
_gaq.push(['_setCustomVar', 1, 'Account', 'UserType', 2]);
}
</script>
<!-- Async Google Code -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-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>
wrap your custom variable stuff in a function to be called and insert a call to that function between the var _gaq... and _trackPageview lines in the bottom piece.
Your "setting custom var" code is missing an end bracket.
You need to set the custom variable before track pageview. You have the custom var in the jQuery document ready shortcut, making it so that it happens after the trackpageview.