How to debug Google Analytics Tracking error (_gaq.push returns '3')

Question

SUMMARIZE:

I misunderstood the usage of content script. And that leads to this issue. Here is a quote from Google's official doc:

Execution environment

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

More details: Content Script tracking with Google Analytics

--

I am adding some tracking code into a Chrome Extension. But when I test it, the _gaq.push returns number 3. As I tested, I figured that if I call _gaq.push in the extension, the number will keep rising. But when I call it in the console, it's all fine (all the same code).

I am wondering how I can do to track deeper into this error?

Thanks very much for every answer!

UPDATE:

When I trace the return value of _gaq, it is still an array. That means ga.js is not loaded, right?

But it seems ga.js is never loaded in my script. Unless I manually type _gaq in the console, it's an object. This is very weird.

I checked the DOM and found that tag is already added.

I reviewed the Network panel, find that ga.js is not loaded at all in the queue. But why I can still use console to access the _gaq object?

UPDATE2:

I use console.log to track the value of "window._gaq" and found that the return value of console.log(window._gaq) is DIFFERENT than directly type "window._gaq" in the console. It's totally two different objects. I even use a setInterval function to log the results and it's keeping returning the array, not the expected object.

Answer 1

When ran through your script _gaq is jut a regular Array. And just like any Array in JavaScript it has the method push that inserts one or more elements into the Array and returns the final length of the array.

eg:

var _gaq = [];
> undefined
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
> 1
_gaq.push(['_setDomainName', 'mysite.com']);
> 2
_gaq.push(['_trackPageview'], 
          ['_trackEvent', 'cat', 'act']);
> 4

After the ga.js file is loaded the _gaq Array is read so the instructions pushed into it can be processed and then the _gaq Array is replaced with an object. The object implements the push function as well. But notice that in this case the push function will execute an instruction into the ga.js library and then return 0.

eg:

var _gaq = {
  push: function(){
    // Do something here
    return 0;
  }
};
> undefined
_gaq.push(['_trackPageview'])
> 0

That's a very smart Google design to create an API that can be used even before the library (ga.js) has been loaded.

That's why during your script _gaq.push is a method of the Array class and return increasing numbers and on the console it always returns 0.

This is not a problem at all. It seems to be working as intended.

UPDATE

It seems that ga.js is already loaded. Maybe it was cached and not showing on the network panel.

ga.js is loaded by this part of the tracking script:

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

It is loaded asynchronously. So after this snippet is executed it will be loaded but the exact point where it is loaded is unknown.

If you need to know when the ga.js file is loaded, you can push a callback into _gaq and it will be executed when the ga.js file is loaded.

eg:

_gaq.push(function(){
  console.log('ga.js loaded!');
  debugger;
});