Crea una plantilla del modo de consentimiento

Este documento está dirigido a los 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 en tu solución de administración de consentimiento.

Estado y tipos de consentimiento

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:

Crea una plantilla de consentimiento nueva

El modo de consentimiento hace un seguimiento de las selecciones de consentimiento de los visitantes, y las verificaciones de consentimiento de las etiquetas garantizan que el comportamiento de las etiquetas se ajuste según corresponda. Cuando crees una plantilla de consentimiento nueva, sigue estas prácticas recomendadas:

• Usa las APIs de Consent Mode de Tag Manager setDefaultConsentState y updateConsentState en lugar de gtag consent.

• Configura 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 elecció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 tiempo 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 elecciones de consentimiento del visitante. También configurarás una devolución de llamada para updateConsentState para controlar el caso en el que un visitante aún no haya realizado sus selecciones de consentimiento o decida cambiar su consentimiento.

Para crear una plantilla de consentimiento, sigue estos pasos:

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 etiquetas, haz clic en Nuevo.

Para establecer estados de consentimiento predeterminados, sigue estos pasos:

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 la 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 establecer la configuración predeterminada del 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, haz lo siguiente:

1. Haz clic en Agregar campo, elige Casilla de verificación y cambia el nombre del campo a ads_data_redaction.
2. Actualiza el nombre visible a Redact Ads Data.

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

Opcional: Para agregar compatibilidad con la transferencia de parámetros de URL, haz lo siguiente:

1. Haz clic en Agregar campo, elige 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 para pasar parámetros de URL

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

1. Abre la pestaña Código en el editor de plantillas.
2. En la siguiente muestra de código, edita los campos de marcador de posición.
3. Copia el código y reemplaza 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 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();

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

Para agregar permisos para administrar los estados de consentimiento, haz lo siguiente:

1. Selecciona la pestaña Permisos y haz clic en Estado del consentimiento de acceso.
2. Haz clic en Agregar tipo de consentimiento.
3. Haz clic en la casilla y selecciona ad_storage en el menú desplegable.
4. Marca Escribir.
5. Haz clic en Agregar.
6. Repite los pasos del 2 al 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 para acceder a las cookies, haz lo siguiente:

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

2. Crea pruebas de unidades

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

3. Integra la plantilla con la solución de consentimiento

En el siguiente código, se muestra un ejemplo de cómo se podría integrar esta plantilla con el código de tu solución de administración del consentimiento agregando 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);
  });
};

Actualiza el estado de consentimiento

Después de que un visitante del sitio web indique sus opciones de consentimiento, por lo general, a través de la interacción con un banner de consentimiento, el código de la plantilla debe actualizar los estados de consentimiento según corresponda con la API de updateConsentState.

En el siguiente ejemplo, se muestra la llamada a updateConsentState para un visitante que indicó que da su consentimiento para todos los tipos de almacenamiento. Nuevamente, este ejemplo usa valores codificados de forma rígida para granted, pero, en la práctica, estos se deben determinar en el tiempo de ejecución con 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'
});

Acerca del comportamiento específico de la región

Para establecer estados de consentimiento predeterminados que se apliquen a los visitantes de áreas específicas, especifica una región (según la ISO 3166-2) en la plantilla. El uso de valores de región permite que los usuarios de la plantilla cumplan con las reglamentaciones regionales sin perder información de los visitantes que se encuentran 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, la siguiente configuración establece el estado predeterminado de analytics_storage en denied para los visitantes de España y Alaska, y establece 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'
});

La opción más específica tiene prioridad

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

Metadatos adicionales

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

• url_passthrough
• ads_data_redaction
• developer_id

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, es posible que se agregue información sobre el anuncio a las URLs de la página de destino como un parámetro de consulta. Para mejorar la precisión de las conversiones, las etiquetas de Google suelen almacenar esta información en las cookies propias del 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 anuncios en este caso, los anunciantes pueden, de manera opcional, transferir información de clics en anuncios a través de parámetros de URL en las páginas con una función llamada transferencia de URL.

Del mismo modo, si analytics_storage se establece como rechazado, se puede usar el paso de URL para enviar estadísticas basadas en eventos y sesiones (incluidas las conversiones) sin cookies en las páginas.

Para usar el reenvío de URL, se deben cumplir las siguientes condiciones:

• Las etiquetas de Google que tienen en cuenta el consentimiento están presentes en la página.
• El sitio habilitó el uso de la función de transmisión de URL.
• El modo de consentimiento está implementado en la página.
• El vínculo saliente hace referencia al mismo dominio que el de la página actual.
• Hay un GCLID o DCLID presente en la URL (solo para las etiquetas de Google Ads y Floodlight).

Tu plantilla debe permitir que el usuario configure si desea habilitar este parámetro de configuración. El siguiente código de plantilla se usa para establecer url_passthrough como verdadero:

gtagSet('url_passthrough', true);

Oculta datos de anuncios

Cuando se rechaza ad_storage, no se establecen cookies nuevas con fines publicitarios. Además, no se usarán las cookies de terceros previamente configuradas 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 clics en el anuncio en los parámetros de URL.

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

Cuando ads_data_redaction es verdadero y ad_storage se rechaza, se ocultarán los identificadores de 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 con un ID de desarrollador emitido por Google, usa el siguiente método para establecerlo lo antes posible en tu plantilla.

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

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

Proporciona documentación para tus usuarios

Tus usuarios usarán tu plantilla de consentimiento para configurar una etiqueta que recopile el consentimiento del usuario. Proporciona a los usuarios documentación que explique las siguientes prácticas recomendadas:

• Cómo establecer valores predeterminados de consentimiento en la tabla Configuración
• Cómo configurar valores predeterminados del consentimiento para diferentes regiones agregando filas de tabla adicionales
• 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.