Installer Google Tag Manager en pur javascript sur WordPress
Temps de lecture : 3 minutes
Il existe de nombreuses méthodes pour ajouter les snippets de code GTM à un site WordPress (Plugins, fichier header.php du thème enfant etc.).
Dans cet article, nous avons fait le choix d’inclure ces snippets en javascript pur via le fichier functions.php du thème enfant plutôt que de l’inclure dans le fichier header.php pour ne pas avoir à se soucier des mises à jour du thème parent.
Ceci est rendu possible grâce au nouveau crochet WordPress wp_body_open
introduit dans la version 5.2 – ATTENTION : Vous devez vous assurer que votre thème supporte ce nouveau crochet.
Comme indiqué dans le guide d’installation, le code se compose de deux snippets. Le premier est à insérer immédiatement après la balise ouvrante <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-XXXX');</script>
<!-- End Google Tag Manager -->
et l’autre juste après la balise ouvrante <body> :
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Voyons comment nous pouvons inclure ces deux snippets en javascript pur :
Editer le fichier functions.php de votre thème enfant et insérez le code ci-dessous (en remplaçant GTM-XXXX par celui de votre conteneur).
/* Ajout des snippets GTM */
// Exécuter l'action dans head
add_action( 'wp_head', 'webplus_hook_gtm' );
// Création de la fonction php
function webplus_hook_gtm() {
?>
<script>
// Création du script
var para = document.createElement("script");
// Contenu du script
var t = document.createTextNode(
"(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-XXXX');"
);
// Ajout du contenu au script
para.appendChild(t);
// Insertion du script créé juste après la balise ouvrante <head>
document.head.insertBefore(para, document.head.firstChild);
</script>
<?php
};
// Exécuter l'action dans le body
add_action( 'wp_body_open', 'webplus_hook_gtm_noscript' );
function webplus_hook_gtm_noscript() {
?>
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<?php
};
Bravo ! Si vous avez suivi cet article à la lettre et après avoir sauvegardé le fichier functions.php de votre thème enfant, vous aurez installé les snippets Google Tag Manager sur votre site WordPress en JavaScript pur.
A lire également
Améliorer le temps de chargement de WordPress en éliminant le CSS de Gutenberg
Écrit le . Publié dans Performance site web.Nombreux sites propulsés par WordPress sont construits avec des builders (constructeurs de thèmes) qui ont leur propres feuilles de style CSS. Or de base, lorsque une version récente de WordPress est installée, elle inclut l’éditeur Gutenber…Installer Google Analytics via tarteaucitron sur WordPress
Écrit le . Publié dans Google.Découvrez comment installer rapidement et facilement sur votre site WordPress le code de suivi Google Universal Analytics en conformité avec la RGPD grâce à tarteaucitron.js et au moyen d’un plugin « must-use » (mu-plugins).CDN avec cache dynamique WordPress gratuit pour nos clients
Écrit le . Publié dans Actualités.L’Agence WebPlus frappe fort avec le déploiement d’un service de CDN (Content delivery Network) basé sur la technologie LiteSpeed / QUIC.cloud qui est le premier et le seul réseau de diffusion de contenu capable de mettre en cache des …