Skip to main content

Installer Google Tag Manager en pur javascript sur WordPress

Écrit le . Publié dans .

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.2ATTENTION : 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.

Partager l’article

A lire également

Écrit le . Publié dans .
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…
Écrit le . Publié dans .
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 …
Écrit le . Publié dans .
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).