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 : <a href="https://www.google.com/analytics/web/?authuser=0" rel="external nofollow">https://www.google.com/analytics/web/?authuser=0</a>)
 
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 :
<ul><li>Le premier choix consiste à sélection un site web ou une application mobile.</li>
<li>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.</li>
<li>Ensuite donner un nom a votre site web</li>
<li>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)
</li><li>Sélectionnez la catégorie sectorielle. Ici, c'est en fonction du type de site web à suivre, au pire on peut choisir "Autre".</li>
<li>Enfin choisissez votre fuseaux horaire préféré</li>
</ul>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>:
<pre class="ipsCode prettyprint lang-html">
<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>
</pre>
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 :
<pre class="ipsCode prettyprint lang-html">
<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>
</pre>
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.
<pre class="ipsCode prettyprint lang-html">
<script type="text/javascript">window.google_analytics_uacct = "UA-XXXXXX-X";</script>
</pre>
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.
<pre class="ipsCode prettyprint lang-html">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-X']);
_gaq.push(['_trackPageview']);
_gaq.push(['_setDomainName', 'mondomaine.net']);
</script>
</pre>
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 .

NodeBB

Implémenter Google Universal Analytics