Installer Google Tag Manager en pur javascript sur WordPress

Écrit le 23 juillet 2019. Publié dans Google Tag Manager.

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.

Partager l’article

Transformation numérique

L'Agence WebPlus accompagne les entreprises et commerçants dans leur démarche de digitalisation avec le soutient des régions Occitanie et Auvergne-Rhône-Alpes

A propos de l'Agence WebPlus

Services de l'Agence WebPlus

Expertise produits Google

Contacter l'Agence WebPlus

125 rue de l'Hostellerie
30900 Nîmes, France