Créer un modèle de mode Consentement

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.

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.

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

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.

  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.
  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. Indiquez Default settings dans le champ Nom à afficher.
  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, 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
  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é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:

  1. Cliquez sur Ajouter un champ, choisissez 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 permettre la transmission de paramètres d'URL, procédez comme suit:

  1. Cliquez sur Ajouter un champ, choisissez 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 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 d'espace réservé.
  3. Copiez le code et remplacez-le par le code récurrent 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 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.

  1. Sélectionnez l'onglet Autorisations, puis cliquez sur Accès à l'état du consentement.
  2. Cliquez sur Ajouter un type de consentement.
  3. Cochez la case et 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 Lire la ou les valeurs des cookies.
  2. 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).
  3. 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.

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);
  });
};

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é.