Afficher les stats « temps réel » de Google Analytics sur une TV

Dans cet article, je vais vous présenter comment afficher sur une TV les statistiques « temps réel » de Google Analytics, sans avoir besoin de connaissances particulières en développement. On utilisera à cette fin la nouvelle API Realtime de Google Analytics, ainsi que Google App Engine et le script Python Google Analytics Super Proxy. On gèrera l’affichage des données avec la librairie Google Charts.

Capture

L’API Realtime de Google Analytics

Des trois API de reporting de Google Analytics, l’API temps réel est certainement la plus rigolote à utiliser pour un affichage public. On pourra y récupérer tout ce qui est visible dans la partie « Temps réel » de Google Analytics (Voir détail ici) :

2

1. Création d’un projet « développeur »

Il suffit de se rendre ici, et de donner un petit nom à notre projet :

1Toujours dans la console développeur, nous allons en profiter pour activer immédiatement l’accès à l’API Google Analytics :

4

2. Accès à la bêta

Et oui, comme beaucoup de projets Google, l’API Realtime est en bêta depuis presque un an… Il faut donc remplir ce questionnaire et attendre quelques heures. Profitons de ce contretemps pour préparer la suite…

Google App Engine

Google Analytics SuperProxy, est prévu pour fonctionner sur App Engine. C’est un service d’hébergement gratuit de Google, assez pratique, qui supporte plusieurs langages (dont PHP, Python et Java).

3. Création d’un compte AppEngine

Il faut se rendre sur AppEngine et y créer une application : https://appengine.google.com/start. En un tour de clic, notre première application « therelatimedemo » est créée. Facile non ?

3

4. Déploiement de Super Proxy

Il s’agit de l’étape la moins drôle, mais ce n’est pas très long, dix minutes tout au plus…

Il nous reste ensuite à se créer un ID OAuth dans la console développeur :

5

Prenez ici bien garde à reporter l’URL de l’application précédemment créée, sans erreur.

6

On va maintenant héberger le script Super Proxy sur App Engine. Pour ce faire, il faut d’abord télécharger les fichiers correspondants sur GitHub :

gitHub-download-button

On dézippe le tout quelque part, puis on édite avec son éditeur de texte préféré les deux fichiers suivants :

/src/app.yaml :

7 /src/config.py :

111C’est fini ! Il ne reste qu’à envoyer les fichiers dans le cloud ! :)

On exécute l’application AppEngine téléchargée tantôt (au premier lancement il faudra lui indiquer le répertoire dans lequel on a installé Python 2.7). Ensuite, il ne nous reste qu’à ajouter notre application.

9Et enfin, à cliquer sur « Deploy »… Les fichiers sont alors envoyés sur les serveurs de Google App Engine.

10PS : on peut aussi utiliser la commande shell « appcfg.py update C:/path » si AppEngine Launcher venait à bugguer (ce qui arrive souvent).

Notre application Super Proxy est fin prête !

Super Proxy

Rendez-vous sur https://therealtimedemo.appspot.com/admin (à remplacer par votre propre URL), pour créer notre première requête ! Laissez-vous guider jusqu’à arriver à cet écran :

5

5. Création des requêtes

Pour notre exemple, nous allons configurer deux requêtes. La première pour reporter le nombre d’utilisateurs présents en temps réel sur le site cible, il faut donc appeler l’API Realtime :

https://www.googleapis.com/analytics/v3/data/realtime?ids=ga%3A20995264&metrics=rt%3AactiveUsers

Ce qui donne ceci, avec un refresh de 15 secondes :

relatimeEt une seconde requête, interrogeant l’API de reporting, afin d’ajouter un petit graphique avec le cumul horaire des utilisateurs de la journée (pas très utile, mais c’est pour l’exemple).

https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A20995264&dimensions=ga%3Ahour&metrics=ga%3Ausers&start-date={today}&end-date={today}

On remarquera la syntaxe propre à SuperProxy {today}/{Ndaysago}, très pratique pour gérer des périodes glissantes. Vous pouvez créer vos requêtes avec l’outil dédié, sauf pour l’API realtime pour laquelle il ne faut pas se tromper de endpoint : « https://www.googleapis.com/analytics/v3/data/realtime ».

6. Vérification de leur bon fonctionnement

Une fois les deux requêtes configurées, on obtient deux sets de données qui se mettent à jour automatiquement dans divers formats. Le tout sans avoir écrit une seule ligne de programmation. :-)

superproxy

Voici le résultat de notre requête realtime au format Json, mise à jour toutes les 15 secondes :

jsonL’interface de SuperProxy peut vous renvoyer des erreurs, mais à partir du moment où vos données Json sont propres, ne vous inquiétez pas. Cela fait quelques temps que l’outil n’a pas subi de mise à jour…

Qu’allons nous faire maintenant de ce Json pour l’exploiter proprement sans tracas ? Pas de panique, Google a presque tout prévu !

Google Charts

Pour chaque requête, SuperProxy fournit une réponse dans un format directement exploitable par Google Chart « DataTable (JSON Response) ». Il suffit donc de copier l’URL directement dans l’exemple fourni par Google :

    google.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
      var chartgraph = new google.visualization.ChartWrapper({
         'containerId': 'graphique',
         // Notre requête :
         'dataSourceUrl': 'https://therealtimedemo.appspot.com/query?id=ahFzfnRoZXJlYWx0aW1lZGVtb3IVCxIIQXBpUXVlcnkYgICAgICAgAoM&format=data-table-response',
         'refreshInterval': 900,
         'chartType': 'ColumnChart',
         'options': {
            'width': 900,
            'height': 200,
         }
       });
      chartgraph.draw();

7. Visualisation des données

On cherche cependant à avoir un rendu un peu plus sympa… Nous avons donc choisi d’afficher un graphique avec Google Chart, et d’afficher la valeur « temps réel » du nombre d’utilisateur directement avec jQuery. Dans les deux cas, l’exploitation du Json reste très simple. Vous n’avez qu’à télécharger et exploiter le fichier fourni pour vous en convaincre.

dlsDemo temps réel

Afficher cette page web sur une TV est ensuite à portée de main, soit en intervenant manuellement, soit en configurant une app sur la machine qui ouvrira automatiquement une webview au démarrage.

SuperProxy fonctionne avec toutes les API Google Analytics. Vous trouverez dont peut-être d’autres usages possibles de cet outil, par exemple pour créer un mini tableau de bord facile à maintenir, sans avoir besoin de programmer.

Nous verrons dans un prochain article comment réaliser la même chose plus proprement avec PHP/MySQL et des requêtes Ajax.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *