Using Google Analytics asynchronous code from external JS file

javascript asynchronous google-analytics unobtrusive-javascript
NeilD picture NeilD · Jul 16, 2010 · Viewed 24.2k times · Source

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();

Answer

Brian picture Brian · Jul 17, 2010

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.

Related questions

Which browsers support <script async="async" />?

On December 1, 2009, Google announced support for asynchronous Google Analytics tracking. The asynchronous tracking is achieved using the async directive for the <script> tag. Which browsers support the async directive (<script async="async" />) and since which version?

Read More
How do I return the response from an asynchronous call?

I have a function foo which makes an asynchronous request. How can I return the response/result from foo? I tried returning the value from the callback, as well as assigning the result to a local variable inside the function …

Read More
How can I upload files asynchronously?

I would like to upload a file asynchronously with jQuery. Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

Read More