It's taken me a day to work out how to do this. I've always relied on someone else to set up GA, and I'm new to JS, so I ran into a few issues not covered by the above link. So to save someone else having the same problems, here's what I learnt. Long winded I know... but it’s what I could have done with giving my ignorance when I started out...
Firstly you need to set yourself up with a Google Analytics. Head to
http://www.google.com/analytics/ and log in (easy if you have a GMail / Google account...).
Then you need to create a GA account for your website. You should be prompted to do this if you don't already have any sites being tracked, or you can hit the 'admin' button in the top right, then 'new account'.
Currently it's asking me if I want to choose 'universal analytics' which is in beta, or 'classic analytics'. I went for the default 'classic' as I had enough issues without going all beta...
Then fill in all the details it asks for. The only one that might be tricky is the Web Site URL. This needs to be what you see in the address bar on your site. I’ve read about people having issues with www. vs naked domains and that stopping things working.
Aside: My first problem was I was just working off MAMP on localhost. Turns out Google wants you to have a real website to track... OK fair enough... but... how do I test this out before pushing live? Still not worked that one out... Anyway I got myself a free Amazon S3 account, and a cheap .co.uk URL and then got back to trying GA.
So once your account is setup you can go into the admin area (button on top right), into the account you just created, and select the ‘tracking info’ tab. It will say ‘status: tracking not installed (followed by lots of options... which I’ve so far ignored). The bit you need is the tracking code. This is some template code, with your unique tracking code included. You need to put this code in your HTML file just before closing the <HEAD> tag. (You may see some references to it going in the <BODY> area, but this seems to be for the old version of analytics, before it went all async.)
What this code is doing is basically simple... but it manages to obscure itself rather well. The first part:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39537984-1']);
_gaq.push(['_trackPageview']);
This inits the Google Analytics Queue (GAQ), then sets the account details, then tracks that the page has been viewed.
Then there’s some complicated re-writing of the HTML document...
(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);
})();
Basically this adds:
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
Into your HTML file. The clever bit is that is detects if you’re on HTTPS and adds
https://ssl instead of
http://www. in the include. If you use Chrome, do Inspect Element to bring up the dev tools on your page and go to the Eleents tab you’ll see that the above script include has magically appeared in your file (note: you won’t see it in ‘view source’, it has to be in developer tools).
So once you’ve added it to your HTML and uploaded to your server you’ll want to test it. I suggest you start by using the GA debugger for Chrome:
https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en Install this, turn it on, load your site, and view the console of the developer tools and you should see reassuring lines like:
_gaq.push processing "_setAccount" for args: "[UA-39537984-1]": ga_debug.js:25
_gaq.push processing "_trackPageview" for args: "[]": ga_debug.js:25
Track Pageview
Tracking beacon sent!
utmwv=5.4.0d&utms=1&utmn.........................................................
If you’re working off localhost, you won’t see the ‘tracking beacon sent’ bit.
Now you want to check that GA can see what you’re sending. This is very annoying, especially if you don’t know it’s going to be annoying. So: back to the GA page, admin button, ‘tracking info’ area we were at earlier. It will still say ‘status: tracking not installed’, despite saying it has checked since you put the tracking code on your site. It will lie about the tracking code not being installed for at least an hour, which is the really annoying part.
Eventually it will say ‘status: receiving data’. However it will say nobody has visited your site, despite you having tested it. This is also very annoying. Basically it takes up to a day for visits and events to actually appear. Fair enough for a free service... but it does make it very slow to check things are working when you have to wait a day to see if your changes took effect.
So... eventually you should see that you’ve plugged in GA to your site. W00t. Time to add it to your ImpactJS game.
All you have to do is access that _gaq (Google Analytics Queue) and add your events to it, just like the link in the above post says. The _gaq lives at the global scope, so you can access it using ig.global, so you can add the following to your main.js:
ig.global._gaq.push(['_trackEvent', 'Game', 'Start']);
If you’re coding defensively you should probably check it’s init’d like the code snippet does... but I’m just trying to get things working so the above worked for my needs.
Now if you check the GA debugger output in console you should see your event being sent:
_gaq.push processing "_trackEvent" for args: "[Game,Start]": ga_debug.js:25
Track Event ga_debug.js:25
Tracking beacon sent!
utmwv=5.4.0d&utms=2&utmn=......................
(Remember the ‘beacon sent’ bit won’t show if you’re on localhost.)
Then wait a day or so and check the content->events area of the account in GA to see your events. This is currently where I am... so there might be a post tomorrow saying ‘hang on... it didn’t work for me...’ but as the debugger is showing the events being sent I’m kinda hopeful I won’t need to do that. (Famous last words...?)
Right - hope that’s useful to someone. If not... well it helped clarify in my mind what I’d done :)
