Suivez la procédure ci-dessous pour installer les extraits de code nécessaires au conteneur Google Tag Manager de votre site. Afin de découvrir comment configurer Tag Manager pour d'autres types de conteneurs, consultez les ressources suivantes :
- iOS : Google Tag Manager pour iOS
- Android : Google Tag Manager pour Android
- AMP : guide de configuration AMP et Tag Manager
- Serveur : Tag Manager côté serveur
Avant de commencer
- Vous devez créer un compte et un conteneur Tag Manager.
- Vous devez pouvoir accéder au code de votre site.
Étapes
- Accédez à https://tagmanager.google.com.
- Connectez-vous à votre compte Google. Découvrez comment créer un compte Google.
- Ouvrez le conteneur Tag Manager que vous souhaitez modifier.
- Dans l'onglet Espace de travail, sélectionnez l'ID de votre conteneur (qui commence par "GTM").
- Dans la boîte de dialogue Installer Google Tag Manager, effectuez les étapes suivantes pour chaque page de votre site :
Remarque : Si vous avez conçu votre site à l'aide d'un outil de création de sites Web ou d'un système de gestion de contenu (CMS, content management system) tel que WordPress, Shopify ou Wix, vous pouvez configurer la balise Google grâce à une intégration qui ne nécessite pas de modifier le code sur chaque page de votre site. Découvrez comment installer la balise Google à l'aide d'un outil de création de sites Web ou d'un CMS.
- Copiez le premier bloc de code et collez-le le plus haut possible dans la balise
<head>.Exemple
Dans l'exemple de code HTML suivant, vous pouvez coller votre premier extrait de code Google Tag Manager après la balise d'ouverture HTML <head>. Notez que l'exemple suivant utilise l'ID GTM-ABCDEFGH, mais vous devez le remplacer par celui de votre conteneur.<!DOCTYPE html>
<html lang="fr">
<head>
<!-- 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-ABCDEFGH');</script>
<!-- Début de Google Tag Manager -->
<title>Exemple de page Web</title>
</head>
<body>
<!-- Contenu de votre site -->
<h1>Bienvenue sur mon site</h1>
<p>Voici un exemple de paragraphe sur ma page Web.</p>
</body>
</html> - Copiez le second bloc de code et collez-le immédiatement après la balise d'ouverture
<body>.Exemple
Dans l'exemple de code HTML suivant, vous pouvez coller votre second extrait de code Google Tag Manager immédiatement après la balise d'ouverture HTML <body>. Notez que l'exemple suivant utilise l'ID GTM-ABCDEFGH, mais vous devez le remplacer par celui de votre conteneur.<!DOCTYPE html>
<html lang="fr">
<head>
<!-- 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-ABCDEFGH');</script>
<!-- Fin de Google Tag Manager -->
<title>Exemple de page Web</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Fin de Google Tag Manager (noscript) -->
<!-- Contenu de votre site -->
<h1>Bienvenue sur mon site</h1>
<p>Voici un exemple de paragraphe sur ma page Web.</p>
</body>
</html> - Testez votre site en saisissant son lien, puis en cliquant sur Tester.
- Copiez le premier bloc de code et collez-le le plus haut possible dans la balise
- Cliquez sur OK.
Étapes suivantes
Utilisez Google Tag Manager pour configurer et gérer vos balises.