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 vous explique comment les intégrer à votre solution de gestion du consentement.

État du consentement et types de consentement

Les balises Google et tierces ajustent leur comportement de stockage en fonction de l'état du consentement, qui peut être granted ou denied. Ils peuvent inclure des vérifications du consentement intégrées pour les types de consentement suivants :

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 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 au déclenchement à l'aide du déclencheur Initialisation du consentement - Toutes les pages.

• La CMP doit demander au visiteur dès que possible d'accorder ou de refuser son consentement 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 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 de mise à jour, 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 updateConsentState afin de gérer le cas où un visiteur n'a pas encore fait son choix concernant le consentement ou décide de le modifier.

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 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 > Table de paramètres.
2. Remplacez le nom par defaultSettings.
3. Développez le champ.
4. Définissez le Nom à afficher sur Default settings.
5. Cliquez sur Ajouter une colonne, sélectionnez Saisie de texte, remplacez le nom par region et cochez la case Exiger des valeurs de colonne 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. Découvrez comment configurer des paramètres de 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 prise en charge de la rédaction des données publicitaires :

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

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

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. Définissez le nom à afficher sur Pass through URL parameters.

En savoir plus sur la transmission 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 de l'espace réservé.
3. Copiez le code et collez-le à la place du code standard dans l'éditeur de modèles.
4. 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 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();

Configurez ensuite les autorisations pour accéder à 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 État du consentement pour l'accès.
2. Cliquez sur Ajouter un type d'autorisation.
3. Cliquez sur 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 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 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 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 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.

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 provenant de zones spécifiques, indiquez une région (selon la norme ISO 3166-2) dans le modèle. L'utilisation de valeurs régionales permet aux utilisateurs de modèles de respecter les réglementations régionales sans perdre les informations des visiteurs situés 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 spécificité est prioritaire

Si deux commandes de consentement par défaut s'affichent 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, le paramètre US-CA plus spécifique s'appliquera à un visiteur de 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 des modèles GTM.

Transmettre 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 des pages 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 la mesure des clics sur les annonces dans ce cas, les annonceurs peuvent éventuellement transmettre les informations sur les clics sur les annonces à l'aide de paramètres d'URL sur plusieurs pages grâce à 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 données analytiques basées sur les événements et les sessions (y compris les conversions) sans cookies sur plusieurs pages.

Pour utiliser le transfert d'URL, vous devez remplir les conditions suivantes :

• Des balises Google adaptées au 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 renvoie 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 ce paramètre. Le code de modèle suivant est utilisé pour 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 à 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 les données de 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 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 é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 sera utilisée sur plusieurs sites Web par des entreprises ou entités non liées. 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 le consentement des utilisateurs. Fournissez à vos utilisateurs de la documentation expliquant les bonnes pratiques suivantes :

• Découvrez comment définir des paramètres de consentement par défaut dans le tableau Paramètres.
• Découvrez comment configurer des paramètres de consentement par défaut pour différentes régions en ajoutant des lignes de tableau supplémentaires.
• Déclenchez la balise avec 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é.