Crea una plantilla del modo de consentimiento

Este documento 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 con tu solución de administración de consentimiento.

Estado de consentimiento y tipos de consentimiento

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

Crea una nueva plantilla de consentimiento

El modo de consentimiento hace un seguimiento de las elecciones de consentimiento de los visitantes, y las verificaciones de consentimiento de las 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 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 contener 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. Para el comando de actualización, tu código intenta leer una cookie establecida por la solución de consentimiento para almacenar las elecciones de consentimiento de los visitantes. 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 cambiarlo.

Para crear una plantilla de consentimiento, haz lo siguiente:

1. Accede a tu cuenta de Google Tag Manager.
2. En el panel de navegación izquierdo, selecciona Templates.
3. En el panel Plantillas de etiquetas, haz clic en Nueva.

Para establecer estados de consentimiento predeterminados, haz lo siguiente:

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 Requerir 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 sobre cómo 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, 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 el paso 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 sobre el paso de 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 de consentimiento y a las cookies.

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

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 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 elecciones 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 de 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 haya indicado sus elecciones 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 en consecuencia con la API de updateConsentState.

En el siguiente ejemplo, se muestra la llamada a updateConsentState para un visitante que indicó que acepta todos los tipos de almacenamiento. Nuevamente, este ejemplo usa valores codificados para granted, pero, en la práctica, estos deben determinarse 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 ISO 3166-2) en la plantilla. El uso de valores de región permite a los usuarios de la plantilla cumplir con las reglamentaciones regionales sin perder 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 para 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'
});

Se le da prioridad al nivel más específico

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á la configuración más específica US-CA que tendrá 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 espacio aislado 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 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 los anuncios en este caso, los anunciantes pueden pasar de forma opcional la información de clics en los anuncios a través de parámetros de URL en las páginas con una función llamada paso de URL.

Del mismo modo, si analytics_storage está configurado 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.

Se deben cumplir las siguientes condiciones para usar el paso de URL:

• Las etiquetas de Google basadas en el consentimiento están presentes en la página.
• El sitio habilitó la opción para usar la función de paso de URL.
• El modo de consentimiento está implementado en la página.
• El vínculo saliente hace referencia al mismo dominio que el dominio de la página actual.
• Hay un gclid/dclid en la URL (solo etiquetas de Google Ads y Floodlight).

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

gtagSet('url_passthrough', true);

Oculta los 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, establece ads_data_redaction en true.

Cuando ads_data_redaction es verdadero y se rechaza ad_storage, se ocultarán los identificadores de clics en los 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 un proveedor de 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 por empresas o entidades no relacionadas. Si la implementación la usará un sitio o una entidad, no solicites un ID de desarrollador.

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

Proporciona documentación para tus usuarios

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

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