CODEWITHSUNDEEP
javaperformancegoogle-analytics
NewUser
NewUser

Reputation: 295

Defer loading of Google Analytics Javascript Code and hosting analytics.js on own Server

The below code is what Google recommends. I placed the code in my footer.php just before the </body> tag (near the bottom of the file) to defer call defer-loading.js and than load my self hosted analytics.js code (myga.js file).

This code says wait for the entire document to load, then load the external file "defer-loading.js" 

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "/defer-loading.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

In the defer-loading.js file i placed the following NEW Google Analytics Tracking Code - also called Universal Analytics: (i replaced my id number and domain name for this question)

(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','http://mydomainname.com/myga.js','ga');

ga('create', 'Uxxx-xx-xxx', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');

Additional note: To keep the myga.js (analytics.js) code updated i use a daily cron on my server. It downloads the analytics.js from Google and replaces the old one on my server. This part works fine. Here you can find the tutorial - How do we update the script

Unfortunately the NEW Google Universal Tracking Code in my defer-loading.js file does not track the visits!

To find the error i used the following OLD Google Analytics Tracking code in defer-loading.js and it works fine:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'Uxxx-xx-xxx']);
_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') + '.mydomainname.com/myga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

With firebug i realized that the following file (1px/1px) only loads with the OLD (working) Google Analytics Code version. The NEW Code does not load this file - but everything else seems ok.

http://www.google-analytics.com/r/__utm.gif?................

Any idea why the NEW Google Analytics Universal Tracking Code does not work?

Upvotes: 2

Views: 11074

Answers (1)

Luti
Luti

Reputation: 86

Here is the solution:

https://github.com/danielstjules/defer-analytics

(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();
    i.initAnalytics = function() {
        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-000000-0');
ga('send', 'pageview');

function atOnload() {
    initAnalytics();
}
if (window.addEventListener) window.addEventListener("load", atOnload, false);
else if (window.attachEvent) window.attachEvent("onload", atOnload);
else window.onload = atOnload;

Upvotes: 7

Related Questions