Configurar el modo de consentimiento en sitios web

Esta página está dirigida a desarrolladores que mantienen su propia solución de consentimiento en su sitio web y quieren integrar el modo de consentimiento. Si quieres ver una introducción al modo de consentimiento, consulta el resumen del modo de consentimiento. Si usas una plataforma de gestión del consentimiento (CMP) para obtener el consentimiento de los usuarios, consulta más información sobre cómo configurar el modo de consentimiento con una CMP.

Puedes implementar el modo de consentimiento de forma básica o avanzada. Consulta las directrices de tu empresa para elegir un método de implementación y los valores predeterminados que debes definir. Más información sobre las diferencias entre el modo de consentimiento básico y el avanzado

Antes de empezar

Antes de implementar el modo de consentimiento, ten en cuenta lo siguiente:

  • Si usas Tag Manager y quieres mantener tu propio banner, te recomendamos que lo cargues a través del contenedor de Tag Manager. Para ello, debes crear una plantilla del modo de consentimiento. También puedes usar una plantilla de modo de consentimiento de la galería de plantillas comunitarias.

  • Si usa gtag.js, asegúrese de haber instalado la etiqueta de Google en todas las páginas de su sitio web. El código del modo de consentimiento se añade a todas las páginas de su sitio web.

Con una implementación básica del modo de consentimiento, bloqueas la carga de la etiqueta de Google hasta que los usuarios hayan dado su consentimiento. Para implementar el modo de consentimiento básico, sigue estos pasos:
  1. Antes de que un usuario dé su consentimiento, bloquee la recogida de datos de Analytics y defina el estado del consentimiento predeterminado.
  2. Una vez que un usuario haya dado su consentimiento, habilita la recogida de datos de Analytics.

gtag.js

  1. En la etiqueta <head> de una página web, configure el objeto dataLayer antes del código del banner de consentimiento. Defina los valores predeterminados del consentimiento en la capa de datos.

    Esto no activa la etiqueta de Google, ya que aún no has cargado la biblioteca de la etiqueta de Google.

    Por ejemplo:

      <script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('consent', 'default', {
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500,
  });
  gtag('js', new Date());
  gtag('config', 'Google tag ID');
  </script>

  2. Añade una función que monitorice las interacciones con tus botones de consentimiento y guarde la interacción mediante localStorage o cookies. Nota: Asegúrate de tener identificadores para todos los botones de tu banner de consentimiento.

  3. Carga el banner de consentimiento.

  4. Envía la interacción con el banner de consentimiento a la capa de datos.

  5. Cargue la etiqueta de Google cuando el usuario dé su consentimiento.

  grantButton.addEventListener("click", function() {
    localStorage.setItem("consentGranted", "true");
    function gtag() { dataLayer.push(arguments); }

    gtag('consent', 'update', {
      ad_user_data: 'granted',
      ad_personalization: 'granted',
      ad_storage: 'granted',
      analytics_storage: 'granted'
    });
  });

  // Load gtag.js script.
  var gtagScript = document.createElement('script');
  gtagScript.async = true;
  gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=Google tag ID';

  var firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(gtagScript,firstScript);

Tag Manager

  1. En la etiqueta <head> de una página web, configure el objeto dataLayer antes de cargar el código del banner de consentimiento. Defina los valores predeterminados del consentimiento en la capa de datos.

    Esto no activa tu contenedor de Tag Manager, ya que aún no has cargado la biblioteca de Google Tag Manager.

    Por ejemplo:

      <script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('consent', 'default', {
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500,
  });
  dataLayer.push({'gtm.start': new Date().getTime(), 'event': 'gtm.js'});
  </script>
  ```

  2. Añade una función que monitorice las interacciones con tus botones de consentimiento y guarde la interacción mediante localStorage o cookies. Nota: Asegúrate de tener identificadores para todos los botones de tu banner de consentimiento.

  3. Carga el banner de consentimiento. No cargue el banner de consentimiento a través de su contenedor de Tag Manager, ya que lo está bloqueando hasta que un usuario dé su consentimiento.

  4. Envía la interacción con el banner de consentimiento a la capa de datos.

  5. Carga el contenedor de Tag Manager cuando el usuario da su consentimiento.

  grantButton.addEventListener("click", function() {
    localStorage.setItem("consentGranted", "true");
    function gtag() { dataLayer.push(arguments); }

    gtag('consent', 'update', {
      ad_user_data: 'granted',
      ad_personalization: 'granted',
      ad_storage: 'granted',
      analytics_storage: 'granted'
    });
  });

  // Load Tag Manager script.
  var gtmScript = document.createElement('script');
  gtmScript.async = true;
  gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=Container ID';

  var firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(gtmScript,firstScript);

Como muestra del compromiso continuo con un ecosistema de publicidad digital centrado en la privacidad, Google va a reforzar el cumplimiento de la Política de Consentimiento de Usuarios de la Unión Europea.

Consulta más información sobre los cambios en el modo de consentimiento relativos al tráfico del Espacio Económico Europeo (EEE).

Los usuarios que utilicen el modo de consentimiento tienen que enviar dos parámetros nuevos aparte de ad_storage y analytics_storage:

Nombre del campo Valores permitidos Descripción
ad_user_data 'granted' | 'denied' Define el consentimiento sobre el envío a Google de datos de usuario relacionados con la publicidad.
ad_personalization 'granted' | 'denied' Define el consentimiento sobre la publicidad personalizada.

Pasos siguientes

Controles de etiquetas antiguas

Si usas etiquetas antiguas, como ga.js, analytics.js o conversion.js, cámbiate a gtag.js o a Google Tag Manager.

Consulta más información sobre los controles de privacidad de otras etiquetas antiguas en los siguientes artículos: