Implémenter Google Universal Analytics

Anaeria

Nous allons voir comment intégrer efficacement Google Analytics sur les pages web.

Il s'agira d'intégrer la version Universal Analytics (par défaut) en version asynchrone. Le tutoriel se fera en 2 parties, premièrement les étapes d'administration dans l'interface de Google Analytics, puis l'intégration du code de suivi.

I - L'interface de Google Analytics

1. Ajouter un site

Une fois sur le tableau de bord (disponible ici : https://www.google.com/analytics/web/?authuser=0)

Allez dans l'onglet "Admin" tout en haut de la page sur la gauche.

Vous arrivez sur une vue à 3 colonnes : Compte, Propriété et Vue.

Vous pouvez posséder plusieurs comptes; chaque compte contient des propriétés (plus ou moins un "site", mais cette notion peut-être beaucoup plus fine que cela).

Enfin chaque propriété contient des vues, a savoir des accès rapides a des données filtrées. Par exemple, une vue par sous-domaine.

Ici, ce qui nous intéresse c'est d'ajouter un site. Nous allons donc crée une propriété. Pour cela, dans le menu déroulant de la colonne "Propriété", sélectionnez "Créer une propriété".

2. Configurer le site

Nous avons plusieurs options :

Le premier choix consiste à sélection un site web ou une application mobile.
En suite, nous devons choisir entre "Universal Analytics" et "Classic Analytics". Dans ce tutoriel, je montrerai l'intégration de la version "Universal Analytics", plus complète.
Ensuite donner un nom a votre site web
Renseignez le nom de domaine (Attention : de préférence ne pas mettre de "www" sauf dans le cas ou l'on souhaite gérer les sous-domaines séparément)
Sélectionnez la catégorie sectorielle. Ici, c'est en fonction du type de site web à suivre, au pire on peut choisir "Autre".
Enfin choisissez votre fuseaux horaire préféré

Cliquez sur "Obtenir un ID de suivi" et voilà !

Google va vous proposer un code d'intégration, mais je préfère en fournir un autre qui présente plein d’avantages !

Pour poursuivre il faut juste retenir l'ID de suivi généré sous la forme : UA-XXXXXX-X

La première partie sera toujours identique pour votre compte et le derniers chiffre s'incrémente à chaque propriété crée.

II - Intégrer le code dans une page

La première partie s’intègre dans le header de votre page. C'est à dire entre les balises <head> et </head>:

<script>
    (function(doc, script) {
      var js, 
          fjs = doc.getElementsByTagName(script)[0],
          frag = doc.createDocumentFragment(),
          add = function(url, id) {
              if (doc.getElementById(id)) {return;}
              js = doc.createElement(script);
              js.src = url;
              js.async = true;
              id && (js.id = id);
              frag.appendChild( js );
          };
        // Google Analytics  
        add(('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js', 'ga');
        fjs.parentNode.insertBefore(frag, fjs);
    }(document, 'script'));
</script>

Alors, c'est quoi ce machin et comment ça marche ?

Cette syntaxe permet de charger Google Analytics de manière asynchrone, c'est à dire que sont chargement ne perturbera pas l'exécution de votre page.

Concrètement ce script déclenche une fonction anonyme qui va rajouter des balises <script> asynchrones dans le DOM de la page.

Pourquoi cette intégration plutôt que celle de Google ?

La raison n'est pas liée à Google Analytics lui-même, mais à l'orientation que prennent la plupart des sites aujourd'hui. De plus en plus de code d'intégrations sont fourni avec beaucoup d'API : Google, Facebook, Twitter, etc....

Cette syntaxe permet de rajouter facilement un script asynchrone propre. Exemple avec d'autres API :

        <script>
            var pwidget_config = { defaults: { gaTrackSocialInteractions: true } };
            window.___gcfg = {lang: 'fr'};
            (function(doc, script) {
              var js, 
                  fjs = doc.getElementsByTagName(script)[0],
                  frag = doc.createDocumentFragment(),
                  add = function(url, id) {
                      if (doc.getElementById(id)) {return;}
                      js = doc.createElement(script);
                      js.src = url;
                      js.async = true;
                      id && (js.id = id);
                      frag.appendChild( js );
                  };
                // Google Analytics  
                add(('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js', 'ga');
                //Po.st
                add('http://i.po.st/share/script/post-widget.js#publisherKey=USERKEY');                
                // Google+ button
                add('http://apis.google.com/js/plusone.js');
                // Facebook SDK
                add('//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=APPID', 'facebook-jssdk');
                // Twitter SDK
                add('//platform.twitter.com/widgets.js');
                fjs.parentNode.insertBefore(frag, fjs);
            }(document, 'script'));
        </script>

Une fois ce script mis en place, il reste deux petits bout de code à intégrer.

Dans le corps de la page, idéalement juste après le <body>

Remplacer l'identifiant, par celui fourni par Google.

<script type="text/javascript">window.google_analytics_uacct = "UA-XXXXXX-X";</script>

Et enfin en toute fin de page juste avant le </body>, on va pouvoir déclencher le script. Vous devez reprécisez les informations sur suivi dans cet appel : le code de suivi et le nom de domaine. C'est également ici que s'intégreront diverses options au besoin.

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_setDomainName', 'mondomaine.net']);
</script>

Une fois tout ça intégré, le script prends effet immédiatement et vous pouvez consulter le résultat dans la section "Temps réel" de l'onglet "Création de rapport" et voir que tout marche.

Azad

Mes félicitations, beau tutoriel.
Tu as gagné les 5 points de réputations en récompense, et un sixième personnellement pour le sujet.

Elliotau78

Bien détaillé, j'aime beaucoup .

Melinyel

Implémenter Google Universal Analytics