Cómo configurar el modo de consentimiento en sitios web

Esta página está dirigida a los desarrolladores que mantienen su propia solución de consentimiento en su sitio web y desean integrar el modo de consentimiento. Para obtener una introducción al modo de consentimiento, lee el Resumen del modo de consentimiento. Si utilizas una plataforma de administración de consentimiento (CMP) para obtener el consentimiento del usuario, obtén más información para configurar el modo de consentimiento con una CMP.

Puedes implementar el modo de consentimiento de forma básica o avanzada. Consulta los lineamientos de tu empresa para elegir un método de implementación y los valores predeterminados que se deben establecer. Obtén más información sobre el modo de consentimiento básico y el avanzado.

Antes de comenzar

Ten en cuenta lo siguiente antes de implementar el modo de consentimiento:

  • Si utilizas Tag Manager y deseas mantener tu propio banner, el enfoque recomendado es cargarlo a través del contenedor de Tag Manager. Para ello, debes crear una plantilla del modo de consentimiento. Como alternativa, puedes usar una plantilla del modo de consentimiento de la Galería de plantillas de la comunidad.

  • Si usas gtag.js, asegúrate de haber instalado la etiqueta de Google en todas las páginas de tu sitio web. El código del modo de consentimiento se agrega a cada página de tu sitio web.

Con una implementación básica del modo de consentimiento, bloqueas la carga de la etiqueta de Google hasta que un usuario otorga su consentimiento. Para implementar el modo de consentimiento básico, haz lo siguiente:
  1. Antes de que un usuario otorgue su consentimiento, bloquea la recopilación de Analytics y establece el estado de consentimiento predeterminado.
  2. Después de que un usuario otorgue su consentimiento, habilita la recopilación de Analytics.

gtag.js

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

    Esto no activa tu etiqueta de Google, ya que aún no cargaste 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. Agrega una función que supervise las interacciones con los botones de consentimiento y guarde la interacción con localStorage o cookies. Sugerencia: 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 del banner de consentimiento a la capa de datos.

  5. Carga la etiqueta de Google cuando el usuario otorga 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, configura el objeto dataLayer antes de cargar el código del banner de consentimiento. Establece los valores predeterminados de consentimiento en la capa de datos.

    Esto no activa tu contenedor de Tag Manager, ya que aún no cargaste 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. Agrega una función que supervise las interacciones con los botones de consentimiento y guarde la interacción con localStorage o cookies. Sugerencia: Asegúrate de tener identificadores para todos los botones de tu banner de consentimiento.

  3. Carga el banner de consentimiento. No cargues el banner de consentimiento a través de tu contenedor de Tag Manager, ya que lo bloqueas hasta que un usuario otorga su consentimiento.

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

  5. Carga el contenedor del Administrador de etiquetas cuando el usuario otorga 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 parte del compromiso permanente de Google con un ecosistema de publicidad digital centrado en la privacidad, fortaleceremos la aplicación de nuestra política de consentimiento de usuarios de la UE.

Obtén más información sobre las actualizaciones del modo de consentimiento para el tráfico en el Espacio Económico Europeo (EEE) de Google.

Los usuarios del modo de consentimiento deben enviar dos parámetros nuevos además de ad_storage y analytics_storage:

Nombre del campo Valores permitidos Descripción
ad_user_data 'granted' | 'denied' Establece el consentimiento para enviar a Google los datos del usuario relacionados con la publicidad.
ad_personalization 'granted' | 'denied' Establece el consentimiento para la publicidad personalizada.

Próximos pasos

Controles de etiquetas heredados

Si utilizas etiquetas heredadas, como ga.js, analytics.js o conversion.js, actualízalas a gtag.js o Google Tag Manager.

Para obtener más información sobre otros controles de privacidad de etiquetas heredadas, consulta la siguiente documentación: