Créer un modèle de mode Consentement

Cet article s'adresse aux développeurs qui gèrent une solution de gestion du consentement sur des sites Web qui utilisent Google Tag Manager (GTM).

Cette page présente les types de consentement dans Google Tag Manager et 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 de consentement des visiteurs à 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 de 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 plates-formes de gestion du consentement (CMP) qui proposent des modèles de mode Consentement peuvent être listés dans notre documentation sur le mode Consentement et voir leurs modèles apparaître dans le sélecteur de la galerie de modèles.

Ne créez pas de modèles qui utilisent la commande gtag consent. Utilisez plutôt l'API Tag Manager updateConsentState. Les commandes gtag sont placées dans une file d'attente après tous les autres messages en attente et ne sont pas nécessairement traitées avant le début de l'événement suivant. Pour en savoir plus, consultez la section Traitement des informations de la couche de données.

Le terme "plate-forme de gestion du consentement" (CMP) désigne généralement une solution de gestion du consentement fournie par un fournisseur. Cette page utilise l'abréviation CMP pour désigner à la fois les solutions tierces et les solutions internes.

État et types de consentement

Les balises Google et tierces ajustent leur comportement de stockage en fonction d'un état de consentement de granted ou denied. Ils peuvent comporter des vérifications du consentement intégrées 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, 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	Permet le stockage lié à la personnalisation (par exemple, les recommandations de vidéos).
security_storage	Permet le stockage lié à la sécurité (par exemple, la fonctionnalité d'authentification, la prévention des fraudes et les autres systèmes de protection des utilisateurs)

Remarque :Si vous proposez des options de consentement qui ne correspondent pas à ces types de consentement, vous pouvez également fournir des types de consentement personnalisés en fournissant votre propre clé de type de consentement.

Créer un modèle de consentement

Le mode Consentement suit les choix de consentement des visiteurs, et les vérifications du consentement des balises garantissent 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 setDefaultConsentState et updateConsentState de Tag Manager au lieu de gtag consent.

  Important :Les commandes gtag sont placées dans une file d'attente après tous les autres messages en attente et ne sont pas nécessairement traitées avant le début de l'événement suivant. Pour en savoir plus, consultez la section Traitement des informations de la couche de données.

• 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 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 l'état du consentement mis à jour.

1. Créer un modèle

Cette approche d'implémentation utilise un champ du modèle pour stocker l'état de consentement par défaut. Le code d'implémentation lit ce champ pour définir l'état de 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 configurerez également un rappel pour updateConsentState afin de gérer le cas où un visiteur n'a pas encore effectué ses sélections de consentement ou décide de modifier son consentement.

Pour créer un modèle de consentement:

1. Connectez-vous à votre compte Google Tag Manager.
2. Dans le panneau de navigation de gauche, sélectionnez Modèles.
3. Dans le volet Modèles de balise, cliquez sur Nouveau.

Pour définir des états du consentement par défaut:

1. Sélectionnez l'onglet Champs, puis cliquez sur Ajouter un champ > Tableau de paramètres.
2. Remplacez le nom par defaultSettings.
3. Développez le champ.
4. Remplacez Nom à afficher par Default settings.
5. Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, remplacez le nom par region et cochez la case Exiger que les valeurs de la colonne soient uniques.
6. Développez la colonne, puis définissez le nom à afficher sur Region (leave blank to have consent apply to all regions). L'instruction entre parenthèses est une documentation destinée aux utilisateurs de votre modèle. Découvrez comment configurer le consentement par défaut pour différentes régions.
7. Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, puis remplacez le nom par granted.
8. Développez la colonne et remplacez le nom à afficher par Granted Consent Types (comma separated).
9. Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, puis remplacez le nom par denied.
10. Développez la colonne et remplacez le nom à afficher par Denied Consent Types (comma separated).

Facultatif: Pour ajouter la fonctionnalité de masquage des données des annonces:

1. Cliquez sur Ajouter un champ, sélectionnez Case à cocher, puis remplacez le nom du champ par ads_data_redaction.
2. Remplacez le nom à afficher par Redact Ads Data.

En savoir plus sur le comportement des cookies avec le masquage des données des annonces

(Facultatif) Pour permettre la transmission de paramètres d'URL :

1. Cliquez sur Ajouter un champ, sélectionnez Case à cocher, puis remplacez le nom du champ par url_passthrough.
2. Modifier le nom à afficher sur Pass through URL parameters

En savoir plus sur la transmission de paramètres d'URL

Pour ajouter le code d'implémentation:

1. Ouvrez l'onglet Code dans l'éditeur de modèle.
2. Dans l'exemple de code ci-dessous, modifiez les champs d'espace réservé.
3. Copiez le code et remplacez-le par le code générique dans l'éditeur de modèles.
4. Enregistrez le modèle.

Remarque :Lorsque vous enregistrez le code pour la première fois, une erreur de validation se produit. Ce problème sera résolu lorsque vous ajouterez les noms de vos cookies plus tard dans l'onglet Autorisations.

// 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();

Ensuite, configurez les autorisations d'accès à l'état du consentement et aux cookies.

Pour ajouter des autorisations permettant de gérer les états de consentement:

1. Sélectionnez l'onglet Autorisations, puis cliquez sur Accède à l'état du consentement.
2. Cliquez sur Ajouter un type d'autorisation.
3. Cochez la case, puis sélectionnez ad_storage dans le menu déroulant.
4. Cochez Écrire.
5. Cliquez sur Ajouter.
6. Répétez les étapes 2 à 5 pour ad_user_data, ad_personalization et analytics_storage. Si vous avez besoin de types de consentement supplémentaires, ajoutez-les de la même manière.
7. Cliquez sur Enregistrer.

Pour ajouter des autorisations d'accès aux cookies:

1. Sélectionnez l'onglet Autorisations, puis cliquez sur Lit la ou les valeurs des cookies.
2. Sous Spécifique, saisissez le nom de chacun des cookies que votre code doit lire pour déterminer les choix de consentement de l'utilisateur, un nom par ligne.
3. 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 de la façon dont ce modèle peut être intégré 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);
  });
};

Mettre à jour l'état du consentement

Une fois qu'un visiteur de 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.

Remarque :L'appel updateConsentState doit être exécuté le plus tôt possible sur les pages qui suivent celle sur laquelle l'utilisateur interagit avec la bannière de consentement. Si possible, il est préférable d'utiliser le code en bac à sable du modèle pour lire le consentement de l'utilisateur directement à partir du ou des cookies qui le stockent au lieu d'utiliser du code externe. S'il est nécessaire d'effectuer des requêtes réseau ou d'effectuer d'autres tâches asynchrones avant d'appeler updateConsentState, vous devez spécifier un temps d'attente d'au moins 500 millisecondes dans le champ wait_for_update lors de l'appel de setDefaultConsentState. Vous laisserez ainsi le temps à ces tâches de se terminer avant le déclenchement des balises Google. Pour en savoir plus, consultez Intégrer des plates-formes de gestion du consentement asynchrone.

L'exemple suivant montre l'appel updateConsentState pour un visiteur qui a indiqué qu'il acceptait tous les types de stockage. Encore une fois, 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 spécifique à une région

Pour définir des états de consentement par défaut qui s'appliquent aux visiteurs provenant de zones géographiques 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 du modèle de respecter les réglementations régionales sans perdre les 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, la commande suivante définit l'état par défaut de analytics_storage sur denied pour les visiteurs en provenance d'Espagne et d'Alaska, et sur granted pour tous les autres :analytics_storage

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 apparaissent sur la même page avec des valeurs pour une région et une sous-région, celle avec une région plus spécifique sera appliquée. 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'appliquera à un visiteur de Californie.

Région	ad_storage	Comportement
États-Unis	'granted'	S'applique aux utilisateurs situés aux États-Unis qui ne se trouvent pas au Canada
US-CA	'denied'	S'applique aux utilisateurs situés au Canada et aux États-Unis
Non spécifié	'granted'	Utilise la valeur par défaut 'granted'. Dans cet exemple, cela s'applique aux utilisateurs qui ne se trouvent pas aux États-Unis ou au Canada.

Métadonnées supplémentaires

Vous pouvez utiliser l'API gtagSet pour définir les paramètres facultatifs suivants:

• url_passthrough
• ads_data_redaction
• developer_id

Ces API ne sont disponibles que dans l'environnement de bac à sable du modèle GTM.

Transmettre des informations sur 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 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 en local. Pour améliorer la qualité de mesure des clics sur les annonces dans ce cas, les annonceurs peuvent éventuellement transmettre des informations sur les clics sur les annonces via des paramètres d'URL sur les pages à l'aide d'une fonctionnalité appelée transfert d'URL.

De même, si analytics_storage est défini sur "denied", le contournement 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 cookies sur les pages.

Les conditions suivantes doivent être remplies pour utiliser le transfert d'URL:

• La page comporte des balises Google adaptées au consentement.
• Le site a activé 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 actuelle.
• Un gclid/dclid est présent dans l'URL (balise Google Ads et Floodlight uniquement)

Votre modèle doit permettre à l'utilisateur de configurer s'il souhaite activer ou non ce paramètre. Le code de modèle suivant permet de définir url_passthrough sur "true" :

gtagSet('url_passthrough', true);

Remarque :Si vous ajoutez l'option permettant de définir le transfert d'URL dans votre modèle, elle doit toujours être configurée dans les balises de l'outil de liaison des conversions (si elles sont utilisées) pour fonctionner comme prévu. Pour en savoir plus sur les bonnes pratiques à suivre lorsque vous utilisez le passthrough d'URL, consultez Gérer les paramètres de consentement.

Masquer les données relatives aux annonces

Lorsque ad_storage est refusé, aucun nouveau cookie n'est défini à des fins publicitaires. De plus, les cookies tiers précédemment définis sur google.com et doubleclick.net ne seront pas utilisés. Les données envoyées à Google incluront toujours l'URL complète, y compris les informations sur les clics sur les annonces dans les paramètres d'URL.

Pour masquer davantage vos données publicitaires 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 clic sur les annonces envoyés dans les requêtes réseau par les balises Google Ads et Floodlight sont masqués.

gtagSet('ads_data_redaction', true);

ID de développeur

Si vous êtes un fournisseur de CMP disposant d'un ID de développeur délivré par Google, utilisez la méthode suivante pour le définir le plus tôt possible dans votre modèle.

Vous n'avez besoin d'un ID de développeur que lorsque votre implémentation sera utilisée sur plusieurs sites Web par des entreprises ou entités sans lien. Si l'implémentation sera utilisée par un seul site ou une seule entité, ne demandez pas d'ID de développeur.

gtagSet('developer_id.<your_developer_id>', true);

Fournir de la documentation à vos utilisateurs

Vos utilisateurs utiliseront votre modèle de consentement pour configurer une balise qui recueille leur consentement. Fournissez à vos utilisateurs une documentation expliquant les bonnes pratiques suivantes:

• Définir les valeurs par défaut du consentement dans le tableau Paramètres
• Configurer des valeurs par défaut de consentement pour différentes régions en ajoutant des lignes de 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é.