Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici

Exemples d'utilisations concrètes de Google Tag Manager

Introduction

Les objectifs de ce cinquième chapitre sont de vous apprendre à :

  • déployer des balises simples via Google Tag Manager ;

  • développer une réflexion pour la mise en place d’un suivi avancé.

Maîtriser Google Tag Manager va passer par de nombreuses mises en pratique, des tests et des échecs. Ainsi ce chapitre a pour but de vous montrer de nombreux exemples d’installation à faire et à refaire sur vos propres sites.

Pour les exemples présentés dans ce chapitre, nous considérons que le conteneur Google Tag Manager est déjà mis en place sur l’ensemble des sites.

Les exemples présentés sont classés par ordre de difficulté en termes d’installation.

Pour vous entraîner, si vous ne possédez pas de site Internet, vous pouvez utiliser le service de Blogger ou un CMS de type WordPress. À noter que pour les utilisateurs de Windows vous pouvez utiliser Instant WordPress qui est un logiciel gratuit et simple émulant un serveur local sur une clé usb : http://www.instantwp.com/

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.

 Pour ce faire, dans Google Tag Manager, cliquez sur Balises dans la colonne de gauche puis sur le bouton Nouvelle :

images/05ow01.png

 Donnez-lui un nom explicite, par exemple Google Universal Analytics ; pour des questions pratiques, vous pouvez ajouter des chiffres avant le nom afin de pouvoir garder un ordre dans vos balises et indiquer de quel type de balise il s’agit :

images/05ow02.png

 Cliquez alors sur le bouton Google Analytics, puis sélectionnez comme type de balise Universal Analytics. Cliquez sur Continuer et renseignez l’identifiant de votre compte Universal Analytics.

L’identifiant sert à faire la passerelle entre Google Tag Manager et Universal Analytics. Dans Universal Analytics, vous trouverez cet identifiant en cliquant sur l’onglet Admin puis sur Paramètres du site :

images/05ow03.png

Vous obtenez ceci dans Google Tag Manager :

images/05ow04.png

 Vous pouvez activer, si besoin est, l’option Activer les fonctionnalités de la publicité display. Dans notre exemple, nous souhaitons simplement mettre en place le suivi des pages vues, vous pouvez donc cliquer en bas de page sur le bouton...

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.

 Cliquez sur le bouton rouge...

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.

 Créez une nouvelle balise ; renseignez comme type de balise, Suivi des conversions AdWords, précisez l’ID de conversion, le libellé et la valeur que vous souhaitez lui attribuer :

images/05ow16.png

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

 Pour y accéder, cliquez sur Outils puis créez une conversion ou cliquez sur l’onglet Code si un code de conversion a déjà été généré par le passé :

images/05ow17.png

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/

images/05ow20.png

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 :

  • liens externes ;

  • liens de téléchargement ;

  • clics sur les adresses e-mail.

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é.

 Cliquez sur Variables dans la colonne de gauche.

 Cliquez en bas de page sur le bouton Nouvelle.

 Nommez cette variable Nom du fichier téléchargé ou plus exactement Chemin du fichier téléchargé.

 Sélectionnez Variable d’événement automatique.

 Sélectionnez comme type de variable URL de l’élément.

 Sélectionnez comme type de composant...

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.

Nous prenons ici Piwik comme exemple mais vous êtes libre d’utiliser d’autres technologies : Baidu Tongj (système très similaire à l’ancienne version de Google Analytics), Yandex Metrika...

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 :

images/05ow38.png

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).

 Nous modifions pour cela le code HTML au niveau de la source de la vidéo :

images/05ow39.png

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 :

images/05ow40.png

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 :

  • Error Message

  • Error URL

  • Error Line

 Pour les utiliser pour une balise, cliquez dans la colonne de gauche sur Variables puis activez ces variables en cochant les cases correspondantes :

images/05ow49.png

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.

 La balise doit être créée ainsi :

images/05ow50.png

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 :

images/05ow54.png

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.

 Pour ce faire, nous allons créer une balise HTML personnalisée qui va inclure le code JavaScript suivant :


<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.

images/05ow59.png
images/05ow60.png

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.

 La première étape de notre exercice consiste à créer un déclencheur que nous utiliserons ultérieurement :

images/05ow63.png

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.

 Voici la première :

images/05ow64.png

 Voici la seconde :

images/05ow65.png

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.

 Cette variable aura le paramétrage suivant :

images/05ow66.png

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 :

images/05ow84.png

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...