Crear una plantilla del modo de consentimiento

Este artículo está dirigido a los desarrolladores que mantienen una solución de gestión del consentimiento en sitios web que usan Google Tag Manager (GTM).

Esta página trata de los distintos tipos de consentimiento disponibles en Google Tag Manager y de cómo puedes integrarlos en tu solución de gestión del consentimiento.

Cuando usas una plantilla de etiqueta, los usuarios pueden integrar tu solución de consentimiento sin necesidad de editar código, lo que les ahorra mucho tiempo y esfuerzo.

Los usuarios pueden definir estados de consentimiento mediante una plantilla de modo de consentimiento y transmitir las decisiones de consentimiento de los visitantes a Google Tag Manager. Esto permite que las etiquetas de Google y de terceros que admiten el modo de consentimiento funcionen correctamente.

Los creadores de plantillas pueden implementar plantillas de modo de consentimiento para uso interno o publicarlas en la galería de plantillas comunitarias para que estén disponibles públicamente. Los proveedores de la plataforma de gestión del consentimiento (CMP) que ofrecen plantillas de modo de consentimiento tienen la oportunidad de aparecer en nuestra documentación del modo de consentimiento y de que el selector de la galería de plantillas incluya sus plantillas.

Las etiquetas de Google y de terceros adaptan su comportamiento de almacenamiento en función del estado del consentimiento granted o denied. Pueden incluir comprobaciones de consentimiento para cualquiera de los siguientes tipos de consentimiento:

Tipo de consentimiento Descripción
ad_storage Habilita el almacenamiento (por ejemplo, el de las cookies) relacionado con la publicidad.
ad_user_data Define el consentimiento sobre el envío a Google de datos de usuario con fines publicitarios online.
ad_personalization Define el consentimiento sobre la publicidad personalizada.
analytics_storage Habilita el almacenamiento (por ejemplo, el de las cookies) relacionado con las analíticas (por ejemplo, la duración de las visitas).
functionality_storage Habilita el almacenamiento relacionado con las funciones del sitio web o de la aplicación (por ejemplo, la configuración de idioma).
personalization_storage Habilita el almacenamiento relacionado con la personalización (por ejemplo, las recomendaciones de vídeos).
security_storage Habilita el almacenamiento relacionado con la seguridad (por ejemplo, las funciones de autenticación, la prevención de fraudes y otros sistemas de protección del usuario).

El modo de consentimiento rastrea las opciones de consentimiento de los visitantes y las comprobaciones de consentimiento de las etiquetas hacen que el comportamiento de las etiquetas se adapte a ellas. cuando crees una plantilla de consentimiento, sigue estas prácticas recomendadas:

  • Usa las APIs de modo de consentimiento de Tag Manager setDefaultConsentState y updateConsentState en lugar de gtag consent.

  • Define los estados de consentimiento predeterminados inmediatamente después de la activación. Para ello, usa el activador Inicialización del consentimiento: todas las páginas.

  • La CMP tiene que notificarlos a los visitantes lo antes posible para que den o denieguen cada tipo de consentimiento aplicable.

  • Cuando un visitante indica su elección, la CMP tiene que enviar el estado del consentimiento actualizado.

1. Crear una plantilla nueva

Este método de implementación usa un campo en la plantilla para contener el estado de consentimiento predeterminado. El código de implementación lee ese campo para definir el estado de consentimiento predeterminado en el tiempo de ejecución. En el comando de actualización, el código intenta leer una cookie configurada por la solución de consentimiento para almacenar las opciones de consentimiento de los visitantes. También debes configurar una retrollamada para updateConsentState para gestionar los casos en los que los visitantes aún tengan que elegir las opciones de consentimiento o decidan cambiar las que ya tienen.

  1. Inicia sesión en tu cuenta de Google Tag Manager.
  2. En el panel de navegación de la izquierda, selecciona Plantillas.
  3. En el panel Plantillas de etiquetas, haz clic en Nueva.
  1. Selecciona la pestaña Campos y haz clic en Añadir campo > Tabla de parámetros.
  2. Cambia el nombre por defaultSettings.
  3. Despliega el campo.
  4. Actualiza el Nombre visible a Default settings.
  5. Haz clic en Añadir columna, selecciona Entrada de texto, cambia el nombre por region y marca la casilla Los valores de las columnas deben ser únicos.
  6. Despliega la columna y cambia el nombre visible por Region (leave blank to have consent apply to all regions). La instrucción entre paréntesis es documentación para los usuarios de tu plantilla. Más información sobre cómo configurar valores de consentimiento predeterminados para distintas regiones
  7. Haz clic en Añadir columna, selecciona Entrada de texto y cambia el nombre por granted.
  8. Despliega la columna y cambia el nombre visible por Granted Consent Types (comma separated).
  9. Haz clic en Añadir columna, selecciona Entrada de texto y cambia el nombre por denied.
  10. Despliega la columna y cambia el nombre visible por Denied Consent Types (comma separated).

(Opcional) Para añadir compatibilidad con ocultación de datos sobre anuncios:

  1. Haz clic en Añadir campo, selecciona Casilla y cambia el nombre del campo por ads_data_redaction.
  2. Actualiza el nombre visible a Redact Ads Data.

Más información sobre el comportamiento de las cookies con la ocultación de datos sobre anuncios

(Opcional) Para añadir compatibilidad con el envío de parámetros de URL:

  1. Haz clic en Añadir campo, selecciona Casilla y cambia el nombre del campo por url_passthrough.
  2. Actualiza el nombre visible a Pass through URL parameters.

Más información sobre el envío de parámetros de URL

Para añadir el código de implementación:

  1. Abre la pestaña Código del editor de plantillas.
  2. En el código de ejemplo de abajo, edita los campos de texto.
  3. Copia el código, ve al editor de plantillas y sustituye el código repetitivo por el que has copiado.
  4. Guarda la plantilla.
// 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();

A continuación, configura los permisos para acceder al estado de consentimiento y a las cookies.

  1. Selecciona la pestaña Permisos y haz clic en Accede al estado del consentimiento.
  2. Haz clic en Añadir tipo de consentimiento.
  3. Haz clic en la casilla y selecciona ad_storage en el menú desplegable.
  4. Marca Escritura.
  5. Haz clic en Añadir.
  6. Repite los pasos del 2 al 5 con ad_user_data, ad_personalization y analytics_storage. Si necesitas más tipos de consentimiento, añádelos de la misma manera.
  7. Haz clic en Guardar.

Para añadir permisos de acceso a cookies:

  1. Selecciona la pestaña Permisos y haz clic en Lee los valores de las cookies.
  2. En Específico, escribe los nombres de cada una de las cookies que debe leer tu código para determinar las opciones de consentimiento de los usuarios (un nombre por línea).
  3. Haz clic en Guardar.

2. Crear pruebas unitarias

Consulta Pruebas para obtener información sobre cómo crear pruebas para tu plantilla.

El siguiente código es un ejemplo de cómo se podría integrar esta plantilla con el código de tu solución de gestión del consentimiento añadiendo un procesador:

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

Una vez que un visitante del sitio web elige las opciones de consentimiento (normalmente interactuando con un banner de consentimiento), el código de la plantilla actualiza los estados de consentimiento en consecuencia mediante la API updateConsentState.

En el siguiente ejemplo se muestra la llamada a updateConsentState de un visitante que ha dado su consentimiento para todos los tipos de almacenamiento. De nuevo, en este ejemplo se usan valores codificados para granted, pero en la práctica estos valores se deben determinar en el tiempo de ejecución con el consentimiento del visitante que ha recogido 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'
});

Información sobre el comportamiento específico para regiones concretas

Para definir estados de consentimiento predeterminados que se apliquen a los visitantes de zonas concretas, especifica una región en la plantilla (según el estándar ISO 3166-2). El uso de valores de región permite a los usuarios de plantillas cumplir las normativas regionales sin perder información de los visitantes que no se encuentran en esas regiones. Si no se especifica una región en un comando setDefaultConsentState, el valor se aplica a todas las demás regiones.

Por ejemplo, en el siguiente código, se asigna denied al estado predeterminado de analytics_storage en el caso de los visitantes de España y Alaska, y granted a analytics_storage para todos los demás visitantes:

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'analytics_storage': 'denied',
  'region': ['ES', 'US-AK']
});
setDefaultConsentState({
  'analytics_storage': 'granted'
});

Cuanto más específicos son los parámetros, más prioridad tienen

Si se ejecutan dos comandos de consentimiento predeterminados en la misma página con valores para una región y una subregión, se aplicará el comando correspondiente al parámetro más específico. Por ejemplo, si has asignado el valor 'granted' a ad_storage para la región US y el valor 'denied' a ad_storage para la región US-CA, a un visitante de California (CA) se le aplicará la configuración de US-CA, ya que es la más específica.

Región ad_storage Comportamiento
US 'granted' Se aplica a los usuarios de Estados Unidos que no están en California.
US-CA 'denied' Se aplica a los usuarios de California, en Estados Unidos.
Sin especificar 'granted' Se usa el valor predeterminado 'granted'. En este ejemplo, se aplica a los usuarios que no se encuentran en Estados Unidos ni en California.

Metadatos adicionales

Puedes usar la API gtagSet para definir los parámetros opcionales siguientes:

Estas APIs solo están disponibles en el entorno aislado de la plantilla de GTM.

Enviar información de clics en anuncios, IDs de clientes e IDs de sesiones en URLs

Cuando un visitante llega al sitio web de un anunciante tras hacer clic en uno de sus anuncios, la información sobre el anuncio puede añadirse a las URLs de la página de destino como un parámetro de consulta. Para mejorar la precisión de los datos sobre las conversiones, las etiquetas de Google suelen almacenar esta información en cookies propias alojadas en el dominio del anunciante.

Sin embargo, si se asigna el valor denied a ad_storage, las etiquetas de Google no guardarán esa información localmente. Para mejorar la calidad de la medición de los clics en los anuncios, los anunciantes pueden usar parámetros de URL para enviar entre páginas información sobre estos clics mediante una función de envío de datos a través de URL.

Del mismo modo, si se asigna el valor denied a analytics_storage, se puede utilizar la función de envío de datos a través de URLs para enviar analíticas basadas en eventos y sesiones (incluidas las conversiones) sin cookies entre páginas.

Para usar la función de envío de datos a través de URL, se deben cumplir las siguientes condiciones:

  • En la página hay etiquetas de Google que tienen en cuenta el consentimiento.
  • El sitio ha aceptado el uso de la función de envío de datos a través de URL.
  • El modo de consentimiento se ha implementado en la página.
  • El enlace de salida hace referencia al mismo dominio que el dominio de la página actual.
  • En la URL hay un GCLID/DCLID (solo en etiquetas de Floodlight y Google Ads).

Tu plantilla debería permitir al usuario configurar si quiere habilitar esta opción o no. El siguiente código de plantilla se utiliza para asignar el valor true a url_passthrough:

gtagSet('url_passthrough', true);

Ocultar datos sobre los anuncios

Cuando se deniega ad_storage, no se definen nuevas cookies con fines publicitarios. Además, las cookies de terceros que ya se hayan añadido a google.com y a doubleclick.net no se usarán. Los datos que se envíen a Google seguirán incluyendo la URL de página completa, así como la información sobre los clics en anuncios que contienen los parámetros de URL.

Para ocultar aún más los datos sobre los anuncios cuando se asigna el valor denied a ad_storage, debes asignar el valor true a ads_data_redaction.

Si se asigna el valor true a ads_data_redaction y el valor denied a ad_storage, se ocultarán los identificadores de los clics en anuncios que envían las etiquetas de Google Ads y Floodlight en las solicitudes de red.

gtagSet('ads_data_redaction', true);

ID de desarrollador

Si eres proveedor de una CMP y tienes un ID de desarrollador emitido por Google, utiliza el siguiente método para definirlo lo antes posible en tu plantilla.

Solo necesitas un ID de desarrollador cuando varias empresas o entidades que no guarden relación entre sí vayan a usar tu implementación en varios sitios web. Si la implementación solo la va a usar una entidad o va a utilizarse en un solo sitio, no solicites un ID de desarrollador.

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

Proporcionar documentación para tus usuarios

Tus usuarios usarán tu plantilla de consentimiento para configurar una etiqueta que recoja el consentimiento de los usuarios. Proporciónales documentación que explique las siguientes prácticas recomendadas:

  • Cómo definir valores de consentimiento predeterminados en la tabla Ajustes.
  • Cómo configurar valores de consentimiento predeterminados para distintas regiones añadiendo filas a la tabla.
  • Activar la etiqueta en el activador Inicialización del consentimiento: todas las páginas.

Pasos siguientes

Si quieres ofrecer tu plantilla a todos los usuarios de Tag Manager, súbela a la galería de plantillas comunitarias.