Google Analytics Super Proxy : rendre les données de GA publiques

Vous n’avez pas envie de passer par tant de lecture? Ci-dessous ma présentation et mes tests, mon objectif final était avant tout de faire remonter les données d’un objet connecté dans Google Analytics et d’en afficher le résultat sur mon site internet pour que les internautes de passage puisse en profiter.

Comprendre Google Analytics Super Proxy

Pourquoi s’intéresser à Google Analytics Super Proxy? En gros ce qu’il faut retenir c’est que mettre une information public de son compte Google Analytics, aussi simple qu’elle soit par exemple le nombre de visiteurs par jours, et bien c’est très compliqué. En effet Google Analytics nécessite d’avoir un compte Google pour pouvoir accéder aux données, et ce quel que soit le niveau de lecture : lecture seule, modifier, gérer les utilisateurs…

Que permet de faire Google Analytics Super Proxy?

Tout est expliqué dans la vidéo officielle de Google https://www.youtube.com/watch?v=8Or8KIhpsqg&ab_channel=GoogleDevelopers mais en toute franchise je n’ai pas tout bien compris, en gros il y a avant Google Analytics Super Proxy : schema-original-1 et il y a après : a-modifier-final En gros au lieu de faire tout le travail du côté de votre serveur (c’est ce que je comprends du schéma) vous allez utiliser ceux de Google pour faire le travail via Google App Engine.

Qu’est ce que Google App Engine?

Google App Engine est une plateforme d’hébergement d’applications web basée sur les serveurs de Google. Source: Wikipedia. J’ai trouvé très peu d’informations sur Google Analytics Super Proxy en français, mais celle-ci était assez simple et claire : http://startup-metrics.fr/afficher-les-stats-temps-reel-de-google-analytics-sur-une-tv/

Mise en place de Google Analytics Super Proxy

Pour décrire la mise en place de Google Analytics Super Proxy, je vais me baser sur le tutoriel suivant, qui je trouve est bien plus direct que celui officiel de Google. L’auteur est un peu stressé mais au moins tient en moins de 10 minutes : https://www.youtube.com/watch?v=ekUB8K0v88g&ab_channel=SumamaWaheed La première étape consiste à se rendre sur console.developers.google.com où il vous sera demandé d’accepter les CGU du l’utilisation des API de Google. Créez ensuite un projet et appelez le comme bon vous semble.

Screenshot 2015-12-24 at 10.38.35

Cliquez ensuite sur utiliser les API de Google :

Screenshot 2015-12-24 at 10.41.07 Cliquez ensuite sur Analytics API :

Screenshot 2015-12-24 at 10.42.05

Cliquez ensuite sur activer l’API :

Screenshot 2015-12-24 at 10.42.58 En principe un message vous indiquera qu’il faut créer des identifiants pour utiliser l’api : Screenshot 2015-12-24 at 10.48.36 Une fois cela fait il va falloir vous assurer d’avoir le langage de programmation Python d’installer sur votre machine. Vous n’avez pas forcément besoin de connaitre Python pour arriver à bout de ce tutoriel mais savoir déjà ce que c’est peut être confortable. Vous trouverez le site officiel de Python à la page suivante : https://www.python.org/. Il faut au moins la version 2.7 de Python. Une fois cela fait il va vous falloir installer App Engine pour Python sur votre machine pour ce faire rendez-vous à l’url suivante : cloud.google.com/appengine/downloads#Google_App_Engine_SDK_for_Python L’installation est assez simple et bien expliqué, voici les instructions pour Linux, télécharger le fichier .zip. Rendez-vous dans le répertoire de téléchargement et dézippez le en ligne de commande de la manière suivante : unzip google_appengine_1.9.30.zip Deuxième étape entrez la ligne de commande suivante :

export PATH=$PATH:/path/to/google_appengine/

Du coup ça devrait être bon désormais pour Google App Engine. Nous allons maintenant pouvoir passer à l’installation de Google Analytics Super Proxy. 1 – aller chercher l’application sur github https://github.com/googleanalytics/google-analytics-super-proxy et téléchargez le .zip. Vous verrez vous avez un gros bouton Download ZIP sur votre droite : Screenshot 2015-12-24 at 11.36.11 Mettez ensuite le fichier téléchargé sur votre Bureau et dézippez-le. Ouvrez le et double-cliquez sur le répertoire src et modifiez le fichier app.yaml avec un éditeur de texte classique. La première ligne doit être modifiée, de base elle est de type : application: your-application-id, il faut la remplacer par le nom de votre application : Screenshot 2015-12-24 at 11.43.26 dans mon cas : embed-ga-api et sauvegardez le fichier. Modifiez ensuite le fichier config.py en y renseignant votre identifiant OAUTH_CLIENT_ID et  OAUTH_CLIENT_SECRET avec les informations d’identifications que vous trouverez sur le site des API de Google : Screenshot 2015-12-24 at 11.50.59 Ici j’ai volontairement tronqué l’identifiant mais c’est bien celui que vous trouverez en bas à droite pour la clé secrète vous n’aurez qu’à télécharger en cliquant sur le bouton de téléchargement pour l’obtenir. 5 lignes en dessous il vous sera également demandé d’insérer l’adresse de votre application dans mon cas https://embed-ga-api.appspot.com. Vous devez également changer la ligne XSRF settings en y mettant une suite de caractères que vous garderez secret. Une fois cela fait il va vous falloir envoyer sur Google App Engine le programme de Google Analytics Super Proxy, la ligne de commande à suivre est (dans le cas de Linux) : python appcfg.py update chemin-de-votre-fichier.yaml Une fois terminé il vous suffit de lancer le script Python de Google App Engine avec pour fichier de votre configuration de Google Analytics Super Proxy qui correspond au fichier .yaml que vous avez précédemment modifié en gros la requête va donner quelque chose du genre sous Linux : python ./dev_appserver.py google-analytics-super-proxy-master/src/app.yaml Il faut ensuite vous rendre sur votre url de connexion dans mon cas : https://embed-ga-api.appspot.com A cette étape Google vous demandera de valider votre authentification et c’est à ce moment que vous devez retourner dans l’interface en ligne et entrer l’url suivante https://votre-url.appspot.com/admin/auth (une fois validée faites tout de même un F5 pour voir si l’url de redirection est bien enregistrée, j’avais dans mon cas un bug sur Firefox qui m’a rendu fou sous Linux) :

Screenshot 2015-12-24 at 18.43.12

 

Une fois cela fait vous devriez pouvoir accéder à une interface similaire à :

Screenshot 2015-12-26 at 17.41.21

Dans mon cas de figure je souhaite mettre en place un affichage du nombre de personnes présentes physiquement dans la boutique ou j’ai mis en place mon objet connecté. Je vais donc configurer comme il se doit le service https://ga-dev-tools.appspot.com/query-explorer/ :

Screenshot 2015-12-27 at 11.01.44

Pour obtenir une requête de type :
https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A7777777777&start-date=today&end-date=today&metrics=ga%3Ametric3&max-results=1

Que je vais insérer sur le site que j’ai créé https://embed-ga-api.appspot.com/:

Screenshot 2015-12-27 at 11.04.43

On a donc maintenant notre requête qui nous permet automatiquement d’aller chercher le nombre de visiteurs en magasin physique. Il faut donc maintenant arriver à prendre cette donnée et l’afficher sur notre site et que celle-ci se mette à jour automatiquement. Cela va être possible grâce un script qui utilise Ajax et jquery, dans mon cas de figure il va ressembler à :

 <body>
      <div id="load"></div>
  </body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $.ajax({
       url : 'https://embed-ga-api.appspot.com/query?id=ag5lfmVtYmVkLWdhLWFwaXIVCxIIQXBpUXVlcnkYgICAgPjChAkM&format=json', // La ressource ciblée
       type : 'GET', // Le type de la requête HTTP
       dataType : 'jsonp', // Le type de données à recevoir, ici, du JSON. Attention a bien mettre JSONP et non JSON ( permet d'éviter les cross domain errors)
       success : function(msg){ // On récuperre ici la réponse qui est msg, msg est un objet
         var rows = msg.rows; // ici je cherche rows dans l'objet msg.
         var value = rows[0][0]; // rows est un tableau avec un tableau dedans contenant la valeur a récuperer.
         $("#load").html(value); // ici je charge la variable value dans la div loader.
       }
    });
  });
  </script>

Ce script a été réalisé par Clément Van Peuter, compte Twitter : https://twitter.com/ClmtVANPEUTER

Le résultat peut ensuite être intégré où bon vous semble (exemple ici sur mon site) :

Screenshot 2015-12-29 at 12.13.35

il remonte le nombre de fois où j’ai fait réagir mon objet connecté.

Voilà vous disposez désormais de toutes les armes nécessaires pour changer de nombreuses PME 🙂

 

Confidentialité des Données Mentions Légales CGV