Cet article s'adresse aux développeurs qui gèrent une solution de gestion du consentement sur sites Web qui utilisent Google Tag Manager (GTM).
Cette page présente les types de consentement dans Google Tag Manager et vous explique comment : à 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 consentement sans code, ce qui représente un gain de temps et d'énergie considérable.
Les utilisateurs peuvent définir les états du consentement par défaut à l'aide d'un modèle du mode Consentement les choix de consentement des visiteurs à Google Tag Manager. Cela permet d'assurer une des balises Google et tierces compatibles avec le 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é et les mettre à la disposition du public. Les fournisseurs de PGC qui proposent les modèles du mode Consentement peuvent être listés dans notre documentation et l'outil de sélection de la galerie de modèles comporte ses modèles.
État du consentement et types de consentement
Google et les balises tierces ajustent leur comportement de stockage en fonction du consentement
state de granted
ou denied
. Elles peuvent disposer de vérifications intégrées du consentement
pour l'un des types de consentement suivants:
Type de consentement | Description |
---|---|
ad_storage |
Permet le stockage, comme les cookies, lié à la publicité. |
ad_user_data |
Définit le consentement pour l'envoi de données utilisateur à Google à des fins de publicité en ligne. |
ad_personalization |
Définit le consentement pour la publicité personnalisée. |
analytics_storage |
Permet le stockage, comme les cookies, lié à l'analyse (par exemple, durée). |
functionality_storage |
Permet 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 (vidéo, par exemple) recommandations. |
security_storage |
Permet le stockage lié à la sécurité, par exemple l'authentification la prévention des fraudes et toute autre protection des utilisateurs |
Créer un modèle de consentement
Le mode Consentement suit les choix de consentement des visiteurs et vérifie le consentement des balises veillez à ce que le comportement des balises s'ajuste en conséquence. Lorsque vous créez un consentement modèle, suivez les bonnes pratiques:
Utiliser les API du mode Consentement de Tag Manager setDefaultConsentState et updateConsentState au lieu de
gtag consent
.Définissez les états du consentement par défaut immédiatement après le déclenchement à l'aide de la Initialisation du consentement - Toutes les pages.
La CMP doit inviter le visiteur dès que possible à accorder ou à refuser son consentement pour tous les types de consentement applicables.
Lorsqu'un visiteur indique son choix de consentement, la CMP doit transmettre la version mise à jour l'état du consentement.
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 afin de stocker les choix de consentement des visiteurs. Vous allez également configurer un rappel pour
updateConsentState
afin de gérer la demande. lorsqu'un visiteur n'a pas encore choisi le consentement ou décide de le modifier leur consentement.
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 tag, cliquez sur Nouveau.
Pour définir les états du consentement par défaut:
- Sélectionnez l'onglet Champs, puis cliquez sur Ajouter un champ > Tableau de paramètres.
- Remplacez le nom par
defaultSettings
. - Développez le champ.
- Définissez le nom à afficher sur
Default settings
. - Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, remplacez le nom par
region
, puis Cochez la case Exiger que les valeurs des colonnes soient uniques. - Développez la colonne et remplacez le nom à afficher par
Region (leave blank to have consent apply to all regions)
. L’instruction entre parenthèses est pour les utilisateurs de modèles. En savoir plus sur configurer le 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éveloppez la colonne et remplacez le nom à afficher par
Denied Consent Types (comma separated)
.
Facultatif: Pour permettre le masquage des données relatives aux annonces, procédez comme suit:
- 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 ajouter la prise en charge de 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 de paramètres d'URL
Pour ajouter le code d'implémentation:
- Ouvrez l'onglet Code dans l'éditeur de modèle.
- 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 pour accéder à l'état du consentement les cookies.
Pour ajouter des autorisations permettant de gérer les états du consentement:
- Sélectionnez l'onglet Autorisations, puis cliquez sur Accès à l'état du consentement.
- Cliquez sur Ajouter un type de consentement.
- Cliquez sur la case, puis sélectionnez
ad_storage
dans le menu déroulant. - Cochez la case Écrire.
- Cliquez sur Ajouter.
- Répétez les étapes 2 à 5 pour
ad_user_data
,ad_personalization
etanalytics_storage
Si vous avez besoin d'autres types de consentement, ajoutez-les dans 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 Lit les valeurs des cookies.
- Sous Spécifique, saisissez le nom de chacun des cookies dont votre code a besoin. pour déterminer les choix de consentement de l'utilisateur (un nom par ligne).
- Cliquez sur Enregistrer.
2. Créer des tests unitaires
Pour en savoir plus sur la création de tests pour votre modèle, consultez la section Tests.
3. Intégrer le modèle à la solution de consentement
Le code suivant montre un exemple d'intégration de ce modèle par le 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);
});
};
Mettre à jour l'état du consentement
Une fois qu'un visiteur du site Web a indiqué ses choix de consentement, généralement via interagissant avec une bannière de consentement, le code du modèle doit modifier le consentement en conséquence avec l'API updateConsentState.
L'exemple suivant montre l'appel updateConsentState
pour un visiteur qui
ont indiqué accepter tous les types de stockage. Là encore, cet exemple utilise des données
pour granted
, mais en pratique, elles doivent être déterminées au moment de l'exécution
à l'aide du consentement du visiteur
recueilli 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 spécifique à une région
Pour définir des états du 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).
modèle. L'utilisation de valeurs régionales permet aux utilisateurs des modèles de respecter les règles
sans perdre les informations des visiteurs en dehors de ces régions. Quand ?
une région n'est pas spécifiée dans une commande setDefaultConsentState
, la valeur
s'applique à toutes les autres régions.
Par exemple, le code suivant définit l'état par défaut de analytics_storage
sur
denied
pour les visiteurs provenant d'Espagne et d'Alaska, et définit analytics_storage
sur
granted
pour toutes les autres:
const setDefaultConsentState = require('setDefaultConsentState');
setDefaultConsentState({
'analytics_storage': 'denied',
'region': ['ES', 'US-AK']
});
setDefaultConsentState({
'analytics_storage': 'granted'
});
Le plus spécifique prévaut.
Si deux commandes de consentement par défaut se produisent sur la même page avec des valeurs pour une région
et la sous-région, celle avec une région plus spécifique sera appliquée. Pour
Par exemple, si ad_storage
est défini sur 'granted'
pour la région US
et
ad_storage
défini sur 'denied'
pour la région US-CA
, un visiteur provenant de Californie
pour que le paramètre US-CA
le plus spécifique soit appliqué.
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' |
Applicable aux utilisateurs situés au Canada |
Non spécifié | 'granted' |
Utilise la valeur par défaut de 'granted' . Dans cet exemple,
s'applique aux utilisateurs qui ne se trouvent pas au Canada ni aux États-Unis.
|
Métadonnées supplémentaires
L'API gtagSet vous permet de définir les paramètres facultatifs suivants:
Ces API ne sont disponibles que dans l'environnement de bac à sable du modèle de commercialisation.
Transmettre les informations concernant les clics sur les annonces, l'ID client et l'ID 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 page de destination sous la forme d'une requête . Pour améliorer la précision des conversions, les balises Google stockent généralement dans les cookies propriétaires sur le domaine de l'annonceur.
Toutefois, si ad_storage
est défini sur denied
, les balises Google n'enregistreront pas cette information.
localement. Dans ce cas, pour améliorer la qualité de la mesure des clics, les annonceurs peuvent
vous pouvez éventuellement transmettre les informations concernant les clics sur une annonce via les paramètres d'URL d'une page à l'autre, à l'aide d'un
appelée "URL passthrough".
De même, si analytics_storage
est défini sur "denied", le passthrough d'URL peut être utilisé
pour envoyer des données analytiques basées sur les événements et les sessions (y compris les conversions) sans
des cookies sur toutes les pages.
Pour utiliser le contournement d'URL, les conditions suivantes doivent être remplies:
- Des balises Google tenant compte du consentement sont présentes sur la page.
- Le site a activé l'utilisation de la fonctionnalité de contournement 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 actuelle.
- L'URL contient un paramètre gclid/dclid (balises Google Ads et Floodlight uniquement).
Votre modèle doit permettre à l'utilisateur du modèle de configurer souhaite activer ce paramètre. Le code de modèle suivant permet de définir url_passthrough sur "true" :
gtagSet('url_passthrough', true);
Masquer les données relatives aux annonces
Lorsque ad_storage
est refusé, aucun nouveau cookie n'est défini pour la publicité
objectifs. En outre, les cookies tiers précédemment définis sur google.com et
doubleclick.net ne sera pas utilisé. Les données envoyées à Google incluront toujours le
URL complète, y compris les informations concernant les clics sur une annonce 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é, le clic sur l'annonce est
envoyés dans les demandes réseau par Google Ads et les balises Floodlight seront
masquées.
gtagSet('ads_data_redaction', true);
ID de développeur
Si vous êtes un fournisseur de CMP avec un ID de développeur délivré par Google, utilisez ce qui suit : pour définir cette valeur le plus tôt possible dans votre modèle.
Vous n'avez besoin d'un ID de développeur que si votre implémentation est utilisée dans plusieurs sites Web par des entreprises ou des entités sans rapport avec elles. Si l'implémentation est destinée à être utilisée par un site ou une entité, demandez un ID de développeur.
gtagSet('developer_id.<your_developer_id>', true);
Fournir des documents à vos utilisateurs
Vos utilisateurs utiliseront votre modèle de consentement pour configurer une balise qui collecte les données le consentement des utilisateurs. Fournissez à vos utilisateurs des documents qui expliquent le mieux les points suivants pratiques:
- Définir les paramètres de consentement par défaut dans le tableau Paramètres
- configurer les paramètres de consentement par défaut pour différentes régions en ajoutant les lignes du tableau.
- 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é.