Using Event Tracking in Google Analytics

Wow my second post I’m on a roll here (not !!!). Well it was a nice fantasy anyway. No one has commented on my first post so it’s looks like I’m getting away with it so far. Let’s see if commenting on Google Analytics (GA) will wake the the flame beast…

So I recently started to look at GA to track events on a website I’m helping out on. It took some effort to get all the accounts set up. I used stack Exchange and Google to help figure out exactly what to do in terms of getting the correct code snippets.

If you don’t use stack exchange then I have to say it is the most awesome site and for those who are too attention challenged to RTFM it is a life saver.

The first thing I did then was to add the following Asynch code snippet to my page to get the GA engine up and running.

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXYYY-Z']); // This is where you put your Analytics Account

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

This alone is enough to get GA up and running and you will see that it starts to generate stats on your account in realtime. Now came the tricky part !!!

I next wanted to make sure that an event is triggered each time a particular advert was displayed by the page. so I wrote some server side code to add to the page the following events.

_gaq.push(['_trackEvent', 'AdvertCategory', 'Specific Ad','logged In']);
_gaq.push(['_trackEvent', 'AdvertCategory2', 'Specific Ad2','not logged in']);

I put these just below the _gaq.push(['_trackPageview']); line so they would be run each time the page loads.

Next came the 72 hour wait for events to start showing up… Not cool Google….

The second part of the problem was to send an event “On Click” the Google docs were pretty clear about how easy it was but I guess i was naive in thinking it would work….

Google Doc’s says add an event tracking on-click using the following code.

_gaq.push(['_trackEvent', category, action, opt_label, opt_value]);

However what they fail to mention is that if you attach it to a link that is to another site (an advertisers site for example) that the event will NOT get processed as it won’t get time. I lost hours here fiddling around and waiting for events to show up.

In reality you need to put a wrapper around the “on-click” event and trigger it followed by a short delay to trigger the link to the external site. Here’s what I used.

function wrapper_function(that,category,action,opt_label,opt_value) {
_gaq.push(['_trackEvent', category, action, opt_label, opt_value]);
window.setTimeout("window.location.href='" + that.href + "'", 1000);

on the link it’s self it’s real easy then just add the following….

<A href="; onclick="wrapper_function(this,'AdvertClicked', 'Advertiser','Logged In');return false;">Insert Advert Image Here

So that’s pretty much it. I hope to check out flash based ad’s next to see if they will respond to this sort of strategy, let’s see !!!

Lastly, A big shout out to the folks that give good answers on the forums. You are cool and the world is a better place for the altruism you display. I hope some day soon my feeble skills will allow me to answer questions and not get down voted as a result (wink)….


My first (lame) blog post

Oh crap !! Now the S.H.Really.H.T.F

I feel like Peter Griffin caught in the head lights.


It has hit home that I actually have to come up with some real meaningful content.

My fantasy first post was a political diatribe that lamented the current state of affairs in [insert country / continent of choice here] and went on to expound some grandiose and completely infallible solution to aforementioned woes that would in theory benefit all in society but 20 years later would be found to enrich only a very small subset. However, even when this became self evident I would still be hero worshipped by the talking heads (on the payroll) as a master of [insert discipline of choice here (economics, law, etc…)] You get the drift, right.

So failing that I’m going to bitch no whine about CSS @media and the poor quality of the CSS books (400 + pages of CSS book and they spend 2 on @media). Here goes !

begin winge:

@media is a reasonable attempt to add the ability to change the way a page displays depending upon the output medium (hats off to the techies…).

Media Type. Description
all all media type devices
aural speech and sound synthesizers
braille braille tactile feedback devices
embossed. paged braille printers
handheld small or handheld devices
print printers
projection projected presentations, like slides
screen computer screens
tty media using a fixed-pitch character grid, like teletypes and terminals
tv television-type devices

In particular it gives us the chance to deal with print formatting for page based media.

[insert link to much more educated post that does this subject justice]

That said it doesn’t really work that way and no one seems to have been able to figure out anything more than the absolute basics (and hence the 2 pages in most books)

The promise of @media and @page. Is that you can do some page layout with “absolute” or “fixed” position elements in CSS. In fact though the output seems to depend upon the length of the html page rather than the rules in CSS.

(For those about to flame we salute you. ……)


Lets say you have a page with a fixed section that you want printed relative to the bottom of a printed page. What seems to happen is that positioning of that element seems to be tied to the end of the previous

rather than the absolute bottom of the printed media page length.

So I tried experimenting with using the different settings but to avail.

To be continued……

end winge:

disclaimer: some required testing was omitted prior to formulating these opinions