Cet article s'adresse aux développeurs qui disposent d'une solution de gestion du consentement sur les sites Web qui utilisent Google Tag Manager (GTM).
Cette page présente les types de consentement dans Google Tag Manager et vous explique comment les intégrer à votre solution de gestion du consentement.
Pourquoi utiliser un modèle de balise pour le consentement ?
Lorsque vous fournissez un modèle de balise, vos utilisateurs peuvent intégrer votre solution de consentement sans code, ce qui représente un gain de temps et d'énergie considérable.
Les utilisateurs peuvent définir des états de consentement par défaut à l'aide d'un modèle de mode Consentement et communiquer les choix des visiteurs en termes de consentement à Google Tag Manager. Cela garantit un fonctionnement optimal des balises Google et tierces compatibles avec le mode Consentement.
En tant que créateur de modèles, vous pouvez implémenter des modèles du mode Consentement pour un usage interne ou les publier dans la galerie de modèles de la communauté pour les rendre publics. Les fournisseurs de PGC qui proposent des modèles pour le mode Consentement peuvent figurer dans notre documentation sur le mode Consentement et proposer leurs modèles dans l'outil de sélection de la galerie de modèles.
État du consentement et types de consentement
Les balises Google et tierces ajustent leur comportement de stockage en fonction de l'état du consentement granted
ou denied
. Ils peuvent intégrer des vérifications du consentement pour chacun des types de consentement suivants:
Type de consentement | Description |
---|---|
ad_storage |
Permet le stockage, tel que les cookies, lié à la publicité. |
ad_user_data |
Définit le consentement des utilisateurs pour l'envoi de données à Google à des fins de publicité en ligne. |
ad_personalization |
Définit le consentement pour la publicité personnalisée. |
analytics_storage |
Permet le stockage, tel que les cookies, lié à l'analyse (par exemple, la durée des visites). |
functionality_storage |
Active le stockage compatible avec les fonctionnalités du site Web ou de l'application, comme les paramètres linguistiques. |
personalization_storage |
Active le stockage lié à la personnalisation (recommandations de vidéos, par exemple). |
security_storage |
Permet le stockage lié à la sécurité, comme la fonctionnalité d'authentification, la prévention des fraudes et d'autres mécanismes de protection des utilisateurs |
Créer un modèle de consentement
Le mode Consentement effectue le suivi des choix de consentement des visiteurs, et les vérifications du consentement des balises permettent de s'assurer que le comportement des balises s'ajuste en conséquence. Lorsque vous créez un modèle de consentement, suivez les bonnes pratiques:
Utilisez les API du mode Consentement de Tag Manager setDefaultConsentState et updateConsentState au lieu de
gtag consent
.Définissez les états de consentement par défaut immédiatement après le déclenchement à l'aide du déclencheur Initialisation du consentement - Toutes les pages.
La CMP doit inviter le visiteur à accorder ou à refuser le consentement dès que possible pour tous les types de consentement applicables.
Lorsqu'un visiteur indique son choix de consentement, la CMP doit transmettre l'état de consentement mis à jour.
1. Créer un modèle
Cette approche d'implémentation utilise un champ du modèle pour contenir l'état du consentement par défaut. Le code d'implémentation lit ce champ pour définir l'état du consentement par défaut au moment de l'exécution. Pour la commande "update", votre code tente de lire un cookie défini par la solution de consentement pour stocker les choix de consentement des visiteurs. Vous allez également configurer un rappel pour que
updateConsentState
gère le cas où un visiteur n'a pas encore effectué son choix de consentement ou décide de le modifier.
Pour créer un modèle de consentement:
- Connectez-vous à votre compte Google Tag Manager.
- Dans le panneau de navigation de gauche, sélectionnez Modèles.
- Dans le volet Modèles de balise, cliquez sur Nouveau.
Pour définir des états de consentement par défaut:
- Sélectionnez l'onglet Champs, puis cliquez sur Ajouter un champ > Table de paramètres.
- Remplacez le nom par
defaultSettings
. - Développez le champ.
- Indiquez
Default settings
dans le champ Nom à afficher. - Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, remplacez le nom par
region
et cochez la case Exiger que les valeurs de colonne soient uniques. - Développez la colonne, puis remplacez le nom à afficher par
Region (leave blank to have consent apply to all regions)
. L'instruction entre parenthèses est la documentation destinée aux utilisateurs de votre modèle. En savoir plus sur la configuration du consentement par défaut pour différentes régions - Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, puis remplacez le nom par
granted
. - Développez la colonne et remplacez le nom à afficher par
Granted Consent Types (comma separated)
. - Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, puis remplacez le nom par
denied
. - Développer la colonne et remplacer le nom à afficher par
Denied Consent Types (comma separated)
Facultatif: Pour permettre le masquage des données relatives aux annonces:
- Cliquez sur Ajouter un champ, choisissez Case à cocher, puis remplacez le nom du champ par
ads_data_redaction
. - Remplacez le nom à afficher par
Redact Ads Data
.
En savoir plus sur le comportement des cookies avec le masquage des données relatives aux annonces
Facultatif: Pour permettre la transmission de paramètres d'URL, procédez comme suit:
- Cliquez sur Ajouter un champ, choisissez Case à cocher, puis remplacez le nom du champ par
url_passthrough
. - Remplacez le nom à afficher par
Pass through URL parameters
.
En savoir plus sur la transmission des paramètres d'URL
Pour ajouter le code d'implémentation:
- Ouvrez l'onglet Code dans l'éditeur de modèles.
- Dans l'exemple de code ci-dessous, modifiez les champs d'espace réservé.
- Copiez le code et remplacez-le par le code récurrent dans l'éditeur de modèles.
- Enregistrez le modèle.
// The first two lines are optional, use if you want to enable logging
const log = require('logToConsole');
log('data =', data);
const setDefaultConsentState = require('setDefaultConsentState');
const updateConsentState = require('updateConsentState');
const getCookieValues = require('getCookieValues');
const callInWindow = require('callInWindow');
const gtagSet = require('gtagSet');
const COOKIE_NAME = 'Your_cookie_name';
/*
* Splits the input string using comma as a delimiter, returning an array of
* strings
*/
const splitInput = (input) => {
return input.split(',')
.map(entry => entry.trim())
.filter(entry => entry.length !== 0);
};
/*
* Processes a row of input from the default settings table, returning an object
* which can be passed as an argument to setDefaultConsentState
*/
const parseCommandData = (settings) => {
const regions = splitInput(settings['region']);
const granted = splitInput(settings['granted']);
const denied = splitInput(settings['denied']);
const commandData = {};
if (regions.length > 0) {
commandData.region = regions;
}
granted.forEach(entry => {
commandData[entry] = 'granted';
});
denied.forEach(entry => {
commandData[entry] = 'denied';
});
return commandData;
};
/*
* Called when consent changes. Assumes that consent object contains keys which
* directly correspond to Google consent types.
*/
const onUserConsent = (consent) => {
const consentModeStates = {
ad_storage: consent['adConsentGranted'] ? 'granted' : 'denied',
ad_user_data: consent['adUserDataConsentGranted'] ? 'granted' : 'denied',
ad_personalization: consent['adPersonalizationConsentGranted'] ? 'granted' : 'denied',
analytics_storage: consent['analyticsConsentGranted'] ? 'granted' : 'denied',
functionality_storage: consent['functionalityConsentGranted'] ? 'granted' : 'denied',
personalization_storage: consent['personalizationConsentGranted'] ? 'granted' : 'denied',
security_storage: consent['securityConsentGranted'] ? 'granted' : 'denied',
};
updateConsentState(consentModeStates);
};
/*
* Executes the default command, sets the developer ID, and sets up the consent
* update callback
*/
const main = (data) => {
/*
* Optional settings using gtagSet
*/
gtagSet('ads_data_redaction', data.ads_data_redaction);
gtagSet('url_passthrough', data.url_passthrough);
gtagSet('developer_id.your_developer_id', true);
// Set default consent state(s)
data.defaultSettings.forEach(settings => {
const defaultData = parseCommandData(settings);
// wait_for_update (ms) allows for time to receive visitor choices from the CMP
defaultData.wait_for_update = 500;
setDefaultConsentState(defaultData);
});
// Check if cookie is set and has values that correspond to Google consent
// types. If it does, run onUserConsent().
const settings = getCookieValues(COOKIE_NAME);
if (typeof settings !== 'undefined') {
onUserConsent(settings);
}
/**
* Add event listener to trigger update when consent changes
*
* References an external method on the window object which accepts a
* function as an argument. If you do not have such a method, you will need
* to create one before continuing. This method should add the function
* that is passed as an argument as a callback for an event emitted when
* the user updates their consent. The callback should be called with an
* object containing fields that correspond to the five built-in Google
* consent types.
*/
callInWindow('addConsentListenerExample', onUserConsent);
};
main(data);
data.gtmOnSuccess();
Configurez ensuite les autorisations d'accès à l'état de consentement et aux cookies.
Pour ajouter des autorisations permettant de gérer les états de consentement:
- Sélectionnez l'onglet Autorisations, puis cliquez sur Accès à l'état du consentement.
- Cliquez sur Ajouter un type de consentement.
- Cochez la case et sélectionnez
ad_storage
dans le menu déroulant. - Cochez Écrire.
- Cliquez sur Ajouter.
- Répétez les étapes 2 à 5 pour
ad_user_data
,ad_personalization
etanalytics_storage
. Si vous avez besoin de types de consentement supplémentaires, ajoutez-les de la même manière. - Cliquez sur Enregistrer.
Pour ajouter des autorisations d'accès aux cookies:
- Sélectionnez l'onglet Autorisations, puis cliquez sur Lire la ou les valeurs des cookies.
- Sous Specific (Spécifiques), saisissez les noms de chacun des cookies que votre code doit lire pour déterminer les choix de consentement de l'utilisateur (un nom par ligne).
- Cliquez sur Enregistrer.
2. Créer des tests unitaires
Consultez la section Tests afin d'en savoir plus sur la création de tests pour votre modèle.
3. Intégrer le modèle à la solution de consentement
Le code suivant montre comment intégrer ce modèle au code de votre solution de gestion du consentement en ajoutant un écouteur:
// Array of callbacks to be executed when consent changes
const consentListeners = [];
/**
* Called from GTM template to set callback to be executed when user consent is provided.
* @param {function} Callback to execute on user consent
*/
window.addConsentListenerExample = (callback) => {
consentListeners.push(callback);
};
/**
* Called when user grants/denies consent.
* @param {Object} Object containing user consent settings.
*/
const onConsentChange = (consent) => {
consentListeners.forEach((callback) => {
callback(consent);
});
};
Modifier l'état du consentement
Une fois qu'un visiteur d'un site Web a indiqué ses choix de consentement, généralement en interagissant avec une bannière de consentement, le code du modèle doit mettre à jour les états de consentement en conséquence avec l'API updateConsentState.
L'exemple suivant montre l'appel updateConsentState
pour un visiteur ayant accepté tous les types de stockage. Là encore, cet exemple utilise des valeurs codées en dur pour granted
, mais en pratique, elles doivent être déterminées au moment de l'exécution à l'aide du consentement du visiteur collecté par la CMP.
const updateConsentState = require('updateConsentState');
updateConsentState({
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
'analytics_storage': 'granted',
'functionality_storage': 'granted',
'personalization_storage': 'granted',
'security_storage': 'granted'
});
À propos du comportement propre à la région
Pour définir des états de consentement par défaut qui s'appliquent aux visiteurs provenant de zones spécifiques, spécifiez une région (selon la norme ISO 3166-2) dans le modèle. L'utilisation de valeurs de région permet aux utilisateurs des modèles de se conformer aux réglementations régionales sans perdre d'informations des visiteurs situés en dehors de ces régions. Lorsqu'une région n'est pas spécifiée dans une commande setDefaultConsentState
, la valeur s'applique à toutes les autres régions.
Par exemple, ce qui suit définit l'état par défaut de analytics_storage
sur denied
pour les visiteurs provenant d'Espagne et d'Alaska, et analytics_storage
sur granted
pour tous les autres:
const setDefaultConsentState = require('setDefaultConsentState');
setDefaultConsentState({
'analytics_storage': 'denied',
'region': ['ES', 'US-AK']
});
setDefaultConsentState({
'analytics_storage': 'granted'
});
Les réponses les plus spécifiques prévalent
Si deux commandes de consentement par défaut se produisent sur la même page avec des valeurs pour une région et une sous-région, celle associée à une région plus spécifique prend effet. Par exemple, si vous avez défini ad_storage
sur 'granted'
pour la région US
et ad_storage
sur 'denied'
pour la région US-CA
, le paramètre US-CA
plus spécifique s'applique à un visiteur de Californie.
Région | ad_storage |
Comportement |
---|---|---|
États-Unis | 'granted' |
S'applique aux utilisateurs situés aux États-Unis qui ne sont pas au Canada |
US-CA | 'denied' |
S'applique aux utilisateurs situés aux États-Unis (Canada) |
Non spécifié | 'granted' |
Utilise la valeur par défaut de 'granted' . Dans cet exemple, cela s'applique aux utilisateurs qui ne sont ni aux États-Unis, ni au Canada
|
Métadonnées supplémentaires
Vous pouvez définir les paramètres facultatifs suivants à l'aide de l'API gtagSet:
Ces API ne sont disponibles que dans l'environnement de bac à sable des modèles de commercialisation.
Transmettre des informations sur les clics sur les annonces, les ID client et les identifiants de session dans les URL
Lorsqu'un visiteur accède au site Web d'un annonceur après avoir cliqué sur une annonce, des informations sur l'annonce peuvent être ajoutées aux URL de la page de destination en tant que paramètre de requête. Pour améliorer la précision des conversions, les balises Google stockent généralement ces informations dans des cookies propriétaires sur le domaine de l'annonceur.
Toutefois, si ad_storage
est défini sur denied
, les balises Google n'enregistreront pas ces informations localement. Dans ce cas, pour améliorer la qualité de la mesure des clics sur les annonces, les annonceurs peuvent éventuellement transmettre les informations concernant les clics sur les annonces via des paramètres d'URL entre les pages, à l'aide d'une fonctionnalité appelée "transfert d'URL".
De même, si analytics_storage
est défini sur "Refusé", le transfert d'URL peut être utilisé pour envoyer des analyses basées sur les événements et les sessions (y compris les conversions) sans cookies sur les pages.
Pour utiliser le transfert d'URL, les conditions suivantes doivent être remplies:
- Des balises Google compatibles avec le consentement sont présentes sur la page.
- Le site a choisi d'utiliser la fonctionnalité de transfert d'URL.
- Le mode Consentement est implémenté sur la page.
- Le lien sortant fait référence au même domaine que celui de la page active.
- L'URL contient un paramètre gclid/dclid (balises Google Ads et Floodlight uniquement).
Votre modèle doit permettre à l'utilisateur du modèle d'indiquer s'il souhaite activer ou non ce paramètre. Le modèle de code suivant est utilisé pour définir "url_passthrough" sur "true" :
gtagSet('url_passthrough', true);
Masquer les données relatives aux annonces
Lorsque la règle ad_storage
est refusée, aucun nouveau cookie n'est défini à des fins publicitaires. De plus, les cookies tiers préalablement définis sur google.com et doubleclick.net ne seront pas utilisés. Les données envoyées à Google incluent toujours l'URL complète de la page, y compris les informations concernant les clics sur les annonces dans les paramètres d'URL.
Pour masquer davantage les données relatives à vos annonces lorsque ad_storage
est refusé, définissez ads_data_redaction
sur "true".
Lorsque ads_data_redaction
est défini sur "true" et que ad_storage
est refusé, les identifiants de clics sur une annonce envoyés dans les requêtes réseau par Google Ads et les balises Floodlight sont masqués.
gtagSet('ads_data_redaction', true);
ID de développeur
Si vous êtes un fournisseur de PGC avec un ID de développeur délivré par Google, utilisez la méthode suivante pour définir cet ID le plus tôt possible dans votre modèle.
Vous n'avez besoin d'un ID de développeur que lorsque votre implémentation est utilisée sur plusieurs sites Web par des entreprises ou des entités non liées. Si l'implémentation est utilisée par un site ou une entité, ne demandez pas d'ID de développeur.
gtagSet('developer_id.<your_developer_id>', true);
Fournissez des documents à vos utilisateurs
Vos utilisateurs configureront une balise qui recueille leur consentement à l'aide de votre modèle de consentement. Fournissez à vos utilisateurs des documents expliquant les bonnes pratiques suivantes:
- comment définir les paramètres de consentement par défaut dans le tableau Paramètres ;
- Comment configurer les paramètres de consentement par défaut pour différentes régions en ajoutant des lignes de tableau supplémentaires
- Déclenchez la balise sur le déclencheur Initialisation du consentement - Toutes les pages.
Étapes suivantes
Si vous souhaitez fournir votre modèle à tous les utilisateurs de Tag Manager, importez-le dans la galerie de modèles de la communauté.