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

¿Por qué usar una plantilla de etiqueta para el consentimiento?

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

Los usuarios pueden establecer estados de consentimiento predeterminados con una plantilla del modo de consentimiento y comunicar las selecciones 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 públicamente. 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 hacer que el selector de la Galería de plantillas muestre sus plantillas.

No crees plantillas que usen el comando gtag consent. En su lugar, usa la API de Tag Manager updateConsentState. Los comandos gtag se ponen en cola después de todos los demás mensajes pendientes y es posible que no se procesen antes de que comience el siguiente evento. Para obtener más información, consulta Cómo se procesa la información de la capa de datos.

Por lo general, la plataforma de administración de consentimiento (CMP) hace referencia a una solución de administración de consentimiento que proporciona un proveedor. En esta página, se usa la sigla CMP para referirse a soluciones propias y de terceros.

Estado y tipos de consentimiento

Las etiquetas de Google y de terceros ajustan su comportamiento de almacenamiento en función de 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 los datos del usuario a Google con fines publicitarios en línea.
ad_personalization	Establece el consentimiento para la publicidad personalizada.
analytics_storage	Habilita el almacenamiento, como cookies, relacionado con estadísticas (por ejemplo, la duración de las visitas).
functionality_storage	Habilita el almacenamiento que permite el correcto funcionamiento 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.

Nota: Si ofreces opciones de consentimiento que no se asignan a estos tipos de consentimiento, también puedes proporcionar tipos de consentimiento personalizados proporcionando tu propia clave de tipo de consentimiento.

Crea una nueva plantilla de consentimiento

El modo de consentimiento realiza 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 las prácticas recomendadas:

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

  Importante: Los comandos gtag se ponen en cola después de todos los demás mensajes pendientes y es posible que no se procesen antes de que comience el siguiente evento. Para obtener más información, consulta Cómo se procesa la información de la capa de datos.

• Establece los estados de consentimiento predeterminados de inmediato cuando se active el activador Inicialización de consentimiento: Todas las páginas.

• La CMP debe solicitarle 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. En el caso del comando update, 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 que updateConsentState controle el caso en el que un visitante aún no realiza sus selecciones de consentimiento o decide cambiarlo.

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

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 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 sentencia entre paréntesis es la 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, haz lo siguiente:

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

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.

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 Code 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 reemplázalo por el código de plantilla en el editor de plantillas.
4. Guarda la plantilla.

Nota: Cuando guardes el código por primera vez, se producirá un error de validación. Se resolverá cuando agregues los nombres de tus cookies más adelante en la pestaña Permisos.

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

Para agregar permisos para administrar los estados de consentimiento, sigue estos pasos:

1. Selecciona la pestaña Permisos y haz clic en Estado de consentimiento de acceso.
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 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 de acceso a las cookies, haz lo siguiente:

1. Selecciona la pestaña Permisos y haz clic en Lee los valores de las 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. Cómo crear 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 esta plantilla se podría integrar 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);
  });
};

Cómo actualizar el estado de consentimiento

Después de que un visitante de un 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.

Nota: La llamada a updateConsentState se debe ejecutar lo antes posible en las páginas posteriores a la que el usuario interactúa con el banner de consentimiento. Si es posible, es preferible usar el código de zona de pruebas de la plantilla para leer el consentimiento del usuario directamente desde las cookies que lo almacenan en lugar de usar código externo para hacerlo. Si es necesario realizar solicitudes de red o realizar otras tareas asíncronas antes de llamar a updateConsentState, debes especificar un tiempo de espera de al menos 500 milisegundos en el campo wait_for_update cuando llames a setDefaultConsentState. Esto permitirá que esas tareas se completen antes de que se activen las etiquetas de Google. Para obtener más información, consulta Integra plataformas de administración de consentimiento asíncronas.

En el siguiente ejemplo, se muestra la llamada a updateConsentState para un visitante que indicó que otorga su consentimiento para todos los tipos de almacenamiento. Una vez más, este ejemplo usa valores hard-coded 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'
});

Información 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 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 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 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, se aplicará el que tenga una región más específica. Por ejemplo, si tienes ad_storage configurado en 'granted' para la región US y ad_storage configurado en 'denied' para la región US-CA, un visitante de California tendrá 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 de EE.UU. que no se encuentran en Canadá
US-CA	'denied'	Se aplica a los usuarios de EE.UU. y Canadá
Sin especificar	'granted'	Usa el valor predeterminado de 'granted'. En este ejemplo, se aplica a los usuarios que no están en EE.UU. ni en Canadá.

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 la zona de pruebas de plantillas de GTM.

Transmite la información de los clics 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 puede adjuntarse a las URLs de 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 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 transmitir, de manera opcional, la información de los clics en el anuncio a través de parámetros de URL en todas las páginas con una función llamada transferencia de URL.

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

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

• En la página, hay etiquetas de Google que reconocen el consentimiento.
• El sitio habilitó la función de transmisión 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.
• Hay un gclid o dclid en la URL (solo para 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 la variable url_passthrough en verdadero:

gtagSet('url_passthrough', true);

Nota: Si agregas la opción para configurar el reenvío de URL en tu plantilla, esta aún se debe configurar dentro de las etiquetas del vinculador de conversiones (si se usan) para que funcione según lo esperado. Para obtener más información sobre las prácticas recomendadas cuando se usa la transferencia de URL, consulta Cómo administrar la configuración de consentimiento.

Cómo ocultar datos de anuncios

Cuando se rechaza ad_storage, no se configuran cookies nuevas con fines publicitarios. Además, no se usarán las cookies de terceros configuradas previamente en google.com y doubleclick.net. Los datos que se envíen 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 deniegue ad_storage, establece ads_data_redaction como verdadero.

Cuando ads_data_redaction sea verdadero y se deniegue ad_storage, se ocultarán los identificadores de clics en el anuncio que Google Ads y las etiquetas de Floodlight envían 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 configurarlo lo antes posible en tu plantilla.

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

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

Proporciona documentación para los usuarios

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

• Cómo establecer los valores predeterminados de consentimiento en la tabla Configuración
• Cómo configurar 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.