GA event tracking on link only fires when href='#' - google-analytics

Question

This is my GA Code:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-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>
This code reports to GA Event tracking:
<li>Get Started</li>
But this code doesn't:
<li>Get Started</li>
Any idea what I'm doing wrong?

Answer 1

It's not that the GA tracking isn't firing, but that the data isn't being recorded.
_trackEvent records data by requesting a tracking pixel from analytics servers. Because the link visits a new page right after the _trackEvent call, the tracking pixel request can get canceled, resulting in no data being recorded.
The most common pattern is to add a slight delay (150ms works) before following the link to the new page. Do a search for "_trackEvent delay"

Answer 2

I fixed the issue.
I created this function with a small delay:
<script type="text/javascript">
function trackOutboundLink(link, category, action) {
try {
_gaq.push(['_trackEvent', category , action]);
} catch(err){}
setTimeout(function() {
document.location.href = link.href;
}, 100);
}
</script>
And I call the links like this:
<a href="http://www.example.com" onClick="trackOutboundLink(this, 'Outbound Links', 'example.com'); return false;">
Works like a charm

Answer 3

here your answer from ga team!
I've modified this to get a more easy way:
trackBeforeHref : function(element, category, event, label) {
ga('send', 'event', category, event, label, {'hitCallback':
function () {
document.location = element.href;
}
});
},
then you can use in this way:
<a onclick="trackBeforeHref(this, 'a category', 'a event', 'a label'); return false;"> </a>

Answer 4

Taking advantage of the facts that
_gaq executes the tasks pushed sequentially.
functions can be pushed into _gaq : link to google developers article
so the solution to the problem is
$("a").on("click", function(){
// stop opening the link using return false at end of this event callback function
var href = $(this).attr("href");
// pushing the track event task first and the call to open the href link so that both these tasks happen sequencially.
_gaq.push(['_trackEvent', 'click', 'some_link' ], function(){
window.location = href;
});
return false;
});