Création de sites internet en Lot-et-Garonne (47)

06 12 86 20 98
contact@simplissite.com

Le consentement avancé v2 de Google pour GA4

Publié le

par

Delphine Tabard

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.

Table des matières
  1. Définition du mode Consentement :
  2. Paramétrage du consentement dans GA4 :
  3. Configurer le mode Consentement avancé sur les sites Web :
  4. 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

Lire aussi Support Google – Introduction à la gestion du consentement des utilisateurs

Pourquoi le mode avancé ?

Lorsque vous implémentez le mode Consentement dans sa version avancée, les balises Google se chargent lorsqu’un utilisateur ouvre le site Web. Les balises chargent l’API du mode Consentement et effectuent les opérations suivantes :

  • Elles 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 :

Support Google – Gestion des balises Google

Support Google – Configurer le mode consentement

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.

Le script de pré-configuration avec le consentement bloqué par défaut

Dans la balise <head> des pages Web, configurez l’objet dataLayer avant le code de votre bannière de consentement. Il bloque le consentement par défaut.

C’est à dire que concrètement pour WordPress, ajoutez ce code dans le fichier functions.php de votre thème (remplacez Google tag ID par votre identifiant).

add_action( 'wp_head', 'google_consent_v2', '1' );
function google_consent_v2() {
    ?>
    <script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag() { dataLayer.push(arguments); }
	  gtag('consent', 'default', {
		'ad_user_data': 'denied',
		'ad_personalization': 'denied',
		'ad_storage': 'denied',
		'analytics_storage': 'denied',
		'wait_for_update': 500,
	  });
	  gtag('js', new Date());
	  gtag('config', 'Google tag ID');
  </script>
<?php }

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-1.19.0/tarteaucitron.js"></script>
	<script type="text/javascript">
       tarteaucitron.init({
            "privacyUrl": "https://www.votre site.com/politique-de-cookies-ue/", /* Privacy policy url */
            "bodyPosition": "bottom", /* or top to bring it as first element for accessibility */
            "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
            "cookieName": "tarteaucitron", /* Cookie name */
            "orientation": "bottom", /* Banner position (top - middle) */
            "groupServices": true, /* Group services by category */
            "showDetailsOnClick": true, /* Click to expand the description */
            "serviceDefaultState": "wait", /* Default state (true - wait - false) */
            "showAlertSmall": false, /* Show the small banner on bottom right */
            "cookieslist": false, /* Show the cookie list */
            "closePopup": false, /* Show a close X on the banner */
            "showIcon": true, /* Show cookie icon to manage cookies */
            //"iconSrc": "", /* Optionnal: URL or base64 encoded image */
            "iconPosition": "BottomLeft", /* BottomRight, BottomLeft, TopRight and TopLeft */
            "adblocker": false, /* Show a Warning if an adblocker is detected */
            "DenyAllCta" : true, /* Show the deny all button */
            "AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
            "highPrivacy": true, /* HIGHLY RECOMMANDED Disable auto consent */
            "alwaysNeedConsent": false, /* Ask the consent for "Privacy by design" services */
            "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */
            "removeCredit": true, /* Remove credit link */
            "moreInfoLink": true, /* Show more info link */
            "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */
            "useExternalJs": false, /* If false, the tarteaucitron.js file will be loaded */
            //"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */ 
            "readmoreLink": "https://www.votre site.com/politique-de-cookies-ue/", /* Change the default readmore link */
            "mandatory": true, /* Show a message about mandatory cookies */
            "mandatoryCta": true, /* Show the disabled accept button when mandatory on */
            //"customCloserId": "", /* Optional a11y: Custom element ID used to open the panel */
            "googleConsentMode": true, /* Enable Google Consent Mode v2 for Google ads and GA4 */
            "partnersList": false /* Show the number of partners on the popup/middle banner */
    });
    </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 :

  • 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

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 x3, le nom du dossier de tarteaucitron par celui que vous avez mis, et les URLs de votre politique de gestion des cookies) :

/* Tag manager au chargement avec valeurs par defaut denied */
add_action( 'wp_head', 'google_consent_v2', '1' );
function google_consent_v2() {
    ?>
    <script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag() { dataLayer.push(arguments); }
	  gtag('consent', 'default', {
		'ad_user_data': 'denied',
		'ad_personalization': 'denied',
		'ad_storage': 'denied',
		'analytics_storage': 'denied',
		'wait_for_update': 500,
	  });
	  gtag('js', new Date());
	  gtag('config', 'GTM-xxxxxxx');
  </script>
  <!-- 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 }
//-----------------------------------------------------------------------------
// 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-1.19.0/tarteaucitron.js"></script>
	<script type="text/javascript">
       tarteaucitron.init({
            "privacyUrl": "https://www.votresite.com/mentions-legales-confidentialite/#cookies", /* Privacy policy url */
            "bodyPosition": "bottom", /* or top to bring it as first element for accessibility */
            "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
            "cookieName": "tarteaucitron", /* Cookie name */
            "orientation": "bottom", /* Banner position (top - middle) */
            "groupServices": true, /* Group services by category */
            "showDetailsOnClick": true, /* Click to expand the description */
            "serviceDefaultState": "wait", /* Default state (true - wait - false) */
            "showAlertSmall": false, /* Show the small banner on bottom right */
            "cookieslist": false, /* Show the cookie list */
            "closePopup": false, /* Show a close X on the banner */
            "showIcon": true, /* Show cookie icon to manage cookies */
            //"iconSrc": "", /* Optionnal: URL or base64 encoded image */
            "iconPosition": "BottomLeft", /* BottomRight, BottomLeft, TopRight and TopLeft */
            "adblocker": false, /* Show a Warning if an adblocker is detected */
            "DenyAllCta" : true, /* Show the deny all button */
            "AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
            "highPrivacy": true, /* HIGHLY RECOMMANDED Disable auto consent */
            "alwaysNeedConsent": false, /* Ask the consent for "Privacy by design" services */
            "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */
            "removeCredit": true, /* Remove credit link */
            "moreInfoLink": true, /* Show more info link */
            "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */
            "useExternalJs": false, /* If false, the tarteaucitron.js file will be loaded */
            //"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */ 
            "readmoreLink": "https://www.votresite.com/mentions-legales-confidentialite/#cookies", /* Change the default readmore link */
            "mandatory": true, /* Show a message about mandatory cookies */
            "mandatoryCta": true, /* Show the disabled accept button when mandatory on */
            //"customCloserId": "", /* Optional a11y: Custom element ID used to open the panel */
            "googleConsentMode": true, /* Enable Google Consent Mode v2 for Google ads and GA4 */
            "partnersList": false /* Show the number of partners on the popup/middle banner */
    });
    </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.job = tarteaucitron.job || []).push('youtube');
	
	(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
}

Vérifier le fonctionnement :

Depuis votre interface Tag Manager : cliquez sur Prévisualiser

Ou à l’aide du Tag Assistant de Google : Tutoriel Google – Configurer votre balise Google

(Dans Tag manager : utiliser le template de Simo ahava ? J’ai trouvé ça au cours de mes recherches, mais je ne sais pas si c’est utile…)

Avec CMP (plateforme de management de cookie)

Il existe des partenaires de Google pour l’implémentation du bandeau des cookies (voir la liste) : j’ai repéré ces 5 plates-formes CMP qui proposent une offre gratuite.

Support Google – Configurer votre bannière de consentement avec une plate-forme de gestion du consentement ou un système de gestion de contenu

Avec l’extension Complianz sur WordPress

Il faut la version payante pour le mode Consentement V2.
Lire « Definitive Guide to Tag Manager and Complianz »

Autre liens utiles :

How to implement Consent Mode V2 (with Cookiebot CMP & GTM)

À propos de l’auteure

Delphine Tabard

Je crée des sites internet depuis 2000 ! D’abord salariée, j’ai ensuite créé mon entreprise Simplissite en 2010. Ma formation initiale est un BTS en Multimédia-Infographie, mais vous pensez bien que pour être au top continuellement dans le domaine d’internet, je pratique une veille technologique continue. Je suis basée en Lot-et-Garonne, à Nérac, et je peux répondre à vos demandes dans toute la France.

Laisser un commentaire

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