Consentl

Consentl con React, Vue, Angular y otras aplicaciones de una sola página

Coloque el cargador de Consentl en index.html, no en un componente, en las aplicaciones de una sola página creadas con Vite, Create React App o Angular CLI.

Cargador el primero en el <head>
Sí

En una aplicación de una sola página, los componentes se montan demasiado tarde para el consentimiento: los valores predeterminados de Google Consent Mode y el bloqueo previo deben estar en su sitio antes de que se ejecute cualquier otro script. Coloque el cargador en el archivo HTML de entrada como primer elemento del <head>, de forma síncrona:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
Herramienta Archivo
Vite (React, Vue, Svelte, Solid) index.html en la raíz del proyecto
Create React App public/index.html
Angular CLI src/index.html

En el código de su aplicación

  • Cambios de ruta: no hay nada que hacer. El runtime permanece cargado, la elección se guarda en la cookie propia consentl y las etiquetas retenidas se liberan sin recargar.
  • Volver a abrir las preferencias: genere <a href="#consentl">Cookie settings</a> en cualquier lugar, o llame a window.Consentl?.open("prefs") desde un botón. Los clics se gestionan en document, por lo que los elementos generados más tarde también funcionan.
  • Sus propias analíticas o funciones que necesitan consentimiento: consentl:change se dispara en cada vista de página con las elecciones actuales y de nuevo con cada cambio, así que inicie las cosas una sola vez:
let started = false;
const maybeStart = (c) => {
  if (c.analytics && !started) {
    started = true;
    startAnalytics();
  }
};
document.addEventListener("consentl:change", (e) => maybeStart(e.detail));
if (window.Consentl) maybeStart(window.Consentl.get());
  • Los scripts que su aplicación inserta más tarde se retienen cuando coinciden con un rastreador conocido (plan Business) o con una regla de bloqueo del panel de control. En Free y Pro, compruebe el consentimiento en su código como se indica arriba.
  • Las etiquetas escritas en el propio index.html las solicita el navegador antes del consentimiento; márquelas con type="text/plain" data-consentl="…" (consulte Cualquier sitio web).

Comprobar que funciona

Vea el código fuente de la aplicación compilada: el cargador es el primer <script> del <head>. Después, siga las comprobaciones de Cualquier sitio web.

Limitaciones

  • No cargue el cargador desde un componente ni vuelva a inyectarlo al navegar.
  • Un cambio de idioma sin recarga completa mantiene el banner en su primer idioma hasta la siguiente carga de página.
  • Si envía una Content Security Policy, permita https://api.consentl.com (consulte Cualquier sitio web).

¿Se ha atascado? Escriba a support@consentl.com: respondemos en inglés en días laborables.