https://tomascornelles.com/user/themes/tcAMP2018

Aviso de cookies

Ya sabes, usamos google analytics que usa cookies, pero si no quieres, puedes rechazarlas. Ver la política de cookies

Como implementar el consentimiento de cookies facilmente en webs con AMP

2 meses antes

El tema de las cookies es algo que a los desarrolladores nos trae un poco de cabeza, pero para las páginas que usan AMP hay una solución out-of-the-box.

Ya llevaba mucho tiempo sin escribir y justo cuando estoy por actualizar la web me encuentro con un tema que podría ayudar a otros.

Desde hace unos dias que entró en vigencia la GDPR o ley de protección de datos a nivel europeo, en la cual se pide a los sitios web que manejen cookies de seguimiento, analiticas o de personalización, que permitan al usurario rechazarlas.

Por esto los desarrolladores hemos tenido que buscar la forma de "parar" la carga scripts de analíticas (Google Analytics, por ejemplo) hasta que el usuario haya aceptado, o bloquearlos en caso de que las rechace.

Para los que trabajamos con AMP tenemos varias herramientas que nos permiten hacer esto sin quebraderos de cabeza, os lo explico a continuación.

Llamar a los scripts correspondientes

A tu página hay que añadir los scripts necesarios de AMP:

amp-consent provee la lógica para permitir al usuario aceptar o rechazar una pregunta, la cual se almacena para poderla usar más tarde.

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

amp-geo permite establecer la región desde la que nos visitan para saber si mostrarle o no el mensaje. Esta parte es optativa, pues se puede permitir a cualquier usuario rechazar las cookies, la incluyo por mostrar un ejemplo "completo".

<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>

Si no has incluido aún amp-analytics y vas a usarlo, recuerda añadirlo tambien.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Incluir lógica

En primer lugar establecemos la región a la que afectará nuestro mensaje.

<amp-geo layout="nodisplay">
  <script type="application/json">
    {
      "ISOCountryGroups": {
        "eea": [ "preset-eea", "unknown" ]
      }
    }
  </script>
</amp-geo>

En segundo lugar usamos amp-consent, indicando "consentRequired": false para todo el mundo y "consentRequired": true para nuestra región. Además indicamos el ID del div que contendrá el mensaje "promptUI": "consentDialog".

despues del script, añadimos la maquetación de nuestro mensaje. Añadiendo a los botones on="tap:myUserConsent.accept" o on="tap:myUserConsent.reject", AMP almacenará en localStorage la elección y nos permitirá usarla después.

<amp-consent id="myUserConsent" layout="nodisplay">
  <script type="application/json">
    {
      "consentInstanceId": "world-wide-consent",
      "consentRequired": false,
      "geoOverride": {
        "eea": {
          "promptUI": "consentDialog",
          "consentRequired": true
        }
      }
    }
  </script>

  <div class="popupOverlay" id="consentDialog">
    <div class="consentPopup">
      <h2>Aviso de cookies</h2>
      <p>Ya sabes, usamos google analytics que usa cookies, pero si no quieres, puedes rechazarlas. <a href="politica-de-cookies">Ver la política de cookies</a></p>
      <p class="center">
        <button on="tap:myUserConsent.accept" class="boton">Aceptar las cookies</button>
        <button on="tap:myUserConsent.reject" class="boton">Rechazar las cookies</button>
      </p>
    </div>
  </div>
</amp-consent>

Usando el permiso

Una vez el usuario ha aceptado o rechazado el mensaje, podemos usar ese permiso en cualquier parte de nuestro amp-html mediante el atributo data-block-on-consent en el elemento. Por ejemplo en el caso de google analytics sería.

<amp-analytics type="gtag" data-credentials="include" data-block-on-consent>
  <script type="application/json">
  {
    "vars" : {
      "gtag_id": "UA-XXXXXXXX-X",
      "config" : {
        "UA-XXXXXXXX-X": { 
          "groups": "default",
          "page_title": "My website",
          "page_location": "https://my.web"
        }
      }
    }
  }
  </script>
</amp-analytics>

De esta forma si el usuario no ha aceptado el consentimiento, AMP no cargará el bloque de amp-analytics y no rastreará al usuario. El mismo atributo data-block-on-consent se puede usar en cualquier elemento para mostrar o no según si aceptan, por ejemplo, no cargar las imágenes grandes a menos que el usuario lo permita, ideal para redes lentas.

Espero que estas líneas te ayuden a estar al dia con la ley en tu web con AMP.