Google Analytics Embed API : créer un tableau de bord HTML en 10 minutes

Google vient de dévoiler une nouvelle API qui facilite énormément la réalisation de tableaux de bords personnalisés. The « Embed API » (c’est son nom), permet de reproduire l’apparence de Google Analytics dans un tableau de bord HTML, en quelques minutes !

A la fin de ce tuto, je vous offre un template clef en main, « l’OpenBoard » qui utilise l’API de reporting ainsi que l’API realtime… Grâce à « Embed API ». :)

5464

Un premier tableau de bord en 10 minutes

On se contente ici de suivre les instructions données par Google himself.. Il y a deux étapes seulement.

1. Génération d’un Client ID dans la console développeur

Rendez-vous d’abord dans la console développeur pour y créer un nouveau projet.

1Ensuite, permettre l’accès à l’API « Analytics » pour votre projet (en passant son statut de « off » à « on » dans la rubrique « APIs ») :

2

Enfin, générer le fameux « Client ID » (l’API Analytics ne fonctionne qu’avec l’authentification OAuth) à partir de la rubrique « Credidentials » :

3

Soyez vigilants en renseignant les adresses autorisées : il faut indiquer ici les URL à partir desquelles seront exécutés les scripts. Il est possible d’en mettre plusieurs.

Dans mon cas, il s’agit tout simplement de localhost :

4

2. Création du premier tableau de bord

Reste alors à copier le code fourni par Google dans une page HTML vierge, et à remplacer à la ligne 34 la valeur du « CLIENT_ID » par celle que vous venez de générer un peu plus tôt.

Après authentification, vous avez alors accès à un premier graphique fonctionnel et il est facile d’en ajouter quelques autres :

6

Un modèle de tableau de bord : l’OpenBoard

A partir de là, vous pouvez enrichir l’exemple donné par Google pour construire votre propre tableau de bord, adapté à vos besoins.

Pour l’exemple, je vous propose un tableau de bord rudimentaire, incluant différentes possibilités… Dont l’utilisation de l’API realtime ! Enjoy ! 😉

dls

Pour construire vos requêtes, référez vous aux documentations des différentes APIs et à l’outil mis à disposition par Google.

Un problème, une question ? Demandez moi ! :)

18 Responses

  1. Bonjour,

    Je viens d’essayer de suivre les instructions de votre article, mais, j’obtiens une erreur 401 avec les informations suivantes:
    Request Details

    =
    scope=https://www.googleapis.com/auth/analytics.readonly https://www.googleapis.com/auth/userinfo.email
    response_type=code token id_token gsession
    redirect_uri=postmessage
    cookie_policy=single_host_origin
    proxy=oauth2relay1968888040
    state=282380527|0.3176310515
    origin=http://localhost
    include_granted_scopes=true
    client_id=382170816047-

    Avez-vous une idée de l’origine du problème?

    Cordialement,

    Philippe MESLIN

    1. Bonjour, et merci pour votre retour.
      Je pense qu’il s’agit simplement d’une erreur de redirection sur cet écran :
      Image

      Si vous indiquez Locahost, il faut bien utiliser Wamp ou autre serveur Apache local et y mettre le script à la racine. Si la tableau de bord se situe dans un dossier, il faut bien pointer dessus.
      J’espère que vous résoudrez ce problème facilement ! Le plus fatiguant avec les API Google c’est l’authentification OAuth. :)

  2. Bonjour et merci pour cet article.

    C’est possible de faire la meme chose sans que l’internaute soit loggué sous son compte gmail ? afficher des graphique de stats de manière public d’un site ? quitte à se logguer de manière invisible en php à mon compte gmail pour autoriser cet affichage.

    1. Oui, c’est possible, mais plus complexe. Je voulais faire un autre article à ce sujet !

      Globalement il y a deux méthodes :
      1/ Requêter l’API en php ou autre langage serveur avec un token valide et servir les données de manière transparente au visiteur : https://developers.google.com/analytics/devguides/reporting/core/v3/coreDevguide
      2/ Utiliser l’astuce un peu désuète mais facile à déployer de passer par Google Analytics Super Proxy (appli Python sur AppEngine) : http://startup-metrics.fr/afficher-les-stats-temps-reel-de-google-analytics-sur-une-tv/

  3. Bonjour,
    est-il possible de paramétrer une vue par défaut?

    Merci d’avance
    Mathieu

    1. Bonjour,

      Il est très simple de ruser pour faire cela :

      Astuce 1 : ne pas afficher le container « view-selector » et forcer le comte voulu dans la variable « newIds ». Partant de cette astuce, vous pouvez même recréer un sélecteur contenant uniquement les vues GA souhaités, en mettant à jour la variable à chaque changement du sélecteur. :) J’espère que mon explication est compréhensible…

      Astuce 2 : les comptes étant listés de base par ordre alphabétique, les renommer permet d’en mettre facilement un en premier. ^^

      1. Bonjour, merci pour votre réponse, malheureusement, je ne vois pas quelle ligne changer.

        viewSelector.on(‘change’, function(ids) {
        var newIds = {
        query: {
        ids: ids
        }
        }

        Dois-je mettre mon id à la place de ids?

        Merci d’avance
        Mathieu.

      2. Il faudrait que je teste, mais il est très probable que vous puissiez faire :


        // Step 5: Hook up the components to work together.
        gapi.analytics.auth.on('success', function(response) {
        document.getElementById('overlay').style.display = "none";
        document.getElementById('gaarrow').style.display = "none";
        weeklyday.execute(); // plus besoin de faire appel à view selector
        });

        // Step 5: Create the charts...
        var dailydau = new gapi.analytics.googleCharts.DataChart({
        reportType: 'ga',
        query: {
        'ids' : 'ga:XXXXX', // votre ID de vue GOOGLE ANALYTICS
        'dimensions': 'ga:date',
        'metrics': 'ga:users',
        'start-date': '14daysAgo',
        'end-date': 'yesterday',
        },
        chart: {
        type: 'LINE',
        container: 'dailydau',
        options: {
        'backgroundColor' : 'none',
        'colors' : ['#ebaf0f'],
        'width': 400,
        'height': 200,
        }
        }
        });

        Au lieu de :

        // Step 5: Hook up the components to work together.
        gapi.analytics.auth.on('success', function(response) {
        document.getElementById('overlay').style.display = "none";
        document.getElementById('gaarrow').style.display = "none";
        viewSelector.execute();
        });

        viewSelector.on('change', function(ids) {
        var newIds = {
        query: {
        ids: ids
        }
        }
        dailydau.set(newIds).execute();
        weeklyday.set(newIds).execute();
        rtactiveusers.set(newIds).execute();
        geography.set(newIds).execute();
        });

        // Step 5: Create the charts...
        var dailydau = new gapi.analytics.googleCharts.DataChart({
        reportType: 'ga',
        query: {
        'dimensions': 'ga:date',
        'metrics': 'ga:users',
        'start-date': '14daysAgo',
        'end-date': 'yesterday',
        },
        chart: {
        type: 'LINE',
        container: 'dailydau',
        options: {
        'backgroundColor' : 'none',
        'colors' : ['#ebaf0f'],
        'width': 400,
        'height': 200,
        }
        }
        });

      3. Je viens de faire le test et cela ne fonctionne pas.

        // Step 2: Load the library.
        (function(doc, s, js, fjs) {
        js = doc.createElement(s), fjs = doc.getElementsByTagName(s)[0];
        js.src = ‘https://apis.google.com/js/platform.js’;
        fjs.parentNode.insertBefore(js, fjs);
        js.onload = function() {
        gapi.load(‘analytics’, embedApiLoadCallback);
        }
        }(document, ‘script’));

        function embedApiLoadCallback() {
        // Step 3: Authorize the user.
        var CLIENT_ID = ‘382213816047-mqeo3dsnic0kl1r47sucvi9pk3ijpnog.apps.googleusercontent.com’;
        gapi.analytics.auth.authorize({
        container: ‘auth-button’,
        clientid: CLIENT_ID ,
        });

        // Step 5: Hook up the components to work together.
        gapi.analytics.auth.on(‘success’, function(response) {
        document.getElementById(‘overlay’).style.display = « none »;
        document.getElementById(‘gaarrow’).style.display = « none »;
        weeklyday.execute(); // plus besoin de faire appel à view selector
        });

        // Step 5: Create the charts…
        var monthTime = new gapi.analytics.googleCharts.DataChart({
        reportType: ‘ga’,
        query: {
        ‘ids’ : ‘ga:12218253’, // votre ID de vue GOOGLE ANALYTICS
        ‘dimensions’: ‘ga:month’,
        ‘metrics’: ‘ga:avgSessionDuration’,
        ‘start-date’: ‘2014-01-01’,
        ‘end-date’: ‘yesterday’,
        },
        chart: {
        type: ‘COLUMN’,
        container: ‘monthTime’,
        options: {
        ‘backgroundColor’ : ‘none’,
        ‘colors’ : [‘#ebaf0f’],
        ‘width’: 500,
        ‘height’: 200,
        }
        }
        });

      4. Bonsoir,

        Je viens de refaire quelques tests spécialement pour vous. :-)
        Ça mérite bien un petit partage social de mon article.^^

        Voici un exemple de code fonctionnel :
        http://startup-metrics.fr/files/openboard/openboard2.html

        Suffit de remplacer ga:XXXXXX par la vue souhaitée.

  4. Merci beaucoup!!! j’ai vue d’où venait le problème.

    Et bien sur le partage va se faire partout 😉

    A bientôt.

  5. Bonjour,

    Effectivement une API qui ouvre beaucoup de possibilité et de simplicité une fois les rapport générés. Néanmoins je dois dire avoir quelques difficultés dans mes testes, peut être savez vous pourquoi.

    Pour une raison que j’ignore il m’est impossible de dupliquer l’exemple disponible sur le site de présentation de l’API quant a la ‘third party visualizations’. J’ai beau faire un copier coller du code*, au moment du chargement de celle ci je n’obtiens que la valeurs relative au log : embed-api-auth-container ; mais rien des données.

    Si vous avez une idée d’ou peut provenir l’erreur ou un piste de réflexion je suis preneur.

    Merci,

    * Le code disponible a cette adresse :
    https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/

    1. Bonjour,

      Je n’avais pas vu que Google avait ajouté autant d’exemples différents.
      – Si vous utilisez ce qu’ils indiquent pour « Basic Dashboard » cela ne fonctionne pas non plus ? https://ga-dev-tools.appspot.com/embed-api/basic-dashboard/
      – Dans votre exemple, prenez bien garde à charger tous les .js depuis « https://ga-dev-tools.appspot.com/public/javascript/… » et non pas « public/javascript/ ». Le copier-coller est source d’erreur. :-)
      – Par ailleurs, au moment de la création de l’ID Client, il faut bien prendre garde à indiquer le bon domaine sur lequel le script sera appelé.

      1. Avant tout merci pour votre retour mais également votre reactivite !
        Concernant les dash en exemple sur le site démo de google, j’arrive a reproduire sans probleme les basic jusqu’a celui invitant a utiliser des custom components.

        Effectivement ma redirection des JavaScript n’était pas correcte… je dois dire ne pas avoir fait très attention car ils invitent directement a tout copier coller (pas très malin).

        Malheureusement pour moi cela ne fonctionne toujours pas… même si j’affiche en supplément le choix des account/property ce qui n’était pas le cas. Ce qui va dans le bon sens.

        Merci,

      2. J’ai regardé rapidement, mais pas tout résolu par manque de temps… Google ment, son exemple n’est pas reproductible en l’état. Vous êtes bloqué car il manque en fait plein d’éléments à reprendre pour que ça fonctionne, par exemple en ajoutant les « div » suivant ça commencera à marcher beaucoup mieux (le js se réfère à des ID que Google ne demande pas de copier).

        <div class="Titles"><h1 class="Titles-main" id="view-name"></h1><div class="Titles-sub"></div></div>

        Malheureusement quand on corrige tous les problèmes le script bloque l’affichage avec un overlay infâme que je n’ai pas eu le temps de neutraliser. A mon avis, l’exemple est plus donné à titre indicatif pour montrer qu’on peut utiliser sa propre lib externe, mais ce n’est pas clef en main, il faut bidouiller un peu pour réadapter. :-)

  6. Bonjour,
    j’utilise Google Analytic pour réaliser des statistiques d’un site web. Actuellement, je dois afficher les éléments qui ont été fait par Google Analytic (graphe, map, …).

    Dans un premier temps, j’ai essayé de mettre l’URL du tableau de bord de Google Analytic dans une balise object ou iframe et cela ne fonctionne pas. Je ne sais toujours pas pourquoi ça ne marche pas.

    Ensuite, j’ai essayé de récupérer le code HTML du tableau de bord côté serveur pour l’afficher dans une page web, le souci étant que lorsque la page s’affiche, elle fait une redirection vers le site de Google Analytic. Je ne vois pas pourquoi cette redirection est faite

    Alors, je me suis renseigné sur google, et j’ai trouvé qu’il proposait des Api pour récupérer certains éléments, j’ai donc utilisé l’interface JavaScript et j’ai réussi à récupérer les éléments dont j’avais besoin.

    Vous allez me poser la question : Où se trouve le problème?
    Le souci, c’est que je veux aussi récupérer les utilisateurs actifs en temps réel et je n’arrive pas à utiliser l’Api de google pour le faire en JavaScript.

    J’ai beau chercher, je ne vois pas comment récupérer cet élément. Je développe un site en Asp.net, je voudrai que tu m’aides en JavaScript de préférence.
    Encore merci pour ton code et ton aide. J’ai utilisé les exemples qui se trouvent dans la demo de l’Api embed de Google pour afficher les éléments dont j’avais besoin, le seul hic c’est le realtime que je n’arrive toujours pas à afficher.

  7. Bonjour,
    Merci beaucoup pour ton code et ton explication. Grace à toi, j’arrive à récupérer les graphes dont j’ai besoin en JS. Mais, lorsque j’essaye de récupérer des éléments en temps réel, je n’y arrive pas. Voici le code que j’utilise :

    gapi.analytics.ready(function () {
    gapi.analytics.auth.authorize({
    container: ’embed-api-auth-container’,
    clientid: CLIENT_ID,
    scope: SCOPE
    });

    /**
    * Create a new ViewSelector instance to be rendered inside of an
    * element with the id « view-selector-container ».
    */
    var viewSelector = new gapi.analytics.ViewSelector({
    container: ‘view-selector-container’
    });

    // Render the view selector to the page.
    viewSelector.execute();

    /**
    * Create a new DataChart* instance with the given query parameters
    * and Google chart options. It will be rendered inside an element
    * with the id « chart-container* ».
    */
    var dataChart1 = new gapi.analytics.googleCharts.DataChart({
    query: {
    metrics: ‘ga:sessions’,
    dimensions: ‘ga:date’,
    ‘start-date’: ’30daysAgo’,
    ‘end-date’: ‘yesterday’
    },
    chart: {
    container: ‘chart-container1’,
    type: ‘LINE’,
    options: {
    height: ‘300px’,
    width: ‘650px’
    }
    }
    });

    var report = gapi.client.analytics.data.realtime.get({ query: { ‘metrics’: ‘rt:activeUsers’ } });

    /**
    * Render the dataChart and report on the page whenever a new view is
    * selected.
    */
    viewSelector.on(‘change’, function (ids) {
    dataChart1.set({ query: { ids: ids } }).execute();

    report.set({ query: { ids: ids } }).execute(function (resultAsObject) {
    document.getElementById(‘query-output’).value = resultAsObject.totalsForAllResults[‘rt:activeUsers’] +  » real-time active users. »
    });
    });
    });

    Merci d’avance pour ton aide

Laisser un commentaire

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