Si mantienes una solución de administración de consentimiento para sitios que usan Google Tag Manager (GTM), te recomendamos que crees una plantilla a fin de admitir el Modo de consentimiento de Google. Una plantilla de modo de consentimiento permite a los usuarios adoptarlo e integrarlo en su solución de consentimiento de una manera sin código, lo que ahorra tiempo y esfuerzo significativos.
Las plantillas del modo de consentimiento admiten la creación de etiquetas que establecen el estado de consentimiento predeterminado y comunican las opciones de consentimiento de los visitantes a Google Tag Manager. Esto garantiza un funcionamiento óptimo de Google y de las etiquetas de terceros compatibles con el modo de consentimiento.
Como creador de plantillas, puedes implementar plantillas de modo de consentimiento para uso interno o publicarlas en la Galería de plantillas de la comunidad a fin de que estén disponibles para el 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 tienen el selector de la galería de plantillas para destacar sus plantillas.
En esta página, se presentan el estado y los tipos de consentimiento, y se muestra cómo usarlos con las API del modo de consentimiento. En la última sección, se proporciona un ejemplo de cómo usar las API para crear una plantilla de Tag Manager. Si es la primera vez que usas el modo de consentimiento o las plantillas de Tag Manager, en los siguientes artículos se proporciona información general:
- Modo de consentimiento
- Guía de inicio rápido de plantillas personalizadas
- Cómo administrar la configuración de consentimiento
Estado de consentimiento y tipos de consentimiento
Google y las etiquetas de terceros ajustan su comportamiento de almacenamiento según un estado de consentimiento de granted
o denied
. Pueden tener incorporadas verificaciones de consentimiento para cualquiera de los siguientes tipos de consentimiento:
Tipo de consentimiento | Descripción |
---|---|
ad_storage |
Habilita el almacenamiento, como las cookies, relacionado con la publicidad |
analytics_storage |
Habilita el almacenamiento, como las cookies, relacionado con las estadísticas (por ejemplo, la duración de la visita). |
functionality_storage |
Habilita el almacenamiento que admite la funcionalidad del sitio web o la app, 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. |
La plantilla debe brindar a los usuarios la capacidad de establecer un estado de consentimiento predeterminado para cada tipo de consentimiento que use el sitio web. Es posible que también deseen establecer estados de consentimiento predeterminados para diferentes regiones.
Los usuarios de GTM deben activar las etiquetas creadas con su plantilla en todas las páginas mediante el activador de inicialización del consentimiento. Esto garantiza que se activará antes que cualquier otra etiqueta. El código de la plantilla debe establecer los estados de consentimiento predeterminados configurados apenas se activa. La CMP debe solicitar al visitante lo antes posible con el fin de otorgar o rechazar el consentimiento para todos los tipos de consentimiento aplicables. Cuando un visitante indica su elección, la CMP debe pasar el estado de consentimiento actualizado a través de la API de la plantilla adecuada. El modo de consentimiento realiza un seguimiento de las opciones de consentimiento de los visitantes y las verificaciones de consentimiento de las etiquetas garantizan que el comportamiento de las etiquetas se ajuste en consecuencia.
API de consentimiento
Las implementaciones del modo de consentimiento en sitios que aprovechan GTM para el etiquetado deben usar las API específicas de GTM para administrar los estados de consentimiento, setDefaultConsentState y updateConsentState. De manera opcional, pueden usar la API de gtagSet para establecer la configuración de ads_data_redaction
y url_passthrough
según corresponda. Estas API solo están disponibles en el entorno de la zona de pruebas de plantillas de GTM.
El estado de consentimiento predeterminado debe establecerse lo antes posible cuando se cargue la página, con el evento de inicialización de consentimiento para activar la etiqueta. Las actualizaciones de consentimiento deben indicarse al Administrador de etiquetas de Google lo antes posible una vez que el usuario da su consentimiento o cuando la opción de consentimiento anterior del usuario se carga desde las cookies.
Existen varios enfoques posibles para activar updateConsentState
.
En los ejemplos que aparecen más adelante en este artículo, se muestran dos opciones posibles.
Estado de consentimiento predeterminado
Para establecer la configuración de consentimiento predeterminada, use la API de setDefaultConsentState.
En el siguiente ejemplo, se ilustra el uso de la llamada setDefaultConsentState
.
Deniega ad_storage
de forma predeterminada y otorga consentimiento a los otros tipos de almacenamiento.
También usa wait_for_update
a fin de permitir tiempo para recibir opciones de visitantes de la CMP.
const setDefaultConsentState = require('setDefaultConsentState');
setDefaultConsentState({
'ad_storage': 'denied',
'analytics_storage': 'granted',
'functionality_storage': 'granted',
'personalization_storage': 'granted',
'security_storage': 'granted',
'wait_for_update': 500
});
Actualizar estado de consentimiento
Después de que un visitante del sitio web indica sus opciones de consentimiento, por lo general, mediante una interacción con un banner de consentimiento, el código de la plantilla debe actualizar los estados de consentimiento de manera acorde con la API de updateConsentState.
En el siguiente ejemplo, se muestra la llamada updateConsentState
para un visitante que indicó que da su consentimiento para todos los tipos de almacenamiento. Una vez más, en este ejemplo se usan valores codificados para granted
, pero en la práctica, se deben determinar en el tiempo de ejecución mediante el consentimiento del visitante que recopila la CMP.
const updateConsentState = require('updateConsentState');
updateConsentState({
'ad_storage': 'granted',
'analytics_storage': 'granted',
'functionality_storage': 'granted',
'personalization_storage': 'granted',
'security_storage': 'granted'
});
Comportamiento específico de una región
Para establecer estados de consentimiento predeterminados que se apliquen 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, a continuación, se establece el estado predeterminado de analytics_storage
en denied
para los visitantes de España y Alaska, y se 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'
});
Tiene prioridad la más específica
Si se ejecutan 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 ad_storage
está configurado 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 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á |
EE.UU.-CA | 'denied' |
Se aplica a 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 se encuentran en EE.UU. ni en Canadá.
|
Cómo pasar información de clics en anuncios, ID de cliente e ID de sesión en URL
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 este a las URL 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 los anuncios, los anunciantes pueden, de manera opcional, pasar información sobre los clics en los 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
está configurado como rechazado, la transferencia de URL se puede usar para enviar estadísticas basadas en sesiones y eventos (incluidas las conversiones) sin cookies en las páginas.
Para usar la transferencia de URL, se deben cumplir las siguientes condiciones:
- En la página, se incluyen etiquetas de Google que tienen en cuenta el consentimiento.
- El sitio habilitó el uso de 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 contiene un GCLID o DCLID (solo en etiquetas de Google Ads y Floodlight)
Tu plantilla debe permitir que el usuario de la plantilla configure si desea habilitar esta configuración o no. Se utiliza el siguiente código de plantilla para establecer URL_passthrough como verdadero:
gtagSet('url_passthrough', true);
Ocultar datos de anuncios
Cuando se niega ad_storage
, no se configurarán 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 la página completa, incluida cualquier información de clic en el anuncio en los parámetros de URL.
Para ocultar aún más los datos de tus anuncios cuando se rechace ad_storage
, establece ads_data_redaction
en verdadero.
gtagSet('ads_data_redaction', true);
Cuando ads_data_redaction
sea verdadero y se rechace ad_storage
, se ocultarán los identificadores de clics en el anuncio enviados por las solicitudes de red mediante etiquetas de Google Ads y Floodlight.
ID de desarrollador
Si eres un proveedor de CMP con un ID de desarrollador emitido por Google, usa el siguiente método para establecer esto lo antes posible en tu plantilla.
gtagSet('developer_id.<your_developer_id>', true);
Ejemplo de implementación
En este ejemplo, se muestra cómo crear una plantilla que lee cookies desde la solución de administración de consentimiento para obtener opciones de consentimiento de los visitantes. Esto hace que esas opciones estén disponibles para GTM lo antes posible durante el proceso de carga, cuando un visitante realiza sus selecciones en una página anterior.
Para seguir este ejemplo, crearás un campo en la plantilla a fin de mantener el estado de consentimiento predeterminado. El código de implementación leerá ese campo para establecer el estado de consentimiento predeterminado en el entorno de ejecución. Con el comando update, su código intentará leer una cookie configurada por la solución de consentimiento para almacenar las opciones de consentimiento del visitante.
También configurarás una devolución de llamada para updateConsentState
a fin de manejar el caso en el que un visitante aún no seleccionó su consentimiento o decide cambiar su consentimiento.
Estos son los pasos principales:
- Cómo usar el Editor de plantillas para crear la plantilla
- Integre la plantilla con la solución de consentimiento
- Configuración de usuario de plantilla
Utilice el Editor de plantillas para crear la plantilla
- Acceda a su cuenta de Google Tag Manager.
- En el panel de navegación izquierdo, seleccione Plantillas.
- En el panel Plantillas de etiqueta, haz clic en Nuevo.
Agregar campos
- Selecciona la pestaña Campos (Fields) y haz clic en Agregar campo (Add Field).
- Elige Param table.
- Cambia el nombre a
defaultSettings
. - Expandir el campo
- Actualiza Display Name a
Default settings
. - Haga clic en Agregar columna, elija Entrada de texto, cambie el nombre a
region
y marque la casilla Solicitar que los valores de columna sean únicos. - Expande la columna y cambia el nombre visible a
Region (leave blank to have consent apply to all regions)
. La declaración entre paréntesis es documentación para los usuarios de su plantilla. - Haz clic en Agregar columna, elige Entrada de texto y cambia el nombre a
granted
. - Expande la columna y cambia el nombre visible a
Granted Consent Types(comma separated)
. - Haz clic en Agregar columna, elige Entrada de texto y cambia el nombre a
denied
. - Expande la columna y cambia el nombre visible a
Denied Consent Types (comma separated)
. - Haz clic en Agregar campo, elige Casilla de verificación y cambia el nombre del campo a
ads_data_redaction
. - Actualiza el nombre visible a
Redact Ads Data
.
Agregar código
Copia el siguiente código y reemplaza los parámetros entre corchetes (el nombre de la cookie y comprueba si hay un estado de consentimiento actualizado) con los adecuados para tu implementación. Una vez que lo hagas, usa tu código para reemplazar el código estándar en la pestaña Code de GTM. Guarde la plantilla después de pegarla.
// 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 = '<replace_with_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',
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) => {
// Set developer ID
gtagSet('developer_id.<replace_with_your_developer_id>', true);
// Set default consent state(s)
data.defaultSettings.forEach(settings => {
const defaultData = parseCommandData(settings);
defaultData.wait_for_update = 500;
setDefaultConsentState(defaultData);
});
gtagSet('ads_data_redaction', data.ads_data_redaction);
// Check if cookie is set and has values that corresopnd 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();
Agregar permisos
A continuación, configure los permisos para acceder al estado de consentimiento y a las cookies.
Para administrar los estados de consentimiento:
- Seleccione la pestaña Permisos y haga clic en Acceso al estado de consentimiento.
- Haga clic en Agregar tipo de consentimiento.
- Haz clic en el cuadro y selecciona
ad_storage
en el menú desplegable. - Marca Escribir.
- Haz clic en Agregar.
Repite los pasos 2 a 5 y sustituye analytics_storage
por ad_storage
.
Haz clic en Guardar para terminar.
Para acceder a las cookies, haz lo siguiente:
- Selecciona la pestaña Permisos y haz clic en Valores de cookie leídos.
- En Specific (Específico), ingrese los nombres de cada una de las cookies que su código debe leer para determinar las opciones de consentimiento del usuario, un nombre por línea.
- Haz clic en Guardar.
Pruebas
Consulta Pruebas para obtener información sobre cómo crear pruebas para tu plantilla.
Integre la plantilla con la solución de consentimiento
En el siguiente código, se muestra un ejemplo de cómo se puede integrar esta plantilla con el código de tu solución de administración de consentimiento mediante el agregado de 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);
});
};
Configuración de usuario de plantilla
Debes proporcionar documentación para los usuarios de plantillas. Utilizarán esta plantilla para configurar una etiqueta que use el activador Inicialización de consentimiento: todas las páginas. En la tabla Configuración, deben ingresar una lista de los tipos de consentimiento y si desean otorgar o rechazar cada uno de forma predeterminada. Si la configuración predeterminada es diferente según la ubicación del usuario, debe crear una fila para cada conjunto de regiones que comparten el mismo estado de consentimiento predeterminado.