Installer Google Tag Manager sur WordPress

Voici 3 méthodes pour installer Google Tag Manager (GTM) sur votre site WordPress.

Méthode #1 : Éditeur de Thème WordPress

Voici comment installer GTM via l’Éditeur de Thème WordPress.

Connectez-vous à votre back office wordpress, puis accédez à Apparence > Éditeur de Thème.

Sur le panneau à droite se trouvent les « Fichiers du thème« .

Un thème wordpress est composé de plusieurs fichiers comme : header.php, footer.php, sidebar.php, functions.php.

Dans la plupart des cas, le fichier wordpress qui génère les en-têtes c’est header.php.

Maintenant, accédez à tagmanager.google.com.

Cliquez sur l’ID du conteneur pour voir le code d’installation GTM.

Vous verrez alors apparaître le code d’installation de Google Tag Manager.

Ce code est composé de deux parties.

La première partie va dans la section <head> de vos pages web et la deuxième partie dans la section <body>.

Attention ! Effectuez une sauvegarde de votre site avant d’y apporter des modifications.

Maintenant, copiez la première partie du code GTM.

Vous pouvez utiliser le code ci-dessous, mais n’oubliez pas de le remplacer GTM-XXXXXXX avec votre ID GTM.

<!-- 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 ce code le plus haut possible dans la section <head>.

Copiez la deuxième partie du code GTM.

GTM-XXXXXXX > Votre ID GTM.

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

Vous devez coller ce code immédiatement après la balise d’ouverture <body>.

Cliquez sur le bouton « Mettre à jour le fichier« .

Méthode #2 : FTP / SFTP

Cette méthode est très similaire à la précédente.

Nous allons modifier le même fichier header.php, mais en utilisant un accès FTP ou SFTP.

Vous pouvez utiliser FileZilla (ou autre client FTP) pour vous connecter à votre site web.

Une fois connecté, quelques dossiers apparaîtront dans le rectangle en bas à droite de l’écran.

Celui qui nous intéresse est public_html.

Ouvrez ce dossier maintenant, et accédez à : wp-content > themes.

Il devrait y avoir plusieurs dossiers, un pour chaque thème installé sur votre site.

Trouvez le dossier qui correspond à votre thème actuel.

Maintenant cherchez le fichier header.php à l’intérieur.

Une fois que vous l’avez trouvé, faire un clic droit sur le fichier et sélectionner l’option Afficher / Éditer.

Vous devrez coller la première partie de votre script Google Tag Manager dans la balise <head>.

La deuxième partie du script doit être ajoutée après la balise <body>.

Dans la capture d’écran ci-dessous, vous verrez un exemple qui montre à quoi devrait ressembler le script GTM à l’intérieur du fichier header.php.

Méthode #3 : Google Site Kit

Google Site Kit vous permet d’ajouter des scripts de différents outils Google comme :

  • Google Analytics
  • Google AdSense
  • Google Tag Manager
  • Google Optimize
  • Google Search Console
  • Google PageSpeed

Au lieu d’ajouter les scripts un par un dans votre fichier header.php, il suffit d’installer Google Site Kit.

Google Site Kit peut être téléchargé ici.

Téléchargez le fichier .zip sur votre ordinateur.

Allez ensuite dans votre tableau de bord WordPress et téléversez le fichier.

Extensions > Ajouter > Téléverser une extension > Choisir un fichier > Installer > Activer l’extension

Cliquez maintenant sur Start Setup.

Tutoriel de configuration Google Site Kit

Maintenant, vous allez être redirigés vers la page de configuration de Google Site Kit.

Cliquez sur le lien Google Cloud Platform OAuth pour générer votre identifiant client pour votre site.

Copiez et collez le code pour vous authentifier.

À cette étape, vous vous devez vous connecter à votre compte Google.

Vous devez maintenant valider l’URL de votre site web.

Une fois terminé, Google Search Console sera automatiquement connecté.

Maintenant accédez à Site Kit > Settings > Connect more services.

Google Site Kit Settings

Comme vous pouvez le voir, vous ne pouvez pas configurer le Tag Manager.

Tout d’abord, vous devez configurer Google Analytics.

Une fois terminé, vous pouvez configurer le Tag Manager.

Cliquez sur « Proceed« .

Si vous obtenez une page d’erreur indiquant « Cette application n’est pas validée« , cliquez sur Paramètres avancés, puis sur Accéder à domaine.com (non sécurisé).

Sélectionnez le bon conteneur GTM, puis cliquez sur « Confirm & Continue« .

Le Google Tag Manager est connecté.

Je vous conseille de vérifier l’installation.

Vérifier l’installation

Vous pouvez vérifier si votre Tag Manager fonctionne en cliquant sur le bouton Prévisualiser.

Une fois que Google Tag Manager passe en mode Aperçu, rafraîchissez la page web de votre site.

Vous verrez en bas de votre navigateur, la console Google Tag Manager et les tags qui ont été déclenchés sur votre page.

Bien joué, Google Tag Manager a été bien installé sur votre site.

Vous pouvez maintenant :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *