Custom events does not appear even if the are sent - google-analytics

Question

On pageload does I load google analytics through he following code snippet:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-XXXXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}
</script>
And I use the following code to fire an event (after page load):
_gaq.push(['_trackEvent', 'test category', 'test action']);
Standard information get tracked, but NO CUSTOM EVENTS. I know all events get sent to Google Analytics because each time an event if fired, does an HTTP GET request get sent to the following url:
http://www.google-analytics.com/__utm.gif?.....more data here
What does I need to do to get custom events in google analytics to work?
Thanks in advance.

Answer 1

It seems you are running an old, "traditional", implementation of your Google Analytics.
I would strongly suggest that you upgrade to atleast the asynchronous snippet, where the syntax for _gaq.push is supported. As it stands now, you are trying to push an event using the new syntax into an old implementation which uses another syntax.
The differences between the two are detailed here: https://developers.google.com/analytics/devguides/collection/gajs/asyncMigrationExamples
In short, you are using a syntax for gat/pageTracker, where the newer asynchronous one uses gaq.
Please review this code that I have copied from above link:
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
...
<a onclick="_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value]);">click me</a>
To what you are using now, the older syntax:
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
...
<a onclick="pageTracker._trackEvent('category', 'action', 'opt_label', opt_value);">click me</a>
As you can see, you are trying to send an event to the old ga.js using new ga.js syntax. I would highly recommend using the newer ga.js which loads asynchronously. By asynchronously, it means that the javascript loads while the webpage is loading, which the old ga.js does not.
This is an example implementation of the newer ga.js, and it should be implemented right before closing </head>:
<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>
If you implement the above suggestion, then you are using the newer ga.js and the _gaq.push-syntax should work. Try it out!
And if you do not know what the asynchronous part means, a brief explanation:
The latest version of the Analytics tracking code offers an improved way to track website visitors with Google Analytics. It takes advantage of browser support for asynchronous JavaScript to enhance the speed in which the tracking code is loaded. With the latest version of the tracking code, you can also place the Analytics snippet higher in the page without delaying subsequent content from rendering.
It continues to load other elements of your webpage aside from eachother, instead of waiting for 1 to finish before loading 2, then 3, etc.