Using Google Analytics asynchronous code from external JS file

Asked 16/7, 2010 at 10:16 Answered 8/4, 2018 at 17:15

Solved javascript asynchronous google-analytics unobtrusive-javascript

I'm trying to add the asynchronous version of the Google Analytics tracking code to a website.

I'd like to keep the JavaScript in a separate file, and call it from there.

Here's what I've currently got in my .js file:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function loadtracking() {
    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);
        })();
}

addLoadEvent(loadtracking);

And here's what I've got in the <head> tag of my Master page:

<script type="text/javascript" src="js/google-analytics.js" ></script>

However, there's obviously a problem as after a few days, I'm not getting stats through!

Any ideas what I need to change?

Thanks, Neil

EDIT: Ok... After some feedback below, I'm going to add the new current contents of my .js file. I'll keep it updated so that if/when this gets solved, it will hopefully help other people trying to do similar things.

var _gaq = _gaq || [];

function loadtracking() {
        window._gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
        window._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);
        })();
}

loadtracking();

Jetliner answered 16/7, 2010 at 10:16 Comment(3)

Did this happen to solve your problem? I'm running into the same issue, though I had my var _gaq defined globally in the .js file. Thanks. – Slapup 28/6, 2011 at 12:29

As far as I remember, yes it did. To be honest, for most applications, I'd suggest just following the advice below and putting the code directly in the document... It was a requirement for this specific project that it was in a separate file, which may or may not be the case with you. – Jetliner 28/6, 2011 at 14:1

I've been reading a lot of similar threads on SO and have seen people say there's no issue with it other than a possible slight delay in loading the script, while others have said that it will ruin my life and condemn me to hell. I need it to pass dif values based on the page being viewed, and want to keep code changes in a single file rather than on every page of the website. It appears to be working fine, but if you can remember any issues you ran into, let me know. Appreciate it. – Slapup 28/6, 2011 at 14:7

Your variable definition var _gaq is inside a function. That means it's locally scoped inside that function and won't exist globally. Google Analytics depends on the global variable _gaq. If you want to keep it inside a function like that, reference it as window._gaq.

Sissel answered 17/7, 2010 at 3:59 Comment(2)

THANK YOU I moved var _gaq outside of my function it worked instantly! – Lachrymatory 7/7, 2011 at 18:0

Thanks! This fixed our issue too :) – Refuge 23/8, 2013 at 19:2

You completely miss the point of the asynchronous tracking code. Don't put it in an external file because that's exactly like including the old synchronous GA.

And most importantly don't defer the tracking code to window.onload as it may fire too late.

If you use the asynchronous GA just put it in the top of you document in an inline script tag. This is the recommendation on Google Analytics website as well.

Insert the asynchronous snippet at the bottom of the <head> section of your pages, after any other scripts your page or template might use.

Alpaca answered 16/7, 2010 at 10:28 Comment(4)

I take your point on the AddLoadEvent() code, and I've removed all of the window.onload parts... :) Do you mind if I ask you to go into some more depth on how the external file will make it "exactly like including the old synchronous GA". Why would splitting it into a separate file cause it to execute differently? I have read the recommendation, but I have a need in this project for the GA code to be separate from the master page. – Jetliner 16/7, 2010 at 11:17

The big benefit of having the async tracking is that you can start pushing events into GA before the code has loaded. As soon as your page can start pushing elements into the _gaq array, you can start storing events. On the contrary, when you force the variable outside of your main script, you're forcing the tracking to wait until after your external script has downloaded. That's how it's exactly like the old script. – Distended 17/7, 2010 at 4:23

likewise, forcing your events to wait until the onload function is fired via window.onload <--- will force you to wait even longer... until every image is done downloading; What if some retarded file get's hung up? – Distended 17/7, 2010 at 4:25

Ok, thanks Chase... I've already removed the Window.Onload bits, and I'm now going to try rescoping the _gaq variable like Brian suggests in the other answer. – Jetliner 19/7, 2010 at 10:14

Honestly I have not read through all these posts since they are rather old. However I recently had the need to add Gtag (google tag manager for analytics tracking) to an old website that was a 1000 static HTML files and (LUCKILY) a the html files had a single include js file for the spry menu bar, like i said very old site! For my purposes I wasn't worried about performance but measuring the traffic so we can migrate it. your case may be different but the below code will work for external js includes of Gtag.

I used this file to load the code below since the above code is for legacy ga.js

//Added Google Anyltics Tag Container Tracking - included here to min rebuilding DOM 

function loadGoogleAnalytics(){
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true;
    ga.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X';

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
}

loadGoogleAnalytics(); //Create the script 

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-XXXXXXXXX-1');
//Confirmed with Google tag Assistant

Chalkboard answered 8/4, 2018 at 17:15 Comment(0)

Recommended topics

Hot tags