Comment installer Google Analytics sur WordPress ? (et Google Tag Manager)

mars 2020

Quentin

Vous avez un site qui tourne sous WordPress et vous aimeriez connaître le nombre de visiteurs qu’il obtient et en savoir plus sur le comportement de vos utilisateurs ?

2 manières d’installer Google Analytics sur WordPress

Google Analytics est un outil formidable pour cela mais WordPress ne permet pas de l’ajouter directement via des réglages. Il faut soit télécharger un plugin, soit l’installé à la main dans notre thème WordPress.

Pour ma part, j’ai choisi d’intégrer Google Analytics grâce à Google Tag Manager (gestionnaire de balises) mais si vous voulez juste installer le script Google Analytics, c’est quasiment la même procédure.

Si vous voulez installer Google Analytics via Google Tag Manager, voici la procédure :

  • Créer un compte Google Tag Manager
  • Configurer la balise Google Analytics dans Google Tag Manager
  • Installer Google Tag Manager sur WordPress

Si vous installez directement la balise Google Analytics, voici la procédure :

  • Créer un compte Google Analytics
  • Installer Google Analytics sur WordPress

A la suite de la réalisation de cette procédure (dans les deux cas), vous obtenez une ou des balises à intégrer.

Installation de la balise Google Tag Manager

Rendez-vous dans le dossier de votre thème.

Cherchez le fichier « header.php » puis ouvrez-le. Ajoutez le code suivant juste après la balise d’ouverture « <body> » :

<body>
    <?php do_action('after_body_open_tag'); ?>

Ce code permet de créer notre propre « hook ».

Dans WordPress, un hook est une fonction sur laquelle on peut greffer d’autres fonctions. En l’occurrence, il n’existe pas de hook qui s’exécute après la balise body d’ouverture, nous devons donc le créer nous-même.

Nous utiliserons ce hook lors de la prochaine étape.

Retournez dans le dossier de votre thème et éditez le fichier « functions.php » (ou créez le s’il n’existe pas).

Ajoutez le code suivant :

// Fonction qui affiche le script Google Tag Manager dans la balise head
function gtm_script_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-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
<?php
}
// On attache notre fonction au hook "wp_head", le script sera alors ajouté dans la balise head comme souhaité
add_action('wp_head', 'gtm_script_head');


// Fonction qui affiche le script Google Tag Manager dans la balise body
function gtm_script_body(){
    ?>
        <!-- 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) -->
    <?php
}
add_action('after_body_open_tag', 'gtm_script_body');

Installation de Google Analytics (uniquement) sur WordPress

Si vous souhaitez installer uniquement Google Analytics sans Google Tag Manager, vous avez juste à ajouter le code suivant dans le fichier « functions.php » (pas besoin de créer de hook).

// Fonction qui affiche le script Google Analytics dans la balise head
function ga_script_head(){
?>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXX-1');
    </script>
<?php
}
// On attache notre fonction au hook "wp_head", le script sera alors ajouté dans la balise head comme souhaité
add_action('wp_head', 'ga_script_head');

PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !

Laisser un commentaire

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