Installer Google Tag Manager sur votre site (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 (et les Data Processing Terms si vous êtes dans l'EEE ou au Royaume-Uni).

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.

Vous pouvez charger le conteneur de deux façons. Chacune utilise deux extraits : l'un dans le <head>, l'autre en repli juste après la balise ouvrante <body>. Choisissez une façon et n'utilisez que ses extraits, sinon GTM se charge deux fois.

<!-- Google Tag Manager -->
<script data-cfasync="false">(function(w,d,s,l){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);j.async=true;j.src="https://load.k7q2x.example.com/h3k9x2mq7tbp.js";f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://load.k7q2x.example.com/ns.html"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!-- Google Tag Manager -->
<script data-cfasync="false">(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 -->

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

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.

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.

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.

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 charge le bon conteneur : l'ID dans l'extrait de Google, ou l'ID du conteneur GTM web sur la carte Better Loader. La leçon sur le débogage liste d'autres causes.

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 sur toutes les pages : ceux de Better Loader, ou ceux de Google avec votre propre ID GTM-, jamais les deux.
• 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.