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

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.

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

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.

  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 tag, cliquez sur Nouveau.
  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. Définissez le nom à afficher sur Default settings.
  5. 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.
  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 pour les utilisateurs de modèles. En savoir plus sur 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 permettre le masquage des données relatives aux annonces, procédez comme suit:

  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 ajouter la prise en charge de 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 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 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 pour accéder à l'état du consentement les 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. Cliquez sur la case, puis 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 dans 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 les valeurs des cookies.
  2. 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).
  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.

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

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