I am using the recommended implementation of the tracking code.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-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>
I often get this wait on load of my web pages as "waiting for www.google-analytics.com". Initially I thought it was my office firewall, but I guess it is common issue. search
My bigger concern is all the scripts on my page stop execution during this wait... which never goes away. How to fix this ?
I thought async means it will not interfere with other scripts on page.
The solution
Since you are using Jquery, wrap the google analytics code in a jQuery's window load handler:
$(window).load(function(){
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-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);
})();
});
The explanation
In a comment, you pointed out that you use http://supersimpleslider.com/ and that it would not work as long as google analytics was hanging. A look at the source of that library shows this at line 86:
$(window).load(function() {
I decided to test event firing by simulating a hanging resource.
ga.php
<?php
sleep(5);
exit('content.log("ga.php available")');
?>
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
console.log('window-load');
}, false);
window.addEventListener('DOMContentLoaded', function(){
console.log('window-DOMContentLoaded');
}, false);
</script>
<script type="text/javascript">
$(window).load(function() {
console.log('window-jquery-load');
});
$(window).ready(function() {
console.log('window-jquery-ready');
});
</script>
<script type="text/javascript">
document.addEventListener('load', function(){
console.log('document-load');
}, false);
document.addEventListener('DOMContentLoaded', function(){
console.log('document-DOMContentLoaded');
}, false);
</script>
<script type="text/javascript">
$(document).load(function() {
console.log('document-jquery-load');
});
$(document).ready(function() {
console.log('document-jquery-ready');
});
</script>
<script type="text/javascript">
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'ga.php';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Console output
16:21:19.123 window-jquery-ready
16:21:19.124 document-jquery-ready
16:21:19.125 document-DOMContentLoaded
16:21:19.126 window-DOMContentLoaded
16:21:24.092 ga.php available
16:21:24.095 window-load
16:21:24.096 window-jquery-load
Conclusion
native DOMContentLoaded is not affected by hanging resources.
jQuery's ready is not affected by hanging resources.
window load will wait for all resources to complete.
document load will never fire (could be browser dependent though)
Since supersimpleslider is waiting for a load event on window, a hanging ga.js will impact its execution. This might also be the case for other scripts.
By inserting google analytics only at window load, we put all the scripts on the same level.
Console output after window load wrapping:
16:47:27.035 window-jquery-ready
16:47:27.036 document-jquery-ready
16:47:27.036 document-DOMContentLoaded
16:47:27.037 window-DOMContentLoaded
16:47:27.043 window-load
16:47:27.044 window-jquery-load
16:47:32.052 ga.php available
there are two ways I know of for running non blocking js:
1- put your script tag before the closing tag of body
2- add 'async' attribute to the script, the end result will look like, note that this is for remote file inclusions:
<script src="script.js" async></script>
and the is the async you are finding in ga.aync=true, it prevents the blocking of the page rendering until the file is loaded, but it has no effect of what happens after the code is run, so, in other words, the created script tag (by running that code' allows the browser to do its job even while the file is being downloaded.
the code you provided, merely, creates a script tag to include ga.js before the first script tag in the page(which will be in the head normally).
so with that out of the way, the only option left is to run your script before the closing tag of the body, so that it runs after the page is parsed.
On another note, my advice to you is to learn about something called 'critical rendering path' of the browser, it explains why some stuff are blocking and best practices for using external files on your pages.
I hope this helped
Related
i would to use fastest asynchronous google analytics snippet, but i'm not a good programmer and so i don't know what is the best:
A)
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference#async-snippet-minified
B)
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
</script>
About these codes i would like to know if is a problem to put the code inside not <script> but inside <script type="text/javascript"> and if is a problem to put not before </head> (like suggested for "normal" snippet)
I hope you can help me and sorry for my english :) Thanks a lot!
The would guess the first one. It uses async and doesn't depend on DOM modification while loading the page.
For HTML5, it does not matter if you use <script> or <script type="text/javascript">.
As for where to put in your code, normally javascript should be at the bottom of the page after all of your css/html has loaded. Javascript is loaded synchronously, so each file load will stop the rest of the page from loading until that specific file is fully loaded. The async tag is not fully supported by all browsers, so I would not rely on that. Instead, you should use an asynchronous loader (like requirejs or LAB.js).
As for where you should put the google analytics script, in my experience it doesn't matter too much. It sounds like you're prematurely optimizing -- https://stackoverflow.com/a/385529/5780021. Per google's instructions, I believe it's supposed to go in the header in order to improve their statistics around page load speeds.
I have a CMS application that universally loads google analytics code. It looks like this & is dynamically loaded in the <head> tag on each of my clients sites.
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000-1']);
_gaq.push(['_setDomainName', 'example.com']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setCustomVar', 1, 'Product','my-application',3]);
_gaq.push(['_setCustomVar', 2, 'Sport','hockey',3]);
_gaq.push(['_setCustomVar', 3, 'SiteID','121',3]);
_gaq.push(['_setCustomVar', 4, 'State','MN',3]);
_gaq.push(['_setCustomVar', 5, 'DMA','',3]);
(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>
My client has implemented Google Tag Manager code just below the opening <body> tag (it looks like this)
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-O8EFGG"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-O8EFGG');
</script>
I am under the impression that my application code will not conflict with the GTM code & vice verse. I want to confirm but haven't been able to dig up information on weather or not these can co-exist or if I need to migrate my UA code into my own GTM code.
Can someone confirm my assumptions are correct, that both the GTM code and the UA codes can run without conflicts?
The code shouldn't conflict. However, the tracking results in Google Analytics will be extremely inaccurate unless you're careful not to double-track your page views or events or by sending the data collected by each method to two separate GA accounts.
I have a login screen that I would like to have startup as soon as possible. I am not using jQuery on that screen and I only have a startup.css file that I need.
On the second screen I need the jQuery and the additional CSS.
I am looking at the following. Would doing something like this be a good way to delay the loading of the jQuery and CSS from slowing up the loading of the first page? Is there another alternative to this using "modern" browsers ?
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxx']);
_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>
Quite simple I guess. On your second screen HTML file :
<link rel="stylesheet" type="text/css" media="all" href="secondCSS.css" />
<script type='text/javascript' src='secondScript.js'></script>
However, I don't think that's a good idea. It means the user gonna need to download more files than needed.
I'm trying to track download clicks with Google Analytics but nothing shows up in my statistics. (I've waited 4 days) This is my code:
HTML:
<a onclick="javascript: pageTracker._trackPageview ('/download/version/black');" href="http://www.example.com/example.zip" target="_blank">link text</a>
Google Analytics:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11111111-1']);
_gaq.push(['_setDomainName', 'example.com']);
_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>
Why is it not working?
Thanks.
Uli
You should use GA events for this.
Check the docs for the _trackEvent method.
You have to push your tracking events to the globally available array:
<a onclick="javascript:_gaq.push(['_trackPageview', '/download/version/black']);" href="http://www.example.com/example.zip" target="_blank">link text</a>
I think you are mixing two versions of the tracking API together..
Thanks!
you're loading the async GA but trying to run the old urchin API.
download
should work just fine
I have used the "Better Google Analytics JavaScript that doesn’t block page downloading" to load Google Analytics dynamically so that it will not block HTML / page rendering.
However, it appears occassionaly that my HTML page will block rendering on the Firefox 3.0 (WinXP) status message states:
"Transferring data from www.google-analytics.com"
Any ideas on how to load the Google Analytics JavaScript in a way in which it will not block HTML/page rending?
You could use Google Analytics [asynchronous loading of tracking codes][1]. The following snippet should help:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-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>
Put the Google Analytics code as the last thing before the </body> tag, like Google recommends?
You may be seeing this bug. Before 3.6, FF sometimes incorrectly blamed google analytics for slowing down the page...
https://bugzilla.mozilla.org/show_bug.cgi?id=487638
But it at the bottom (just before the </body>) and delay it:
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript">
if (typeof(_gat)=='object')
setTimeout(function(){
_gat._getTracker("UA-1234567-8")._trackPageview()}, 1500);
</script>
Have a look at my explanation about why I think this is the "best way to integrate analytics".
The DEFER attribute may work for you
<script DEFER type="text/javascript" src="http://www.google-analytics.com/ga.js">
<script DEFER type="text/javascript">... tracker code ...</script>