photo-mathieu-consultant-seo

Mathieu Martinot

  • Linkedin
  • Le webmarketing
  • Les bases du SEO
  • Google Analytics
  • Articles
    • Webmarketing
    • Tests / Outils Web
    • Guides / Tutoriels

Powered by Genesis

Installer Google Tag Manager : Présentation et guide d’installation (+ Google Analytics)

7 décembre 2016 Par Mathieu Catégorie(s) : Analytics / Guides / Tutoriels / Outils / Webmarketing

Au fil du temps, je remarque que beaucoup de webmasters débutants se contentent d’installer Google Analytics comme script « de base » sur leur site. En n’installant que cet outil, ils se privent d’un autre qui est tout autant indispensable, Google Tag Manager.

Dans cet article, je veux vous expliquer pourquoi Google Tag Manager devrait faire partie des toutes premières choses à installer lors de la création de votre site Internet. Pour aider les plus novices d’entre vous, je vais également vous expliquer dans le détail comment l’installer proprement sur votre site.

Ne vous laissez pas effrayer par la relative complexité qu’il peut laisser apparaître. En réalité cet outil est très simple d’utilisation, et quelques heures suffisent pour connaitre les bases.

Google Tag Manager, de quoi s’agit il exactement ?

google-tag-manager-logo
Le logo de Google Tag Manager, l’outil de gestion de tags Made in Google

Google Tag Manager est un outil de gestion de balises développé par Google. Lancé en 2012, il est 100% gratuit et permet de gérer très simplement l’implantation de scripts externes.

Que les scripts soient made in Google ou non, Google Tag Manager permet non seulement de les placer sur votre site, mais également de les adapter à vos besoins. Fini les scripts à ajouter les uns à la suite des autres dans vos pages, vous installez une fois Google Tag Manager et il s’occupe de tout.

L’ajout / modification / suppression de scripts est gérable sans intervention technique et il est très simple de comprendre les bases et en tirer de gros bénéfices.

D’autres solutions existent, je pense notamment à TagCommander ou Adobe Tag Management que des clients utilisaient avant l’apparition de GTM. Mais contrairement à ces outils, Google Tag Manager est gratuit et surtout beaucoup plus simple d’utilisation.

Si vous gérez un site de taille « normale », Google Tag Manager répondra à vos besoins. Les autres peuvent également être des bons choix si vous gérez un site extrêmement complexe. Mais ce n’est pas notre sujet aujourd’hui, concentrons nous sur l’outil de Google.

Pourquoi installer Google Tag Manager

Minimise les interventions dans le code

Comme je l’ai indiqué plus haut, installer Google Tag Manager permet à l’équipe marketing de travailler sans avoir à faire appel à l’équipe technique. Pour avoir connu ça par le passé, il peut être très pénible de dépendre d’une autre équipe pour placer et configurer ses outils web.

Manque de temps, priorité pour d’autres choses, beaucoup de raisons peuvent faire qu’une tache aussi basique que l’installation d’un script puisse être décalée dans le temps.

Avec GTM vous installez une seule fois le script, et ensuite tout se gère de votre coté, directement dans l’administration de l’outil. Vous pouvez ajouter / supprimer ou même modifier des scripts à votre guise, sans avoir à dépendre de personne.

Il est 100% gratuit

C’est un autre avantage considérable pour les webmasters qui veulent un outil performant sans investir plusieurs centaines d’euros tous les mois. Vous avez accès à ce qui se fait de mieux pour un coût plus que modique, puisqu’il est de 0€. Difficile de trouver un meilleur rapport qualité / prix pour des besoins standards.

Et n’imaginez pas que gratuit signifie outil au rabais ou peu performant car ce n’est absolument pas le cas.

Cet outil vous fera gagner beaucoup de temps

Le gain de temps est de deux ordres. D’abord en évitant de faire des allers – retours entre votre code et les scripts installés, et surtout en configurant vos scripts beaucoup plus rapidement grâce notamment à la console de Debug.

Google Tag Manager propose un module de Preview / Debug performant

debug-google-tag-manager
Module de Debug / Preview de Google Tag Ma,ager. Simple à utiliser et très intuitif

Le module de Preview / Debug est une fonctionnalité incontournable. Il vous permet de tester vos scripts sans avoir à utiliser une version en développement et sans tout mettre en production pour autant.

Tout se fait via une console directement depuis votre navigateur. Vous pouvez tester tranquillement vos modifications, déterminer si les variables utilisées sont les plus pertinentes ou comprendre pourquoi tout ne fonctionne pas comme prévu.

Chargement plus rapide de vos pages

Je ne vous apprends rien en vous disant que la vitesse de votre site est capitale. La encore, Google Tag Manager sera d’une grande aide car vos temps de chargement seront considérablement réduits grâce à son mode de fonctionnement.

En déployant vos tags de manière asynchrone, il permet en effet à vos pages de se charger plus rapidement.

Synchrone vs Asynchrone (en résumé)

synchrone-vs-asynchrone
Lors d’un chargement asynchrone tous les scripts se chargent en même temps, et non les uns à la suite des autres

Quand les scripts sont chargés de façon synchrone, ils le sont les uns à la suite des autres. Quand le script 1 est chargé, le script 2 prend le relais, etc. Tant que le script 1 n’est pas chargé (ou en timeout), le 2ème ne se chargera pas. Ce qui peut provoquer des temps de chargement plus longs.

Quand ils le sont de façon asynchrone, ils se chargent tous en même temps. Et Google Tag Manager fonctionne de cette façon.

Simplifie et optimise les usages de Google Analytics

Beaucoup voient Google Tag Manager comme un outil totalement dissocié de Google Analytics. C’est faux car les deux peuvent fonctionner de pairs. Mieux, GTM permet d’envoyer à Google Analytics des informations parfois plus compliquées à configurer qu’avec le seul outil Google Analytics.

Analyser les clics vers des liens extérieurs est par exemple plus compliqué sur Analytics alors que c’est un jeu d’enfant sur GTM.

Les événements sont de manière générale bien plus simples à configurer sur GTM. Si vous n’êtes pas bien au point, j’ai rédigé un article sur les bases de Google Analytics

Google Tag Manager propose des outils pré-configurés

GTM permet d’installer en quelques clics des scripts déjà tout prêts. Qu’ils soient issus de Google ou non, beaucoup sont disponibles et facile à installer. Naturellement, vous pouvez également installer des scripts qui ne sont pas de base dans GTM, en copiant / collant le code dans GTM directement.

Il permet de gérer vos mises à jour et de revenir en arrière si nécessaire

Avant chaque publication de modification, vous devez indiquer ce que vous avez fait.

A l’aide d’un titre et éventuellement d’une description, vous pouvez indiquer les nouveautés et ce que vous ou un membre de votre équipe avez mis en place. Il est alors très simple de revenir en arrière si vous voyez que tout ne se passe pas comme prévu.

Voyons maintenant comment installer Google Tag Manager si vous partez de zéro. Ce tutoriel est volontairement très détaillé pour aider même les plus novices d’entres vous.

Guide : Installation de Google Tag Manager et Google Analytics

Vous venez de lancer votre site ou vous en avez déjà un, félicitation. Si vous avez déjà un compte Analytics, ce qui est peut être le cas, vous pouvez passer directement à l’étape 2.

Etape 1 : Créer un compte sur Google Analytics

analytics-creer-compte
Création d’un compte Google

1 – Rendez vous sur ce lien https://www.google.com/analytics/

analytics-creer-compte-2
Créer un compte Google, étape suivante

2 – Si vous avez un compte Google (même Gmail), renseignez votre email en 1

Si non, cliquez sur le lien d’inscription (2) et renseignez vos informations

analytics-creer-compte-3
Création compte Google, étape 3

3 – Si vous arrivez sur un écran de ce type, choisissez simplement le compte Google que vous souhaitez associer à votre Google Analytics.

analytics-creer-compte-4
Association d’un compte Analytics à votre compte Google

4 – Cliquez sur le bouton Inscription

analytics-creer-compte-5
Remplir le formulaire de Google analytics
  1. Choisissez Web
  2. Renseignez le nom du niveau supérieur du site
  3. Renseignez le nom du site
  4. Indiquez l’URL du site, en n’oubliant pas de choisir http ou https
  5. La catégorie, peut être utile pour avoir des informations par rapport à votre secteur
  6. L’heure que vous souhaitez utiliser dans vos rapports

Plus bas vous pouvez tout laisser cocher selon vos préférences.

Cliquez ensuite sur Obtenir le code de suivi en bas de la page.

analytics-creer-compte-6
Votre code de tracking Google Analytics, à renseigner plus tard dans Google Tag Manager

Vous arriverez ensuite sur cet écran. Copiez le code UA-XXXXXX-x dans un fichier texte ou notez le quelque part.

analytics-creer-compte-5-1
A quoi ressemble le compte Google Analytics

Votre interface Analytics ressemblera ensuite à ça (pour que vous compreniez bien l’idée de niveau supérieur / nom du site sur l’étape précédente)

 

Etape 2 : Création du compte Google Tag Manager

Rendez vous sur ce lien https://tagmanager.google.com/

google-tag-manager-1
Etape 1 dans la création de votre compte Google Tag Manager

Si vous n’avez jamais utilisé GTM, vous arriverez sur cet écran. Indiquez le nom de votre site et cliquez sur Continuer. Libre à vous de cocher ou non la case pour envoyer anonymement vos informations. A titre personnel, j’envoie ces informations.

google-tag-manager-2
Etape 2 dans la création de votre compte GTM
  1. Renseignez le nom de votre site comme indiqué sur l’écran
  2. Choisissez le support de votre site, à priori Web si vous lisez ce guide 😉
  3. Cliquez sur Create, et validez les conditions générales sur l’écran suivant


Bravo, votre compte est prêt. Vous avez alors un code qui apparaît sur votre écran, il va servir pour l’étape suivante. Copiez le (et collez le sur un fichier texte si vous voulez).

Etape 4 : Installation de Google Tag Manager sur votre site

  • Si vous êtes sous un WordPress « classique »

Deux options s’offrent à vous.

1 – Avec un Plugin WordPress

Vous pouvez aller au plus simple, et télécharger le Plugin « Google Tag Manager for WordPress »

Une fois installé et activé, rendez vous sur « Réglages » (Menu de gauche dans votre admin WordPress) et Google Tag Manager

gtm-wordpress-1
Interface du Plugin WordPress d’installation de Google Tag Manager

Vous aurez alors cet écran. Retournez sur votre interface Google Tag Manager et copiez le code sous la forme « GTM-XXXXXX ». Attention, il faut seulement copier / coller le bout : GTM-XXXXXX et pas le code du script en entier.

gtm-wordpress-2
Il faut seulement prendre le bout GTM-XXXXX

Collez donc ce bout de code GTM-XXXXXX sur l’écran de votre Plugin WordPress. Sélectionnez ensuite la façon dont vous souhaitez implémenter le code, le Codeless devrait fonctionner. Si ce n’est pas le cas, choisissez Custom, et copiez collez le bout code indiqué en bas de l’écran de votre plugin dans Apparence / Editeur / header.php

2 – Sans Plugin WordPress

gtm-wordpress-4
Apparence / Editeur pour avoir accès au code php des pages de votre template WordPress

Rendez vous dans Apparence / Editeur. Cliquez ensuite sur Header.php à  votre droite

gtm-wordpress-5
Placez les codes après l’ouverture duet du

Insérez ici les codes des parties 1 et 2, comme indiqué sur les deux screenshots ci dessus.

gtm-wordpress-6
Le script à copier coller dans vos fichiers php
  • Si vous êtes sous un WordPress sous Genesis

Si comme moi vous utilisez un template sous Genesis, vous n’avez pas accès aux fichiers du template dans l’éditeur. Vous devez utiliser un plugin pour modifier ces parties.

Téléchargez le plugin Genesis Simple Hooks et installez le. Rendez vous ensuite dans le menu de gauche sur votre admin WordPress. Cliquez sur Genesis / Simple Hooks

gtm-genesis-1
Simple Hooks de Genesis permet de modifier le code de vos pages

Dans wp_head Hook collez le code 1 du screenshot précédent. Ne cochez aucune case

gtm-genesis-2
Deuxième partie à modifier dans Genesis Simple Hooks

Dans genesis_before Hook collez le code 2 du screenshot précédent. La encore, ne cochez aucune case.

Enregistrez et c’est bon

  • Si vous n’êtes pas sous WordPress

Suivez les indications de Google Tag Manager. Collez le code 1 juste après l’ouverture de la balise <head> (ou aussi haut que possible, avant la fermeture de la balise) et collez le code 2 juste après l’ouverture la balise <body>. Ne connaissant pas la structure de votre site je ne peux malheureusement pas aller plus loin sur ce point.

Etape 3 : Association de votre Google Analytics avec Google Tag Manager (création du premier Tag)

Bravo, votre Google Tag Manager est installé sur votre site. Il ne reste plus qu’a associer votre Google Analytics à votre Google Tag Manager pour commencer à recevoir des informations sur le trafic de votre site.

gtm-analytics-1
« Add a new Tag » pour ajouter le Tag Google Analytics

Dans votre compte Google Tag Manager, cliquez sur « Add a new tag »

gtm-analytics-2
Première étape de configuration de votre Tag Google Analytics
  1. Mettez un titre clair, par exemple Universal Analytics
  2. Cliquez sur la zone
gtm-analytics-3
Choisir Universal Analytics pour bénéficier de la dernière version de cet outil

Un menu s’ouvre à votre droite. Cliquez sur Universal Analytics. A l’avenir c’est ici que vous choisirez les tags à implémenter sur votre site.

gtm-analytics-5
Indiquer ici le code de tracking de votre Google Analytics

Dans l’ID de suivi il faut coller celui que vous avez eu lors de l’étape 1, quand vous avez ouvert votre compte Google Analytics.
Il sous la forme UA-XXXXXXX-X. En (2) vous devez laisser « Page Vue »

gtm-analytics-4
Dans Google Analytics, récupérez votre ID de Tracking

Si vous l’avez perdu, retrouvez le en allant sur votre compte Google Analytics / (1) Administration / (2)Code de suivi sur la partie du milieu

 

gtm-analytics-6
Sur l’écran Google Tag Manager, cliquez ensuite sur la partie du dessous « Triggering ». Sur la fenêtre qui s’ouvre cliquez sur « All pages ».

Et enfin, cliquez sur « Save » en haut à droite (bouton bleu)

gtm-analytics-7
Les changements visibles après avoir configuré votre Google Tag Manager

Vous devriez alors voir ces deux changements. Cliquez alors sur « Publish » en haut à droite (bouton rouge).gtm-analytics-8

  1. Mettez un nom à ce que vous venez de faire
  2. Une description (facultatif)
  3. Cliquez sur Publish

C’est terminé ! Vous pouvez maintenant tester en allant directement sur votre site et dans le même temps sur votre Google Analytics

analytics-test
Tester sur Google Analytics pour voir si tout fonctionne bien

Rendez vous sur votre compte, cliquez sur (1) « Rapports » / (2) « Temps réel » – Vue d’ensemble.

Rafraîchissez une page de votre site, retournez sur l’onglet de la page de Google Analytics et voyez si vous apparaissez comme visiteur. Si c’est le cas (3) c’est que tout fonctionne !

Maintenant que la base est acquise, nous verrons dans des prochains articles comment aller un peu plus loin dans l’analyse de ses résultats sous Google Analytics.

Partager cet article

Articles dans le même thème

  • Guide : 5 étapes pour choisir une agence SEO ou un consultant en référencement
  • SEMrush : Avis, test complet et 14 jours offerts en bonus en 2021
  • Google Analytics : Les 3 questions les plus fréquentes + filtres à installer
  • Etude SEO 2016 – SearchMetrics – Ranking Factors
  • Wix : Avis, présentation et code promo. Test détaillé et analyse

Derniers tests publiés sur le site

SEMrush: Outil SEO pour auditer son site, trouver des backlinks et bien plus encore.
Camtasia: Logiciel pour créer des vidéos éducatives de qualité
Snapgit: Logiciel de capture d'écran avec retouches instantanées
Wix: Outil de création de site internet sur le modèle Drag & Drop