Consentl

Consentl avec React, Vue, Angular et d’autres applications monopages

Placez le chargeur Consentl dans index.html, et non dans un composant, pour les applications monopages créées avec Vite, Create React App ou Angular CLI.

Chargeur en premier dans <head>
Oui

Dans une application monopage, les composants sont montés trop tard pour le consentement : les valeurs par défaut de Google Consent Mode et le blocage préalable doivent être en place avant l’exécution de tout autre script. Placez le chargeur dans le fichier HTML d’entrée comme premier élément dans <head>, de manière synchrone :

<!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>
Outil Fichier
Vite (React, Vue, Svelte, Solid) index.html à la racine du projet
Create React App public/index.html
Angular CLI src/index.html

Dans le code de votre application

  • Changements de route : rien à faire. L’environnement d’exécution reste chargé, le choix est enregistré dans le cookie propriétaire consentl et les balises bloquées sont libérées sans rechargement.
  • Rouvrir les préférences : affichez <a href="#consentl">Cookie settings</a> n’importe où, ou appelez window.Consentl?.open("prefs") depuis un bouton. Les clics sont gérés sur document : les éléments affichés ultérieurement fonctionnent donc aussi.
  • Vos propres outils de mesure d’audience ou fonctionnalités qui nécessitent le consentement : consentl:change se déclenche à chaque affichage de page avec les choix actuels, puis à chaque modification : ne démarrez donc les choses qu’une seule fois :
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());
  • Les scripts que votre application insère ultérieurement sont bloqués lorsqu’ils correspondent à un traceur connu (forfait Business) ou à une règle de blocage du tableau de bord. Avec Free et Pro, vérifiez le consentement dans votre code comme ci-dessus.
  • Les balises écrites dans index.html lui-même sont demandées par le navigateur avant le consentement ; marquez-les avec type="text/plain" data-consentl="…" (voir Tout site web).

Vérifier le fonctionnement

Affichez le code source de l’application générée : le chargeur est le premier <script> dans <head>. Suivez ensuite les vérifications de Tout site web.

Limites

  • Ne chargez pas le chargeur depuis un composant et ne l’injectez pas à nouveau lors de la navigation.
  • Un changement de langue sans rechargement complet conserve la bannière dans sa première langue jusqu’au prochain chargement de page.
  • Si vous envoyez une Content Security Policy, autorisez https://api.consentl.com (voir Tout site web).

Vous êtes bloqué ? Écrivez à support@consentl.com — nous répondons en anglais les jours ouvrables.