Mon tuto : Le consentement avancé v2 de Google pour GA4

Je viens de passer un long moment pour comprendre ce qu’est le consentement v2 de Google et savoir comment le mettre en place sur mes sites. Alors pour éclaircir mes idées et rassembler les liens utiles que j’ai pu trouver, je publie cet article pour me faire un tutoriel et tout avoir au même endroit. Si ça peut vous aider aussi, tant mieux… et si vous constatez une erreur, signalez-la moi en commentaire.

Ce que vous allez trouver dans cet article :

Définition du mode Consentement :
- Pourquoi un mode avancé ?
Paramétrage du consentement dans GA4 :
Configurer le mode Consentement avancé sur les sites Web :
- Configurer le mode Consentement avancé avec Tarte au citron sur WordPress :
- Configurer le mode Consentement avancé avec une CMP (plateforme de management de cookie)
  - Avec l'extension Complianz sur WordPress
Autre liens utiles :

Définition du mode Consentement :

Le mode Consentement vous permet de communiquer à Google l’état du consentement de vos utilisateurs concernant les cookies ou les identifiants d’applications. Les balises ajustent leur comportement et respectent les choix des utilisateurs.

Le mode Consentement ne fournit pas de bannière ni de widget de consentement, mais il interagit avec votre bannière pour obtenir le consentement des visiteurs.
Source Google – À propos du mode Consentement

Pourquoi un mode avancé ?

Lorsque vous implémentez le mode Consentement dans sa version avancée :

les balises Google définissent les états du consentement par défaut « denied », sauf si vous définissez vos propres valeurs par défaut. Lorsque le consentement est denied, les balises Google envoient des pings sans cookie.
elles attendent l’interaction de l’utilisateur avec la bannière et modifient les états du consentement. Ce n’est que lorsqu’un utilisateur autorise la collecte de données que les balises Google envoient les données de mesure complètes.

Dans ce fonctionnement avancé V2, Google Analytics 4 ne dépose pas de cookies ou autre traceur tant qu’il n’a pas le consentement de l’internaute. À la place il envoie des informations anonymes, qui seront agrégées afin de venir compléter les données collectées sur la part d’utilisateurs ayant accepté le dépôt de cookies.

Paramétrage du consentement dans GA4 :

(Si vous partez de 0 et que vous paramétrez une nouvelle propriété GA4, je vous conseille de commencer par ici)

Il y a des paramétrages de données dans Administration > Paramètres de la Propriété > Collecte des données :

Et aussi dans Administration > Paramètres de la Propriété > Flux de données : cliquez sur le flux
Puis dans Paramètres de consentement > Vérifier les paramètres de consentement pour les données : cliquez sur « Gérer les données » et cochez « Tous les services ».

Configurer le mode Consentement avancé sur les sites Web :

Voici 2 liens vers le support Google pour la Gestion des balises Google pour Google Ads, Analytics et Tag Manager :

Configurer le mode Consentement avancé avec Tarte au citron sur WordPress :

Ce qui est ci-dessous, je l’ai trouvé sur le fil de discussion de Tarteaucitron sur Github.

Installation de la bannière des cookies

Télécharger le script Tarteaucitron sur Github. Décompressez l’archive et envoyez le dossier sur votre hébergement à la racine de votre site.

Pour WordPress, ajoutez ce code dans le fichier functions.php de votre thème (remplacez le nom du dossier de tarteaucitron par celui que vous avez mis et les URLs de votre politique de gestion des cookies) :

add_action( 'wp_head', 'tarte_au_citron', '2' );
function tarte_au_citron() {
?>
  <script src="/tarteaucitron.js-1.33.0/tarteaucitron.min.js"></script>
    <script type="text/javascript">
        tarteaucitron.init({
    	  "privacyUrl": "", /* Url de la politique de confidentialité */
          "bodyPosition": "top", /* top place le bandeau de consentement au début du code html, mieux pour l'accessibilité */

    	  "hashtag": "#tarteaucitron", /* Hashtag qui permet d'ouvrir le panneau de contrôle  */
    	  "cookieName": "tarteaucitron", /* Nom du cookie (uniquement lettres et chiffres) */
    
    	  "orientation": "bottom", /* Position de la bannière (top - bottom - popup - banner) */
       
          "groupServices": true, /* Grouper les services par catégorie */
          "showDetailsOnClick": true, /* Cliquer pour ouvrir la description */
          "serviceDefaultState": "wait", /* Statut par défaut (true - wait - false) */
                           
    	  "showAlertSmall": false, /* Afficher la petite bannière en bas à droite */
    	  "cookieslist": false, /* Afficher la liste des cookies via une mini bannière */
           "cookieslistEmbed": false, /* Afficher la liste des cookies dans le panneau de contrôle */
                           
          "closePopup": true, /* Afficher un X pour fermer la bannière */

          "showIcon": true, /* Afficher un cookie pour ouvrir le panneau */
          //"iconSrc": "", /* Optionnel: URL ou image en base64 */
          "iconPosition": "BottomLeft", /* Position de l'icons: (BottomRight - BottomLeft - TopRight - TopLeft) */

    	  "adblocker": false, /* Afficher un message si un Adblocker est détecté */
                           
          "DenyAllCta" : true, /* Afficher le bouton Tout refuser */
          "AcceptAllCta" : true, /* Afficher le bouton Tout accepter */
          "highPrivacy": true, /* Attendre le consentement */
          "alwaysNeedConsent": false, /* Demander le consentement même pour les services "Privacy by design" */
                           
    	  "handleBrowserDNTRequest": true, /* Refuser tout par défaut si Do Not Track est activé sur le navigateur */

    	  "removeCredit": true, /* Retirer le lien de crédit vers tarteaucitron.io */
    	  "moreInfoLink": true, /* Afficher le lien En savoir plus */

          "useExternalCss": false, /* Mode expert : désactiver le chargement des fichiers .css tarteaucitron */
          "useExternalJs": false, /* Mode expert : désactiver le chargement des fichiers .js tarteaucitron */

    	  //"cookieDomain": ".my-multisite-domaine.fr", /* Optionnel: domaine principal pour partager le consentement avec des sous domaines */
                          
          "readmoreLink": "", /* Changer le lien En savoir plus par défaut */

          "mandatory": true, /* Afficher un message pour l'utilisation de cookies obligatoires */
          "mandatoryCta": false, /* Afficher un bouton pour les cookies obligatoires (déconseillé) */
    
          //"customCloserId": "", /* Optionnel a11y: ID personnalisé pour ouvrir le panel */
          
          "googleConsentMode": true, /* Activer le Google Consent Mode v2 pour Google ads & GA4 */
          "bingConsentMode": true, /* Activer le Bing Consent Mode pour Clarity & Bing Ads */
          "pianoConsentMode": true, /* Activer le Consent Mode pour Piano Analytics */
          "pianoConsentModeEssential": false, /* Activer par défaut le mode Essential de Piano */
          "softConsentMode": false, /* Soft consent mode (le consentement est requis pour charger les tags) */

          "dataLayer": false, /* Envoyer un événement dans dataLayer avec le statut des services */
          "serverSide": false, /* Server side seulement, les tags ne sont pas chargé côté client */
          
          "partnersList": true /* Afficher le détail du nombre de partenaires sur la bandeau */
        });
	</script>
    <?php
}

Ajouter juste avant la fermeture du </body> les services voulus (voir le manuel d’installation de tarteaucitron). N’oubliez pas de suivre le reste des instructions de scripts à ajouter ou retirer.

Généralement on a les services :

GA4 (si pas intégré par Tag Manager)
les 6 services « consent » pour chaque signal du consent mode V2 (C’est pour que le signal passe en granted (autorisé) quand c’est activé sur la bannière TarteAuCitron ; si il est refusé ou sans consentement, il reste à denied.)
Mais aussi : Ads, Maps, Youtube, Facebook…

C’est à dire que pour WordPress, ajoutez ce code dans le fichier functions.php de votre thème (en le complétant selon vos services) :

add_action( 'wp_footer', 'tarte_au_citron_footer' );
function tarte_au_citron_footer() {
	?>
<script type="text/javascript">
// Google Analytics (GA4)
tarteaucitron.user.gtagUa = 'G-xxxxxxx';
tarteaucitron.user.gtagMore = function () {};
(tarteaucitron.job = tarteaucitron.job || []).push('gtag');

(tarteaucitron.job = tarteaucitron.job || []).push('gcmadstorage');
(tarteaucitron.job = tarteaucitron.job || []).push('gcmanalyticsstorage');
(tarteaucitron.job = tarteaucitron.job || []).push('gcmadsuserdata');
(tarteaucitron.job = tarteaucitron.job || []).push('gcmpersonalization');
(tarteaucitron.job = tarteaucitron.job || []).push('gcmfunctionality');
(tarteaucitron.job = tarteaucitron.job || []).push('gcmsecurity');
</script>
    <?php
}

Si vous utilisez Tag Manager, avec tarteaucitron

Dans l’interface Tag Manager, allez dans votre espace de travail > Balises.
Dans la « Balise Google » > Paramètres avancés > Paramètres de consentement : cochez « Aucun consentement supplémentaire requis ».

Dans votre fichier functions.php, le script complet ressemblera à ceci (en remplaçant la balise Google à 2 endroits, le nom du dossier de tarteaucitron par celui que vous avez mis, et les URLs de votre politique de gestion des cookies) :

//-----------------------------------------------------------------------------
// Ajouter le bandeau de cookies de tarteaucitron
// Mettre tout en bas de la page functions.php. Pas de defer ni async
add_action( 'wp_head', 'tarte_au_citron', '2' );
function tarte_au_citron() {
?>
  <script src="/tarteaucitron.js-1.33.0/tarteaucitron.min.js"></script>
    <script type="text/javascript">
        tarteaucitron.init({
    	  "privacyUrl": "", /* Url de la politique de confidentialité */
          "bodyPosition": "top", /* top place le bandeau de consentement au début du code html, mieux pour l'accessibilité */

    	  "hashtag": "#tarteaucitron", /* Hashtag qui permet d'ouvrir le panneau de contrôle  */
    	  "cookieName": "tarteaucitron", /* Nom du cookie (uniquement lettres et chiffres) */
    
    	  "orientation": "bottom", /* Position de la bannière (top - bottom - popup - banner) */
       
          "groupServices": true, /* Grouper les services par catégorie */
          "showDetailsOnClick": true, /* Cliquer pour ouvrir la description */
          "serviceDefaultState": "wait", /* Statut par défaut (true - wait - false) */
                           
    	  "showAlertSmall": false, /* Afficher la petite bannière en bas à droite */
    	  "cookieslist": false, /* Afficher la liste des cookies via une mini bannière */
           "cookieslistEmbed": false, /* Afficher la liste des cookies dans le panneau de contrôle */
                           
          "closePopup": true, /* Afficher un X pour fermer la bannière */

          "showIcon": true, /* Afficher un cookie pour ouvrir le panneau */
          //"iconSrc": "", /* Optionnel: URL ou image en base64 */
          "iconPosition": "BottomLeft", /* Position de l'icons: (BottomRight - BottomLeft - TopRight - TopLeft) */

    	  "adblocker": false, /* Afficher un message si un Adblocker est détecté */
                           
          "DenyAllCta" : true, /* Afficher le bouton Tout refuser */
          "AcceptAllCta" : true, /* Afficher le bouton Tout accepter */
          "highPrivacy": true, /* Attendre le consentement */
          "alwaysNeedConsent": false, /* Demander le consentement même pour les services "Privacy by design" */
                           
    	  "handleBrowserDNTRequest": true, /* Refuser tout par défaut si Do Not Track est activé sur le navigateur */

    	  "removeCredit": true, /* Retirer le lien de crédit vers tarteaucitron.io */
    	  "moreInfoLink": true, /* Afficher le lien En savoir plus */

          "useExternalCss": false, /* Mode expert : désactiver le chargement des fichiers .css tarteaucitron */
          "useExternalJs": false, /* Mode expert : désactiver le chargement des fichiers .js tarteaucitron */

    	  //"cookieDomain": ".my-multisite-domaine.fr", /* Optionnel: domaine principal pour partager le consentement avec des sous domaines */
                          
          "readmoreLink": "", /* Changer le lien En savoir plus par défaut */

          "mandatory": true, /* Afficher un message pour l'utilisation de cookies obligatoires */
          "mandatoryCta": false, /* Afficher un bouton pour les cookies obligatoires (déconseillé) */
    
          //"customCloserId": "", /* Optionnel a11y: ID personnalisé pour ouvrir le panel */
          
          "googleConsentMode": true, /* Activer le Google Consent Mode v2 pour Google ads & GA4 */
          "bingConsentMode": true, /* Activer le Bing Consent Mode pour Clarity & Bing Ads */
          "pianoConsentMode": true, /* Activer le Consent Mode pour Piano Analytics */
          "pianoConsentModeEssential": false, /* Activer par défaut le mode Essential de Piano */
          "softConsentMode": false, /* Soft consent mode (le consentement est requis pour charger les tags) */

          "dataLayer": false, /* Envoyer un événement dans dataLayer avec le statut des services */
          "serverSide": false, /* Server side seulement, les tags ne sont pas chargé côté client */
          
          "partnersList": true /* Afficher le détail du nombre de partenaires sur la bandeau */
        });
	</script>
    <?php
}
add_action( 'after_body', 'tagmanager_after_body' );
function tagmanager_after_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( 'wp_footer', 'tarte_au_citron_footer' );
function tarte_au_citron_footer() {
	?>
    <script type="text/javascript">
	tarteaucitron.user.googletagmanagerId = 'GTM-xxxxxxx';
        (tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');

	(tarteaucitron.job = tarteaucitron.job || []).push('gcmadstorage');
	(tarteaucitron.job = tarteaucitron.job || []).push('gcmanalyticsstorage');
	(tarteaucitron.job = tarteaucitron.job || []).push('gcmadsuserdata');
	(tarteaucitron.job = tarteaucitron.job || []).push('gcmpersonalization');
	(tarteaucitron.job = tarteaucitron.job || []).push('gcmfunctionality');
	(tarteaucitron.job = tarteaucitron.job || []).push('gcmsecurity');
	</script>
    <?php
}