Aller au contenu
sGTM.space

Installer Google Tag Manager sur votre site (conteneur web)

Google Tag Manager (GTM) vous permet d'ajouter et de modifier des balises de suivi sans toucher au code de votre site à chaque changement. Vous installez une seule fois un petit extrait de code, puis GA4, les pixels publicitaires et les autres balises se gèrent dans l'interface de GTM. Dans cette leçon, vous créez le conteneur web, l'installez, envoyez votre premier événement personnalisé et publiez une version. Toutes les leçons suivantes s'appuient sur ce conteneur.

Débutant 8 min de lecture

Ce que vous allez apprendre

  • Créer un compte GTM et un conteneur web pour votre site.
  • Installer correctement l'extrait du head et l'extrait noscript du body.
  • Envoyer un événement personnalisé dans le dataLayer et le voir en mode Preview.
  • Soumettre et publier une version du conteneur, et comprendre à quoi servent les espaces de travail et les versions.

Avant de commencer

  • Un compte Google.
  • Un accès au template ou au CMS de votre site pour ajouter du code sur toutes les pages.

01 Créez le compte et le conteneur web

Un compte GTM correspond en général à une entreprise. À l'intérieur, vous créez un conteneur par site web (et plus tard un conteneur serveur distinct, présenté dans la leçon 2).

  1. 1 Ouvrez tagmanager.google.com et cliquez sur Create Account.
  2. 2 Saisissez un Account Name (le nom de votre entreprise) et votre Country.
  3. 3 Sous Container Setup, saisissez votre domaine comme Container name, par exemple www.example.com.
  4. 4 Choisissez Web comme Target platform et cliquez sur Create.
  5. 5 Acceptez les conditions d'utilisation de Google Tag Manager.

GTM affiche alors la fenêtre Install Google Tag Manager avec deux extraits de code. L'ID de votre conteneur a la forme GTM-XXXXXXX et figure dans les deux.

02 Collez les deux extraits

Collez le premier extrait le plus haut possible dans le <head> de chaque page. Il charge GTM de manière asynchrone et ne bloque donc pas l'affichage.

html 
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Collez le second extrait juste après la balise ouvrante <body>. Il sert de solution de secours pour les navigateurs où JavaScript est désactivé.

html 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  • Utilisez l'ID de votre propre conteneur dans les deux extraits, pas GTM-XXXXXXX.
  • Placez les extraits dans un fichier de layout ou de thème commun pour qu'ils figurent sur toutes les pages, pas seulement sur l'accueil.
  • De nombreux CMS (extensions WordPress, Shopify, Webflow) proposent un champ pour l'ID GTM. Utilisez soit ce champ, soit les extraits, jamais les deux, sinon GTM se charge deux fois.

03 Envoyez votre premier événement personnalisé via le dataLayer

Le dataLayer est un tableau JavaScript partagé par votre site et GTM. Votre code y pousse des objets, et GTM y réagit. Un objet avec une clé event devient un événement que les déclencheurs peuvent écouter ; les autres clés deviennent des valeurs lisibles avec des Data Layer Variables.

js 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'sign_up',
  method: 'email'
});

Exécutez ce code au moment de l'action, par exemple après une inscription réussie. Pour l'utiliser dans GTM :

  1. 1 Allez dans Triggers, cliquez sur New et choisissez Custom Event.
  2. 2 Réglez Event name sur sign_up (la correspondance doit être exacte, casse comprise) et enregistrez.
  3. 3 Allez dans Variables, sous User-Defined Variables cliquez sur New, choisissez Data Layer Variable et réglez Data Layer Variable Name sur method.

04 Testez en mode Preview

Le mode Preview montre exactement ce que GTM voit sur votre site, avant toute mise en ligne.

  1. 1 Cliquez sur Preview en haut à droite de l'espace de travail. Tag Assistant s'ouvre dans un nouvel onglet.
  2. 2 Saisissez l'URL de votre site et cliquez sur Connect. Votre site s'ouvre dans une autre fenêtre avec un badge Tag Assistant.
  3. 3 Revenez sur l'onglet Tag Assistant. À gauche, vous voyez des événements comme Consent Initialization, Initialization, Container Loaded, DOM Ready et Window Loaded.
  4. 4 Déclenchez l'inscription sur votre site. Un événement sign_up apparaît : cliquez dessus et ouvrez l'onglet Data Layer pour voir method: email.

Si Tag Assistant n'arrive pas à se connecter, vérifiez que l'extrait est bien sur la page et qu'il utilise le bon ID de conteneur. La leçon sur le débogage liste d'autres causes.

05 Soumettez et publiez une version

Aucune modification faite dans GTM n'atteint vos visiteurs tant que vous ne l'avez pas publiée.

  1. 1 Cliquez sur Submit en haut à droite.
  2. 2 Laissez Publish and Create Version sélectionné.
  3. 3 Saisissez un Version name et une Version description qui décrivent le changement, par exemple Add sign_up trigger.
  4. 4 Cliquez sur Publish.
  • Les Workspaces (espaces de travail) sont des brouillons. Chacun contient des modifications non publiées, ce qui permet à deux personnes de travailler sans écraser le travail de l'autre. La version gratuite de GTM autorise trois espaces de travail par conteneur.
  • Les Versions sont des instantanés du conteneur au moment de la publication. Sous Versions, vous voyez qui a publié quoi et pouvez republier une ancienne version pour revenir en arrière.
  • Les deux extraits sont présents sur toutes les pages avec votre propre ID GTM-.
  • Tag Assistant se connecte à votre site.
  • L'événement sign_up apparaît en Preview avec sa valeur method.
  • La première version est publiée avec un nom clair.

Questions fréquentes

Le conteneur web remplace-t-il mon code GA4 ?

Il le peut. Au lieu de coller directement l'extrait GA4, vous ajoutez une balise Google dans GTM. La leçon 3 le fait et envoie les données via votre conteneur serveur. Supprimez tout extrait GA4 codé en dur dès que GTM envoie les mêmes données, sinon tout est compté deux fois.

Pourquoi ai-je besoin de l'extrait noscript ?

Il ne s'exécute que lorsque JavaScript est désactivé, ce qui est rare. Google le recommande toujours et il ne fait aucun mal : installez-le.

J'ai publié mais ma modification n'apparaît pas sur le site. Pourquoi ?

Vérifiez que vous avez publié l'espace de travail qui contient la modification, puis rechargez la page en vidant le cache. Les caches de page et les CDN peuvent aussi servir une ancienne page HTML, mais le fichier GTM lui-même se met à jour en quelques minutes.

Prêt à passer à la pratique ?

Déployez un conteneur GTM serveur sur votre propre domaine en quelques minutes. L'offre gratuite ne demande aucune carte bancaire.

Créer un compte gratuit