Blog de Toxicode

When creating your own  HTML5 game, I’m pretty sure you already add the Google Analytics script on your webpage to know how many people are playing your game, and other useful data such as their country of origin, language and which browser they use. Do you know that by using the  Google Analytics API , you can do way more than that ?

We’re bringing you now all the best tips to spy on your players like a real Big Brother. Just read the following article…

What sort of data can I collect ?

Literally anything that your user did that can be given a value as a chain of characters. For example: his current level, number of Game Overs, number of clicks, how long he spent on the tutorial, the level of difficulty, whether the sound was activated or not….

Remember to keep it simple, though. Google Analytics won’t replace your database. For example, it’s not worth saving the whole inventory in a variable, because if you do that, you won’t be able to use filters on your values, as you could do with simple values.

You can also record events (your player winning against a big boss or ending a game, etc.). The Google Analytics website features allow you to visualize statistics of the frequency of these events. You can for example check if adding a new big boss in the game on a specific day increases the number of game overs, or not.

Finally you can segment your players by  giving them specific tags. For example, you can tell Google that a specific player has paid his subscription, has already bought an In-Game content, or is a new player. Or that he hasn’t visited the page for over a month.

By segmenting your players, you can then organize them on the Google Analytics interface. You’ll be able to see what effect adding a new boss had BOTH on newcomers AND on old-time players.

All these tools will help you make your game more fun, more addictive or even more profitable, depending on what you are hoping to achieve.

Let’s get technical

First, you have to know that there are 2 versions of the Google Analytics API: ga.js and analytics.js. The one we are referring to in this article is the second version (and the most recent). It allows you to declare events and variables on the fly, instead of having to declare them from the web interface. It also loads asynchronously.

Here’s an example of script that you can include on your page.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

The first,very condensed part, is a bit like a voodoo made-in-Google spell, that allows you to declare the ga function and start loading the Google Analytics script. Once the script is loaded, it replaces ga but also launches the series of methods that could have been called in the meantime. Anyway, no need to do any callback once the file is loaded, everything is done transparently.

Next, the first line of the second paragraph initializes Google Analytics with your user account (you have to put your ID instead of UA-XXXX-Y, which is only a placeholder). The third parameter, ‘auto’, refers to the parameters that you can give your Tracker Analytics.

For example, you can stop data from being sent if the domain is not the right one (say,  to prevent data being sent on your development server). More information here.

The second line of the second paragraph sends a pageview. This is Google Analytics’  by default function. It can also include a third parameter, to configure the settings for the pageview.

For example, you can use it to override the url you are sending, to know if the player is in your game menu, in the options or the inventory section. Remember to call back this command each time you want to send a pageview value.

Sending events

To send events, just use the send method:

ga('send', 'event', 'playerGotItem', 'diamondSword', 5);

The first  “send” parameter is the same as the pageview sending method. In fact, it’s the name of the method used for all data transfer on your  Analytics Tracker.

The second parameter, “event“, shows that you are sending an event, and not a  pageview, for example.

The third parameter, “playerGotItem” represents in this context the name of the event category. If you are dealing with a game, consider it like the name of the event. You can replace it by any other name you want to choose.

The fourth parameter is generally the name of the event. In the case of a game, it’s more interesting to consider it like a value. In the current example, I’m saying that the player won the diamond sword. This is an optional parameter.

The last parameter is usually the number value of the event. You can use it (or not, since it is optional) to stock additional information. For example, during a Game Over, you can stock the current level of the player. Since it is a number value, it can be used via Google Analytics to make graphs.

Use dimensions to segment your users

To segment your users (say, for example, premium / non premium), the best way is to use dimensions. In your case, it could be premium, non-premium, beginner-user, advanced-user…

For each dimension, define an index from 1 to 20 (or from 1 to 200 if you are a Google Analytics paying member), then declare your dimension using the following script:

ga('set', 'dimension5', 'premium-user);

In this example, you are saying that the user is a premium user, which puts him in dimension 5.

You can then organize your users according to these various criteria in the Google Analytics interface.

That’s all for today, folks. Please feel free to post your tips, questions, corrections or comments.