# GTM et consentement : retarder l’injection du conteneur dans le head du thème

> Faut-il vraiment charger Google Tag Manager avant que le visiteur n'ait donné son consentement ? Un snippet qui conditionne l'injection du conteneur GTM au consentement recueilli.

- Auteur : Clément Hadrot
- Publié le : 2024-08-30
- Mis à jour le : 2024-08-30
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/theme-google-tag-manager-consentement-avant-chargement/

## L’essentiel

- Le conteneur GTM ne doit s'injecter qu'après un consentement positif explicite
- Un simple indicateur en cookie ou en localStorage suffit à piloter ce chargement conditionnel
- Le snippet reste indépendant du bandeau cookie utilisé

Le conteneur Google Tag Manager se charge-t-il avant ou après que le visiteur ait cliqué sur « Accepter » dans le bandeau cookie du site ? Sur une majorité de thèmes WordPress observés en audit, la réponse est « avant » : le script GTM standard, copié tel quel depuis l'interface Google Tag Manager, s'insère directement dans le `<head>` du document via `wp_head`, sans condition d'aucune sorte.

Ce snippet retarde l'injection du conteneur GTM jusqu'à ce qu'un consentement positif soit détecté ; il ne traite ni la configuration des tags à l'intérieur de GTM lui-même, ni la construction complète d'un bandeau de gestion du consentement, qui restent des sujets à part entière.

## Le problème posé par l'intégration standard

Le script fourni par Google Tag Manager, dans sa forme la plus répandue, ressemble à ceci une fois placé dans le thème :

```
<!-- 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 -->
```

Ce script s'exécute dès le chargement de la page, établissant une connexion vers les serveurs Google avant même que le visiteur n'ait vu le bandeau de consentement, encore moins qu'il n'ait eu l'occasion d'y répondre. Selon la configuration des tags à l'intérieur du conteneur, cela peut suffire à déposer des cookies de mesure d'audience avant tout accord, une pratique difficilement défendable au regard des exigences de consentement préalable.

## Principe du chargement conditionnel

La solution consiste à isoler le script GTM dans une fonction JavaScript qui ne s'exécute que lorsque le consentement a été positivement recueilli, indépendamment du bandeau cookie utilisé — qu'il s'agisse d'une solution développée en interne ou d'un outil de gestion de consentement du marché. Le point de contact entre les deux systèmes est un simple indicateur, stocké en cookie ou en `localStorage`, que le bandeau écrit au moment du clic sur « Accepter ».

> L'essentiel à retenir : Le conteneur GTM ne doit s'injecter qu'après un consentement positif explicite ; Un simple indicateur en cookie ou en localStorage suffit à piloter ce chargement conditionnel ; Le snippet reste indépendant du bandeau cookie utilisé

## Le snippet, côté thème

Le fichier JavaScript du thème surveille cet indicateur et déclenche l'injection du conteneur GTM dès qu'il devient positif, que ce soit immédiatement au chargement (si le consentement a déjà été donné lors d'une visite précédente) ou après un clic pendant la session en cours :

```
function consentementAccorde() {
    try {
        return localStorage.getItem('consentement_mesure_audience') === 'accepte';
    } catch (e) {
        return false;
    }
}

function chargerGoogleTagManager() {
    if (window.gtmDejaCharge) {
        return;
    }
    window.gtmDejaCharge = true;

    (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');
}

document.addEventListener('DOMContentLoaded', function() {
    if (consentementAccorde()) {
        chargerGoogleTagManager();
    }

    document.addEventListener('consentement-mesure-audience-accorde', function() {
        chargerGoogleTagManager();
    });
});
```

L'événement personnalisé `consentement-mesure-audience-accorde` est le point d'intégration : c'est au bandeau cookie, quel qu'il soit, de le déclencher (`document.dispatchEvent(new Event('consentement-mesure-audience-accorde'))`) au moment où le visiteur accepte, et d'écrire l'indicateur en `localStorage` pour les visites suivantes.

## Enregistrement dans le thème via wp_enqueue_script

Ce script se charge normalement, sans attribut `defer` ni `async` particulier au-delà des bonnes pratiques habituelles, puisque sa seule fonction est d'attendre un signal avant d'agir :

```
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'mon-theme-gtm-consentement',
        get_stylesheet_directory_uri() . '/assets/js/gtm-consentement.js',
        [],
        wp_get_theme()->get( 'Version' ),
        true
    );
} );
```

Le script GTM original, en dur dans `wp_head`, doit impérativement être retiré du thème une fois ce mécanisme en place : les deux ne doivent jamais coexister, sous peine de charger le conteneur deux fois ou, pire, de recréer la fuite de consentement que ce snippet cherche justement à corriger.

## Vérification

Le contrôle se fait simplement via l'onglet réseau des outils de développement du navigateur, en navigation privée : avant tout clic sur le bandeau, aucune requête vers `googletagmanager.com` ne doit apparaître. Après un clic sur « Accepter », la requête doit apparaître immédiatement, confirmant que le déclenchement fonctionne dans les deux sens.

> Un conteneur de mesure d'audience qui se charge avant le consentement n'est jamais un simple détail technique : c'est le point précis où la conformité se joue, visible en une ligne dans l'onglet réseau du navigateur.

## En résumé

Ce snippet ne remplace ni ne configure le bandeau cookie du site : il se contente d'écouter un signal de consentement et de retarder l'injection du conteneur GTM jusqu'à ce que ce signal soit positif. L'effort d'intégration reste minime — un fichier JavaScript et une ligne retirée de `wp_head` — pour un gain de conformité directement vérifiable dans l'onglet réseau du navigateur.
