Installer Google Tag Manager en pur javascript sur WordPress

Écrit le . Publié dans .

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

A lire également

    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

    Agence web reconnue pour son savoir faire

    Notre expertise est reconnue par les éditeurs de logiciels leaders dans l'industrie du web pour l'hébergement web haute performance et la gestion automatisée de services d'hébergement web

    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

    Tous droits réservés © 2014 - 2022
    Send this to a friend