Créer un modèle de mode Consentement

Ce document s'adresse aux développeurs qui gèrent une solution de gestion du consentement sur des sites Web utilisant 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 leur permet de gagner beaucoup de temps et d'efforts.

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 le fonctionnement optimal des balises Google et tierces compatibles avec le mode Consentement.

En tant que créateur de modèle, vous pouvez implémenter des modèles de mode Consentement pour une utilisation interne ou les publier dans la galerie de modèles de la communauté pour les rendre accessibles au public. 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 présentés 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 mises en file d'attente après tous les autres messages en attente et peuvent ne pas être traitées avant le début de l'événement suivant. Pour en savoir plus, consultez Traitement des informations de la couche de données.

Une plate-forme de gestion du consentement (CMP) désigne généralement une solution de gestion du consentement fournie par un fournisseur. Sur cette page, l'abréviation CMP fait référence aux solutions tierces et internes.

État du consentement et types de consentement

Les balises Google et tierces ajustent leur comportement de stockage en fonction d'un état de consentement granted ou denied. Elles peuvent intégrer des vérifications du consentement pour l'un 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 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, tel que les cookies, lié à l'analyse (par exemple, la durée de la visite).
functionality_storage	Permet le stockage qui prend en charge la fonctionnalité du site Web ou de l'application comme les paramètres de langue.
personalization_storage	Permet le stockage lié à la personnalisation, comme les recommandations de vidéos.
security_storage	Permet le stockage lié à la sécurité, comme la fonctionnalité d'authentification la prévention de la fraude et d'autres protections 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 suivantes :

• Utilisez les API de mode Consentement de Tag Manager setDefaultConsentState et updateConsentState au lieu de gtag consent.

  Important : gtag commandes sont mises en file d'attente après tous les autres messages en attente et peuvent ne pas être traitées avant le début de l'événement suivant. Pour en savoir plus, consultez 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 dans le 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 de mise à jour, 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 fait 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 menu de navigation de gauche, sélectionnez Modèles.
3. Dans le volet Modèles de balises, cliquez sur Nouveau.

Pour définir les états de consentement par défaut :

1. Sélectionnez l'onglet Champs, cliquez sur Ajouter un champ > Table de paramètres.
2. Remplacez le nom par defaultSettings.
3. Développez le champ.
4. Remplacez le 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 colonne soient uniques.
6. 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 une documentation destinée aux utilisateurs de votre modèle. En savoir plus sur la configuration des valeurs par défaut du consentement pour différentes régions.
7. Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, 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, 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 prise en charge du masquage des données relatives aux 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 relatives aux annonces

Facultatif : Pour ajouter la prise en charge du transfert des paramètres d'URL :

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

En savoir plus sur le transfert des paramètres d'URL

Pour ajouter le code d'implémentation :

1. Ouvrez l'onglet Code dans l'éditeur de modèles.
2. Dans l'exemple de code ci-dessous, modifiez les champs d'espace réservé.
3. Copiez le code et remplacez le code récurrent 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. Elle sera résolue lorsque vous ajouterez vos noms de cookies ultérieurement 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 JSON = require('JSON');
const COOKIE_NAME = 'Your_cookie_name';
/*
 *   Splits the input string using comma as a delimiter, returning an array of
 *   strings
 */
const splitInput = (input) => {
  if (!input) return [];
  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). Add optional chaining to safely handle cases
  // where defaultSettings might be null or undefined.
  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 cookieValues = getCookieValues(COOKIE_NAME);
  if (cookieValues && cookieValues.length > 0) {
    try {
      const settings = JSON.parse(cookieValues[0]);
      if (settings) {
        onUserConsent(settings);
      }
    } catch (e) {
      // Log an error if the cookie value is not valid JSON.
    }
  }
  /**
   *   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 pour accéder à l'état du consentement et aux cookies.

Pour ajouter des autorisations de gestion des états de consentement :

1. Sélectionnez l'onglet Autorisations , puis cliquez sur État du consentement des accès.
2. Cliquez sur Ajouter un type de consentement.
3. Cliquez sur la case et sélectionnez ad_storage dans le menu déroulant.
4. Cochez la case É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 d'autres types de consentement, 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 de cookie.
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 savoir comment créer des tests pour votre modèle, consultez Tests.

3. Intégrer le modèle à la solution de consentement

Le code suivant montre un exemple d'intégration de 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);
  });
};

Mettre à jour l'état du consentement

Une fois qu'un visiteur du 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 après celle où 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'autres tâches asynchrones avant d'appeler updateConsentState, vous devez spécifier un délai d'attente d'au moins 500 millisecondes dans le champ wait_for_update lorsque vous appelez setDefaultConsentState. Cela permettra à 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 asynchrones.

L'exemple suivant montre l'appel updateConsentState pour un visiteur qui a indiqué qu'il acceptait tous les types de stockage. Là encore, cet exemple utilise des valeurs codées en dur pour granted, mais en pratique, celles-ci 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 de zones spécifiques, spécifiez une région (conformément à la norme ISO 3166-2) dans le modèle. L'utilisation de valeurs de région permet aux utilisateurs de modèles de se conformer aux réglementations régionales sans perdre d'informations sur les visiteurs en dehors de ces régions. Lorsqu'aucune région n'est 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 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'
});

La valeur la plus spécifique est prioritaire

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 la région la plus spécifique prendra 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, un visiteur de Californie verra le paramètre US-CA plus spécifique prendre effet.

Région	ad_storage	Comportement
États-Unis	'granted'	S'applique aux utilisateurs aux États-Unis qui ne sont pas en Californie
US-CA	'denied'	S'applique aux utilisateurs en Californie
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 ni en Californie.

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.

Transférer les 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'enregistrent pas ces informations localement. Pour améliorer la qualité de la mesure des clics sur les annonces dans ce cas, les annonceurs peuvent éventuellement transmettre les informations sur les clics sur les annonces via des paramètres d'URL sur plusieurs 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 plusieurs pages.

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

• Des balises Google avec vérification du consentement sont présentes sur la page.
• 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 (balises Google Ads et Floodlight uniquement).

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

gtagSet('url_passthrough', true);

Remarque : Si vous ajoutez l'option de définition du transfert d'URL dans votre modèle, vous devez toujours la configurer dans les balises Conversion Linker (si elles sont utilisées) pour qu'elle fonctionne comme prévu. Pour en savoir plus sur les bonnes pratiques concernant l'utilisation du transfert 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 de la page, y compris les informations sur les clics sur les annonces dans les paramètres d'URL.

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

gtagSet('ads_data_redaction', true);

ID de développeur

Si vous êtes un fournisseur de CMP avec un ID de développeur émis 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 si 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 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 collecte le consentement de l'utilisateur. Fournissez à vos utilisateurs une documentation expliquant les bonnes pratiques suivantes :

• Comment définir les valeurs par défaut du consentement dans le tableau Paramètres.
• Comment configurer les valeurs par défaut du consentement pour différentes régions en ajoutant des lignes de tableau supplémentaires.
• Déclencher la balise sur le déclencheur Initialisation du consentement – Toutes les pages.

Étapes suivantes

Si vous souhaitez mettre votre modèle à la disposition de tous les utilisateurs de Tag Manager, importez-le dans la galerie de modèles de la communauté.