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 utilizan Google Tag Manager (GTM).

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

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

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

Como creador de plantillas, puedes implementar plantillas de modo de consentimiento para uso interno o publícalas en la Galería de plantillas de la comunidad para hacer que estén disponibles públicamente. de la plataforma de administración de consentimiento (CMP) que ofrecen las plantillas del modo de consentimiento tienen la oportunidad de aparecer en nuestro modo de consentimiento y hacer que el selector de la Galería de plantillas muestre sus plantillas.

Las etiquetas de Google y de terceros ajustan su comportamiento de almacenamiento en función de un consentimiento estado 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 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, visita duración).
functionality_storage Habilita el almacenamiento que respalda la funcionalidad del sitio web o la aplicación. como la configuración de idioma.
personalization_storage Habilita el almacenamiento relacionado con la personalización, como los videos recomendaciones.
security_storage Habilita el almacenamiento relacionado con la seguridad, como la autenticación la funcionalidad, la prevención de fraudes y otra protección

El modo de consentimiento hace un seguimiento de las selecciones de consentimiento de los visitantes y de las verificaciones de consentimiento de las etiquetas. asegurarse de que el comportamiento de la etiqueta se ajuste según corresponda. Cuando se crea un consentimiento nuevo sigue las prácticas recomendadas:

  • Utiliza 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 a través del 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 aprobar la solicitud el estado de consentimiento.

1. Crea una plantilla nueva

Este enfoque de implementación utiliza un campo de la plantilla para incluir los el estado de consentimiento predeterminado. El código de implementación lee ese campo para establecer la el estado de consentimiento predeterminado en el tiempo de ejecución. Para el comando update, el código intenta leer una cookie establecida por la solución de consentimiento para almacenar las selecciones de consentimiento de los visitantes. También configurarás una devolución de llamada para que updateConsentState maneje el caso cuando un visitante aún no ha hecho sus selecciones de consentimiento o decide cambiar su consentimiento.

  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.
  1. Selecciona la pestaña Campos, haz clic en Agregar campo > Tabla de parámetros.
  2. Cambia el nombre a defaultSettings.
  3. Expande el campo.
  4. Actualiza el Nombre visible (Display name) 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 tus plantillas. Obtén más información sobre Establecer valores predeterminados 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, 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

Obtén más información sobre el comportamiento de las cookies con la eliminació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, 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 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 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 Acceso 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 Write.
  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 en la 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 los valores de las cookies.
  2. En Específica, ingresa el nombre de cada una de las cookies que necesita tu código. 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.

El siguiente código 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. Para ello, agrega 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 el visitante del sitio web ha indicado sus opciones de consentimiento, generalmente a través de interactuando con un banner de consentimiento, el código de la plantilla debe actualizar el consentimiento estados según corresponda con la API de updateConsentState.

En el siguiente ejemplo, se muestra la llamada updateConsentState para un visitante que indicó su consentimiento para todos los tipos de almacenamiento. En este ejemplo, se usan modelos valores para granted, pero, en la práctica, estos deben determinarse durante 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 la norma ISO 3166-2) en el plantilla. El uso de valores de región permite que los usuarios de plantillas cumplan con las políticas reglamentaciones sin perder la información de los visitantes que se encuentran fuera de esas regiones. Cuándo 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'
});

Lo más específico tiene prioridad

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

Región ad_storage Comportamiento
EE.UU. 'granted' Se aplica a los usuarios de EE.UU. que no están en Canadá.
Canadá y Estados Unidos 'denied' Se aplica a los usuarios de Canadá y EE.UU.
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:

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 se podría agregar a las URL de la página de destino como una consulta. parámetro. Para mejorar la precisión de las conversiones, las etiquetas de Google suelen almacenar esto información en las 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 forma opcional, puedes pasar información de clics en el anuncio a través de parámetros de URL entre páginas con un llamada transferencia de URL.

Del mismo modo, si estableces analytics_storage como rechazada, se podrá usar la transferencia de URL para enviar estadísticas basadas en eventos y sesiones (incluidas las conversiones) sin cookies entre 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ó el uso de la función de transferencia 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.
  • La URL contiene un GCLID o DCLID (solo etiquetas de Google Ads y Floodlight).

Tu plantilla debería permitir que su usuario configure si desea desean habilitar este parámetro de configuración. El siguiente código de plantilla se usa para configurar url_passthrough a true:

gtagSet('url_passthrough', true);

Ocultar datos de anuncios

Cuando se rechaza ad_storage, no se configuran cookies nuevas para la publicidad comerciales. Además, las cookies de terceros establecidas previamente en google.com y No se usará doubleclick.net. Los datos enviados a Google seguirán incluyendo la URL de página completa, incluida la información del clic en el anuncio en los parámetros de URL.

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

Cuando la ads_data_redaction es verdadera y se rechaza ad_storage, el clic en el anuncio los identificadores que las etiquetas de Google Ads y Floodlight envían en las solicitudes de red oculto.

gtagSet('ads_data_redaction', true);

ID de desarrollador

Si eres proveedor de CMP con un ID de desarrollador emitido por Google, utiliza lo siguiente: para configurar esto lo antes posible en tu plantilla.

Solo necesitarás un ID de desarrollador cuando tu implementación se vaya a usar en varios sitios web por empresas o entidades no relacionadas. Si un sitio o una entidad usará la implementación, no solicita 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 datos consentimiento. Proporciona documentación a los usuarios en la que se explique lo siguiente: prácticas:

  • Cómo establecer los valores predeterminados de consentimiento en la tabla Configuración
  • Cómo establecer la configuración predeterminada del consentimiento para diferentes regiones agregando las filas de la tabla.
  • Activa la etiqueta en el activador Inicialización de consentimiento: todas las páginas.

Próximos pasos

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