Exemples d'utilisations concrètes de Google Tag Manager

Mettre en place le suivi Universal Analytics

Pour commencer nous allons mettre en place un des codes de suivi les plus simples qui existe, à savoir l’installation d’Universal Analytics sur l’ensemble des pages de votre site Internet.

La première étape va consister à ajouter une balise.

Mettre en place le suivi de solution non intégrée à Google Tag Manager : l’exemple de Piwik

Un des codes de suivi les plus importants pour un site Internet est celui lié à la partie web analytics. Ainsi, nous souhaitons vous montrer comment mettre en place un code de suivi non intégré à Google Tag Manager ; nous avons pris l’exemple de Piwik qui est une solution alternative à Google Universal Analytics, tout comme le serait AT Internet, Adobe Analytics...

Nous avons choisi cette solution car elle est « gratuite » : vous aurez donc la possibilité de refaire cet exemple sur l’un de vos sites.

Par ailleurs, l’intérêt d’installer Piwik est que les données collectées vous appartiennent car il s’agit d’un logiciel libre. De plus, Piwik est le seul outil reconnu par la CNIL ne nécessitant pas l’accord explicite des utilisateurs pour l’installation de cookies de base lors de la visite d’un internaute : http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/outils-et-codes-sources/la-mesure-daudience/#c5583

Piwik n’étant pas reconnu par défaut par Google Tag Manager nous ne disposons pas d’une balise spécifique. Nous allons donc devoir la créer en utilisant la balise HTML personnalisée.

Mettre en place le suivi des conversions : l’exemple de Google AdWords

Nous avons jusqu’à présent mis en place des codes de suivi de manière simple. Pour cet exemple, nous allons utiliser une balise supportée et reconnue par Google qui est celle du suivi des conversions AdWords.

Vous trouverez l’ID de conversion correspondant à votre compte AdWords ainsi que le libellé de la conversion dans le back-office de Google AdWords.

Il faut maintenant indiquer quand ce code de suivi doit être généré. À l’inverse des deux exemples vus précédemment, nous ne souhaitons pas que le code s’exécute sur toutes les pages car cela aurait pour effet de générer autant de conversions que de visites sur le site par le biais du trafic porté par la solution Google AdWords.

Nous allons donc indiquer le moment précis où nous souhaitons que ce dernier se déclenche. Si nous prenons l’exemple...

Mettre en place un suivi des conversions : l’exemple de Bing Ads

Nous venons de voir la simplicité d’utilisation de Google Tag Manager pour exécuter les codes de suivi de conversion Google AdWords mais qu’en est-il lorsqu’il faut exécuter un code de suivi non lié à Google et que le déclencheur est différent de celui proposé par défaut ?

Et bien, en théorie, c’est assez simple : il suffit d’utiliser la même technique que celle que nous avons mise en place avec le code de suivi de Piwik. Nous allons donc créer une balise HTML personnalisée, dans laquelle nous allons copier/coller le code du suivi de conversion.

Pour cet exemple nous allons prendre celui du service de liens sponsorisés Microsoft Bing Ads que vous trouverez, à la date de rédaction de cet ouvrage, dans les bibliothèques partagées de Bing Ads : https://secure.bingads.microsoft.com/

Bien que cette technique apparaisse simple en théorie, en pratique certains codes ne sont pas bien supportés par Google Tag Manager, notamment pour les anciennes versions du code de Microsoft Bing Ads. Il est donc important de toujours vérifier sur les sites officiels, cela vous évitera bien des tracas et vous rassurera sur la qualité de la réponse : http://advertise.bingads.microsoft.com/en-us/blog/28845/how-to-use-universal-event-tracking-tags-with-tag-management-solutions...

Mettre en place un suivi d’événement : les liens externes pour Universal Analytics

Jusqu’à présent, nous avons utilisé des codes de suivi simples ainsi que des déclencheurs élémentaires. Nous allons maintenant voir comment mettre en place des suivis plus spécifiques.

Dans cet exemple, nous allons apprendre à mettre en place le suivi de certains événements dans Google Universal Analytics.

Par défaut, lorsque vous installez Google Universal Analytics sur votre site Internet, celui-ci ne comptabilise pas les interactions sur les clics suivants :

Nous allons voir comment mettre en place un tel suivi en prenant pour exemple le suivi des liens externes.

Concrètement, notre objectif est de faire "remonter" comme donnée dans Google Analytics, le fait qu’un internaute soit sorti de notre site Internet en cliquant sur un lien menant vers l’extérieur.

Pour en savoir plus sur les événements dans Google Analytics : https://support.google.com/analytics/answer/1033068?hl=fr

Quelle est l’utilité d’une telle balise ?

Pouvoir mesurer le trafic envoyé à d’autres sites Internet permet d’évaluer l’intérêt que vos utilisateurs ont pour les sites que vous...

Mettre en place un suivi d’événement : les téléchargements avec Google Universal Analytics

Afin de pouvoir rebondir sur l’exemple précédent et aller plus loin dans l’apprentissage des événements sur Google Analytics, vous allez apprendre dans cette section à suivre les clics sur les fichiers téléchargeables. Notez cependant que cette balise peut uniquement servir à collecter qu’un clic a été effectué et non que le fichier a été téléchargé en intégralité.

Tout comme la méthode de suivi des liens externes, nous vous recommandons de créer une variable car cela va vous permettre de rendre le nom des fichiers téléchargés plus lisibles dans votre interface Google Analytics et ainsi d’identifier quel fichier a été téléchargé.

Mettre en place un suivi d’événement avec Piwik

Nous allons maintenant faire un exemple d’installation plus compliqué avec un suivi d’événement avec Piwik.

Par défaut, Piwik reconnaît les clics sur les fichiers de téléchargement et sur les liens externes ; nous allons donc imaginer un autre scénario dans lequel nous souhaitons connaître le nombre de fois qu’un internaute reste plus de 30 secondes sur une page donnée. Nous allons pour cela utiliser le déclencheur JavaScript Minuteur anciennement appelé Time Listener.

Quel est l’intérêt de cette balise ?

Une balise de ce type peut être intéressante pour faire chuter le taux de rebond. En effet les solutions de web analytics ne peuvent calculer le temps passé sur une page qu’en fonction des interactions permettant d’exécuter une partie du code de suivi de la solution. Ainsi, un internaute peut consulter une unique page de votre site Internet, y rester plusieurs minutes et repartir directement sans que vous sachiez le temps qu’il a passé sur cette page. Au final, vous interpréterez cette visite...

Mettre en place un suivi des vidéos YouTube

Il s’agit ici d’un suivi simple mais long et fastidieux à mettre en place.

Ce suivi est une traduction de l’article original suivant : http://www.cardinalpath.com/youtube-video-tracking-with-gtm-and-ua-a-step-by-step-guide/ rédigé par Stéphane Hamel, l’un des plus grands ténors en web analytics au niveau mondial.

Dans cet exemple, nous souhaitons suivre les interactions que les utilisateurs de notre site peuvent avoir avec des vidéos venant de la plateforme YouTube :

Lorsqu’une vidéo YouTube est intégrée dans un site Internet, cela se fait par l’intermédiaire de ce qu’on appelle un iframe.

Pour notre exemple, nous considérons que nous intégrons une page YouTube dans notre site.

Nous souhaitons que les interactions effectuées sur cette vidéo remontent en tant qu’événement dans Google Analytics.

Afin que Google Tag Manager puisse suivre ces vidéos et nous permette de remonter les informations, nous devons dans un premier temps autoriser Google Tag Manager à dialoguer avec l’API JavaScript de YouTube.

Pour ce faire, il faut ajouter les paramètres suivants à la vidéo : ?enablejsapi=1 (source : https://developers.google.com/youtube/player_parameters?hl=fr#enablejsapi).

La deuxième étape consiste à créer les variables qui vont permettre au code de suivi de fonctionner.

La première variable à créer est composée d’un code JavaScript personnalisé, qui sert à reconnaître si une vidéo YouTube est présente sur la page web que consulte l’internaute :

Ce script s’écrit de la manière suivante :

function () { 
    for (var e = document.getElementsByTagName('iframe'), x = e.length; x--;) 
        if (/youtube.com\/embed/.test(e[x].src)) return true; 
    return false; 
}
 

Trois autres variables sont à créer, elles vont permettre de remonter des informations dynamiques à Google Analytics en ce qui concerne...

Mettre en place le suivi des erreurs JavaScript

Nous avons eu l’occasion de voir dans le chapitre précédent qu’il existait des variables propres aux erreurs JavaScript. Nous allons voir comment mettre à profit ces dernières pour les analyser dans Google Analytics.

La mise en en place de ce suivi est assez simple car Google possède un déclencheur spécifique.

Comme nous avons pu le voir dans le chapitre précédent, GTM propose déjà plusieurs variables intégrées pour les erreurs JavaScript :

Nous allons créer une balise dans Google Analytics qui sera de type événement et qui se déclenchera lorsqu’une erreur sera rencontrée par l’internaute.

Comme vous pouvez le constater ci-dessous, nous avons fait le choix d’insérer une valeur fixe dans la catégorie de l’événement Google Analytics.

Concernant l’action, nous souhaitons connaître les informations les plus importantes, à savoir où l’erreur a été constatée et quelle en est la cause, c’est pourquoi nous insérons deux variables qui sont...

Comptabiliser les survols d’une zone d’une page web dans Google Analytics

Cet exemple a pour but de vous montrer la force de Google Tag Manager pour déclencher une balise en fonction d’un événement JavaScript non reconnu par défaut par Google Tag Manager.

Dans notre exemple l’idée est de remonter en tant qu’événement dans Google Analytics, le fait qu’une personne a passé sa souris sur un élément de la page.

En JavaScript, cela fait appel à la fonction onmouseover.

Pour notre exemple, nous souhaitons mesurer les potentielles intentions d’appels téléphoniques qui pourraient être symbolisées par le fait qu’une personne passe sa souris au-dessus d’un bloc contenant un numéro de téléphone :

Comme nous pouvons le constater sur cette image avec l’aide de l’outil pour les développeurs de Firefox, l’élément en question est symbolisé par :

<div class="widget HTML" id="HTML1">
 

Par ailleurs, cet élément est le seul bloc de cette page qui possède un id dont la valeur est HTML1. Nous allons nous servir de cet élément distinctif pour déclencher la balise.

<script>  
document.getElementById("HTML1").onmouseover...

Mettre en place un suivi d’historique

Dans ce cas pratique, nous allons montrer comment effectuer l’installation d’un suivi d’historique simple dans Google Tag Manager.

Comme nous avons pu le voir dans le chapitre précédent, une balise de suivi d’historique permet de réagir lorsque le fragment d’une URL est modifié ou lorsqu’un site utilise les API HTML5 pushState. 

Qu’est-ce qu’une API HTML5 pushState ?

Il s’agit d’une technique qui permet de manipuler l’historique du navigateur par l’intermédiaire de trois paramètres qui sont l’état de l’objet que vous allez manipuler, le titre ainsi que l’URL.

Pour en savoir plus sur cette API : https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Dans cet exemple, nous allons voir comment remonter dans Google Analytics, les clics sur les ancres de lien qui permettent d’accéder à un endroit précis de la page afin de savoir si ce contenu a été vu.

Nous pouvons décider si nous souhaitons que cette interaction remonte comme un événement Google Analytics ou comme une page vue. Pour rendre l’exercice plus utile, nous avons pris le parti d’une remontée de données en tant que page vue : dès qu’un clic est effectué sur un de ces liens, nous souhaitons...

Remonter des données météorologiques dans Google Universal Analytics

Il s’agit d’un suivi intéressant car il permet de voir comment intégrer Universal Analytics et Google Tag Manager à un service tiers bien que l’exploitation de ce type de données présente peu d’intérêt. 

Une fois de plus, cet exemple est tiré du blog de Simo Ahava : http://www.simoahava.com/analytics/send-weather-data-to-google-analytics-in-gtm-v2/

L’idée est de pouvoir remonter le climat de la ville d’où s’effectue la connexion de l’internaute. Cette information peut aider certains sites à mieux appréhender le comportement de l’internaute. Par exemple, un pic de connexion lorsqu’il pleut, un pic d’achat en cas de chutes de neige...

Cet exemple nécessite l’utilisation d’une API tierce afin d’injecter des données personnalisées dans Google Analytics.

Cet événement personnalisé va permettre de déclencher une balise.

Nous allons également créer trois variables dont deux seront de type Variable de couche de données et qui serviront à remplir le dataLayer.

La troisième permettra l’installation d’un cookie dans le but d’appeler l’API météo une seule fois par visite. En effet, cette dernière étant gourmande en termes de ressources, nous ne souhaitons pas qu’elle soit chargée à chaque nouvelle page vue. De plus, la météo ne risquant pas de changer de façon significative sur un laps de temps donné, il est préférable de ne charger le script qu’une seule fois.

Une fois l’ensemble des variables enregistrées, nous allons créer dans Google Analytics, deux dimensions personnalisées qui vont stocker les valeurs de l’API. Pour en savoir plus sur les dimensions personnalisées...

Scraping

Le scraping est une méthode d’extraction de contenu dans le but d’exploiter ces données. Cela peut être utile dans Google Tag Manager pour pousser des données vers une solution tierce. C’est notamment ce que nous avons fait dans l’exercice précédent relatif aux données météorologiques.

À noter que le scraping n’est cependant pas une méthode "recommandée" car elle ne correspond pas à une bonne pratique en informatique ; en effet le scraping via Google Tag Manager se base sur des modèles définis vis-à-vis du code source de la page qui peut faire l’objet de modifications au fil du temps.

Ainsi cette méthode de collecte de données risque d’être endommagée lors de la modification des pages du site et ne permet donc pas d’avoir une mise en place pérenne du code de suivi.

Stéphane Hamel, l’un des web analystes les plus connus au niveau mondial a eu l’occasion de lister les avantages et les inconvénients de cette méthode : l’avantage majeur est qu’il s’agit d’une méthode simple, rapide et très flexible. En revanche, il s’agit d’un usage détourné de Google Tag Manager.

http://www.cardinalpath.com/tms-data-layer-dom-scraping-pros-cons/

Afin de pouvoir expérimenter le scraping...

Utiliser Google Tag Manager pour enrichir les résultats de recherche de Google

Dans un article publié sur son blog officiel, Google a annoncé qu’il allait désormais lire le code JavaScript des sites Internet : http://googlewebmastercentral.blogspot.fr/2014/05/understanding-web-pages-better.html

Google Tag Manager étant un outil permettant d’insérer du JavaScript sur les pages, il peut être utilisé pour enrichir les pages de résultats du moteur de recherche Google.

Nous allons prendre un exemple tout simple, celui de l’insertion d’un moteur de recherche dans les résultats :

Pour ce faire, nous allons suivre la documentation officielle de Google que vous pouvez trouver à l’adresse suivante : https://developers.google.com/structured-data/slsb-overview

soit :

<script type="application/ld+json">  
{  
   "@context": "http://schema.org",  
   "@type": "WebSite",  
   "url": "https://www.example-petstore.com/",  
   "potentialAction": {  
     "@type": "SearchAction",  
     "target": "https://query.example-petstore.com/search?q={search_term_string}", 
     "query-input": "required...