Crea una plantilla del modo de consentimiento

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

En esta página, se presentan los tipos de consentimiento en Google Tag Manager y se muestra cómo integrarlos a tu solución de administración de consentimiento.

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

Los usuarios pueden establecer estados de consentimiento predeterminados con una plantilla de modo de consentimiento y comunicar las opciones de consentimiento de los visitantes a Google Tag Manager. Esto garantiza el funcionamiento óptimo de las etiquetas de Google y de terceros que admiten el modo de consentimiento.

Como creador de plantillas, puedes implementar plantillas del modo de consentimiento para uso interno o publicarlas en la Galería de plantillas de la comunidad para que estén disponibles al público. Los proveedores de la plataforma de administración de consentimiento (CMP) que ofrecen plantillas del modo de consentimiento tienen la oportunidad de aparecer en nuestra documentación sobre el modo de consentimiento y que el selector de la Galería de plantillas incluya sus plantillas.

Las etiquetas de Google y de terceros ajustan su comportamiento de almacenamiento según un estado de consentimiento de granted o denied. Pueden tener verificaciones de consentimiento integradas para cualquiera de los siguientes tipos de consentimiento:

Tipo de consentimiento Descripción
ad_storage Habilita el almacenamiento, como cookies, relacionado con la publicidad.
ad_user_data Establece el consentimiento para enviar datos del usuario a Google con fines de publicidad en línea.
ad_personalization Establece el consentimiento para la publicidad personalizada.
analytics_storage Habilita el almacenamiento, como cookies, relacionado con las estadísticas (por ejemplo, la duración de la visita).
functionality_storage Habilita el almacenamiento que admite las funciones del sitio web o la aplicación, como la configuración de idioma.
personalization_storage Habilita el almacenamiento relacionado con la personalización, como las recomendaciones de videos.
security_storage Habilita el almacenamiento relacionado con la seguridad, como la función de autenticación, la prevención de fraudes y otras protecciones del usuario.

El modo de consentimiento realiza un seguimiento de las selecciones de consentimiento de los visitantes, y las verificaciones de consentimiento de etiquetas garantizan que el comportamiento de las etiquetas se ajuste en consecuencia. Cuando crees una nueva plantilla de consentimiento, sigue las prácticas recomendadas:

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

  • Establece los estados de consentimiento predeterminados inmediatamente después de la activación con el activador Inicialización de consentimiento: todas las páginas.

  • La CMP debe solicitar al visitante lo antes posible que otorgue o rechace el consentimiento para todos los tipos de consentimiento aplicables.

  • Cuando un visitante indica su opción de consentimiento, la CMP debe pasar el estado de consentimiento actualizado.

1. Crea una plantilla nueva

Este enfoque de implementación usa un campo en la plantilla para mantener el estado de consentimiento predeterminado. El código de implementación lee ese campo para establecer el estado de consentimiento predeterminado en el entorno de ejecución. En el caso del comando de actualización, tu código intenta leer una cookie establecida por la solución de consentimiento para almacenar las opciones de consentimiento de los visitantes. También configurarás una devolución de llamada para updateConsentState a fin de controlar el caso en el que un visitante aún no haya hecho sus selecciones de consentimiento o decida cambiar su consentimiento.

  1. Accede a tu cuenta de Google Tag Manager.
  2. En el panel de navegación izquierdo, selecciona Plantillas.
  3. En el panel Plantillas de etiqueta, haz clic en Nueva.
  1. Selecciona la pestaña Campos y haz clic en Agregar campo > Tabla de parámetros.
  2. Cambia el nombre a defaultSettings.
  3. Expande el campo.
  4. Actualiza el Nombre visible a Default settings.
  5. Haz clic en Agregar columna, elige Entrada de texto, cambia el nombre a region y marca la casilla Exigir que los valores de columna sean únicos.
  6. Expande la columna y cambia el nombre visible a 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. Obtén más información para configurar los valores predeterminados de consentimiento para diferentes regiones.
  7. Haz clic en Agregar columna, elige Entrada de texto y cambia el nombre a granted.
  8. Expande la columna y cambia el nombre visible a Granted Consent Types (comma separated).
  9. Haz clic en Agregar columna, elige Entrada de texto y cambia el nombre a denied.
  10. Expande la columna y cambia el nombre visible a Denied Consent Types (comma separated)

Opcional: Para agregar compatibilidad con la ocultación de datos de anuncios, sigue estos pasos:

  1. Haz clic en Agregar campo, selecciona Casilla de verificación y cambia el nombre del campo a 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 de anuncios

Opcional: Para agregar compatibilidad con el paso de parámetros de URL, sigue estos pasos:

  1. Haz clic en Agregar campo, selecciona Casilla de verificación y cambia el nombre del campo a url_passthrough.
  2. Actualiza el nombre visible a Pass through URL parameters

Obtén más información sobre cómo pasar los parámetros de URL.

Para agregar el código de implementación, haz lo siguiente:

  1. Abre la pestaña Code en el editor de plantillas.
  2. En la siguiente muestra de código, edita los campos del marcador de posición.
  3. Copia el código y reemplaza con él el código estándar en el editor de plantillas.
  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 de consentimiento.
  2. Haz clic en Agregar tipo de consentimiento.
  3. Haz clic en el cuadro y selecciona ad_storage en el menú desplegable.
  4. Marca Escribir.
  5. Haz clic en Agregar.
  6. Repite los pasos 2 a 5 para ad_user_data, ad_personalization y analytics_storage. Si necesitas tipos de consentimiento adicionales, agrégalos de la misma manera.
  7. Haz clic en Guardar.

Para agregar permisos de acceso a cookies:

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

2. Cómo crear pruebas de unidades

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

En el siguiente código, se muestra un ejemplo de cómo esta plantilla se podría integrar con el código de tu solución de administración de consentimiento si agregas un objeto de escucha:

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

Después de que un visitante del sitio web indica sus opciones de consentimiento, en general mediante la interacción con un banner de consentimiento, el código de la plantilla debe actualizar los estados de consentimiento en consecuencia con la API de updateConsentState.

En el siguiente ejemplo, se muestra la llamada a updateConsentState de un visitante que indicó que otorga su consentimiento para todos los tipos de almacenamiento. Una vez más, este ejemplo usa valores codificados para granted, pero en la práctica, estos se deben determinar durante el tiempo de ejecución mediante el consentimiento del visitante que recopila 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 acerca del comportamiento específico de la región

Para establecer los estados de consentimiento predeterminados que se aplican a los visitantes de áreas particulares, especifica una región (de acuerdo con ISO 3166-2) en la plantilla. El uso de valores de región permite a los usuarios de plantillas cumplir con las reglamentaciones regionales sin perder la información de los visitantes fuera de esas regiones. Cuando no se especifica una región en un comando setDefaultConsentState, el valor se aplica a todas las demás regiones.

Por ejemplo, lo siguiente establece el estado predeterminado de analytics_storage en denied para los visitantes de España y Alaska, y analytics_storage en granted para todos los demás:

const setDefaultConsentState = require('setDefaultConsentState');

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

Los más específicos tienen prioridad

Si se producen dos comandos de consentimiento predeterminados en la misma página con valores para una región y subregión, se aplicará el que tenga una región más específica. Por ejemplo, si tienes ad_storage configurado como 'granted' para la región US y ad_storage como 'denied' para la región US-CA, un visitante de California tendrá efecto el parámetro de configuración US-CA más específico.

Región ad_storage Comportamiento
EE.UU. 'granted' Se aplica a los usuarios en EE.UU. que no están en Canadá.
EE.UU. y Canadá 'denied' Se aplica a los usuarios de US-CA
Sin especificar 'granted' Usa el valor predeterminado de 'granted'. En este ejemplo, eso se aplica a los usuarios que no están en EE.UU. ni Canadá.

Metadatos adicionales

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

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

Pasa la información del clic en el anuncio, el ID de cliente y el ID de sesión en las URLs.

Cuando un visitante llega al sitio web de un anunciante después de hacer clic en un anuncio, la información sobre el anuncio se puede agregar a las URLs de página de destino como un parámetro de búsqueda. Para mejorar la precisión de las conversiones, las etiquetas de Google suelen almacenar esta información en cookies propias en el dominio del anunciante.

Sin embargo, si ad_storage es denied, las etiquetas de Google no guardarán esta información de forma local. Para mejorar la calidad de la medición de clics en el anuncio en este caso, los anunciantes pueden, de manera opcional, pasar la información de los clics en el anuncio mediante los parámetros de URL de todas las páginas mediante una función llamada transferencia de URL.

Del mismo modo, si analytics_storage está configurado como denegado, la transferencia de URL se puede usar para enviar estadísticas basadas en eventos y sesiones (incluidas las conversiones) sin cookies entre las páginas.

Para usar la transferencia de URL, se deben cumplir las siguientes condiciones:

  • Deben incluir etiquetas de Google que reconocen el consentimiento en la página.
  • El sitio habilitó la función de transferencia de URL.
  • El modo de consentimiento se implementa en la página.
  • El vínculo saliente hace referencia al mismo dominio que el dominio de la página actual.
  • La URL debe incluir un gclid o dclid (solo etiquetas de Google Ads y Floodlight)

Tu plantilla debe permitir que el usuario de la plantilla establezca si desea habilitar esta configuración o no. El siguiente código de plantilla se usa para establecer url_passthrough como verdadero:

gtagSet('url_passthrough', true);

Cómo ocultar datos de anuncios

Cuando se rechaza ad_storage, no se configuran cookies nuevas con fines publicitarios. Además, no se utilizarán las cookies de terceros configuradas previamente en google.com y doubleclick.net. Los datos enviados a Google seguirán incluyendo la URL de página completa, incluida la información de clic en el anuncio en los parámetros de URL.

Para ocultar aún más tus datos de anuncios cuando se rechaza ad_storage, configura ads_data_redaction como verdadero.

Cuando ads_data_redaction es verdadero y se rechaza ad_storage, se ocultarán los identificadores de clics en el anuncio enviados en las solicitudes de red por las etiquetas de Google Ads y Floodlight.

gtagSet('ads_data_redaction', true);

ID de desarrollador

Si eres proveedor de CMP con un ID de desarrollador emitido por Google, usa el siguiente método para configurar esto lo antes posible en tu plantilla.

Solo necesitas un ID de desarrollador cuando empresas o entidades no relacionadas usen tu implementación en varios sitios web. Si un sitio o una entidad usarán la implementación, no solicites un ID de desarrollador.

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

Proporciona documentación a los usuarios

Los usuarios utilizarán tu plantilla de consentimiento para configurar una etiqueta que recopile su consentimiento. Proporciona documentación para los usuarios en la que se expliquen las siguientes prácticas recomendadas:

  • Cómo establecer valores predeterminados de consentimiento en la tabla Configuración
  • Agrega filas de tablas adicionales para configurar los valores predeterminados de consentimiento para diferentes regiones.
  • Activa la etiqueta con el activador Inicialización de consentimiento: todas las páginas.

Próximos pasos

Si deseas proporcionar tu plantilla a todos los usuarios de Tag Manager, súbela a la Galería de plantillas de la comunidad.