Google Analytics pour les jeux JavaScript
Lorsque l’on crée son jeu HTML5, on ajoute souvent le script de Google Analytics sur sa page web, afin de savoir combien de personnes jouent à notre jeu, et d’autres infos utiles comme leurs pays, leurs langues et leurs navigateurs. Mais si on utilise l’API Google Analytics, on peut faire bien plus que ça.
Vous aussi, devenez de véritables big brothers grâce à cet article qui vous expliquera toutes les ficelles de l’espionnage de vos joueurs.
Que pouvez-vous enregistrer ?
Virtuellement tout ce pour quoi vous pouvez donner une valeur sous forme de chaîne de caractères à votre utilisateur. Par exemple : le niveau actuel, le nombre de Game Over, le nombre de clics, en combien de temps il passe sur le tutoriel, le niveau de difficulté choisie, est-ce qu’il a désactivé le son…
Cependant, gardez le tout le plus simple possible. Google Analytics ne vient pas remplacer votre base de données, et il n’est pas intéressant de mettre par exemple l’ensemble de l’inventaire dans une variable que vous sauvegarderez. En faisant ça, vous perdrez la possibilité de trier via les valeurs comme vous pourriez le faire avec des valeurs simples.
Il est également possible d’enregistrer des évènements (le joueur bat un boss, finit une partie etc.). Les fonctionnalités du site Google Analytics vous permettront ensuite de visualiser la fréquence des évènements sous forme de statistiques. Vous pourrez ainsi observer si l’ajout d’un nouveau boss dans le jeu le jeudi 30 février augmente le nombre de Game Over, ou autre…
Enfin, vous pouvez segmenter vos joueurs en leur donnant des tags particuliers. Typiquement, vous pouvez ainsi dire à Google que le visiteur a payé son abonnement, a déjà acheté un contenu In-Game, que c’est un nouveau joueur. Ou alors que c’est un joueur qui n’est pas venu depuis plus d’un mois.
Grâce à ces segmentations, vous pourrez ensuite trier les joueurs sur l’interface de Google Analytics. Vous pourrez ainsi voir l’effet de l’ajout de votre nouveau boss sur les nouveaux venus VS sur les joueurs vétérans.
Tout ceci vous permettra de rendre votre jeu plus fun, plus addictif, ou même plus rentable selon vos aspirations personnelles.
Rentrons dans la technique
Avant toute choses, il faut savoir qu’il existe deux versions de l’API Google Analytics : ga.js et analytics.js. La seconde (plus récente) sera utilisée dans cet article.
Elle permet entre autre de déclarer des évènements et variables à la volée (il fallait auparavant les déclarer depuis l’interface web), et se charge de manière asynchrone.
Voici un exemple du script à inclure dans la 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');
La première partie très condensée est un peu de magie vaudou made in Google, qui permet de déclarer la fonction ga, et de commencer à charger le script de Google Analytics. Une fois le script chargé, il remplace ga, tout en lançant la série de méthodes que l’on aurait pu appeler entre temps. De cette façon, il n’y a pas besoin de faire de callback une fois le fichier chargé, tout est transparent.
Ensuite, la première ligne du deuxième bloc initialise l’analytics avec votre compte utilisateur (il faut mettre son identifiant à la place du UA-XXXX-Y qui n’est qu’un placeholder). Le troisième paramètre, ‘auto’, se réfère au paramètres que vous pouvez donner à votre Tracker Analytics.
Par exemple, vous pouvez interdire d’envoyer des données si le domaine n’est pas le bon (pour empêcher d’envoyer des données sur votre serveur de développement par exemple). Plus d’infos sur les possibilités ici. Mais sachez que vous pouvez par exemple y autoriser les envois de données depuis localhost, si vous souhaitez tester le fonctionnement de Google Analytics.
La deuxième ligne du second bloc envoie une page vue. C’est par défaut le seul comportement de Google Analytics. Elle peut également prendre un troisième paramètre, qui configure les propriétés de la page vue.
Vous pouvez l’utiliser par exemple pour overrider l’url que vous envoyez, afin de savoir si le joueur est dans le menu de votre jeu, ou dans les options, ou sur l’inventaire…. Pensez à rappeler cette commande à chaque fois que vous voudrez envoyer une valeur de pageview.
Envoyer des events
Pour envoyer des events, il suffit d’utiliser la méthode send :
ga('send', 'event', 'playerGotItem', 'diamondSword', 5);
Le premier paramètre, « send« , est commun avec la méthode pour envoyer une pageview. C’est en réalité le nom de la méthode commune à tout envoie de donnée sur votre Tracker Analytics.
Le second paramètre, « event« , permet de dire que vous envoyez un évènement, par opposition à une pageview par exemple.
Le troisième paramètre, « playerGotItem » ici, est le nom de la catégorie d’évènement. Dans le cas d’un jeu, considérez le comme le nom de l’event. Sentez vous libre de le remplacer par ce que bon vous semble.
Le quatrième paramètre est normalement le nom de l’event. Dans le cadre d’un jeu, il est plus intéressant de le considérer comme une valeur. Par exemple, je dis ici que le joueur a obtenu l’épée en diamant. Ce paramètre est optionnel.
Enfin, le dernier paramètre est normalement la valeur numérique de l’évènement. Utilisez la (ou non, elle est optionnelle), pour stocker des informations complémentaires. Par exemple, lors d’un Game Over, vous pouvez y stocker le niveau actuel du joueur. L’intérêt est que cette valeur étant numérique, vous pouvez utilisez Google Analytics pour faire des graphs l’utilisant.
Segmentez vos utilisateurs avec les dimensions
Pour segmenter vos utilisateurs (premium / non premiums par exemple), il est d’usage d’utiliser les dimensions. Dans notre cas, ça peut être premium, non-premium, beginner-user, advanced-user…
Vous devez définir pour chaque dimension un index entre 1 et 20 (entre 1 et 200 si vous êtes un utilisateur Google Analytics payant). Vous pouvez ensuite déclarer votre dimension en utilisant :
ga('set', 'dimension5', 'premium-user);
Dans cet exemple, vous dites que l’utilisateur est un utilisateur premium, ce qui le place dans la dimension numéro 5.
Vous pourrez ensuite trier vos utilisateur dans l’interface Google Analytics en fonction de ces différents critères.
C’est tout pour aujourd’hui. N’hésitez pas à poster vos astuces, questions, corrections en commentaire.
Illustrations par Lou Pine (www.loupine.fr)