Consentl met React, Vue, Angular en andere single-page apps

Plaats de Consentl-loader in index.html, niet in een component, bij single-page apps die zijn gebouwd met Vite, Create React App of de Angular CLI.

Loader als eerste in <head>

Ja

In een single-page app worden componenten te laat gemount voor toestemming: de standaardwaarden van Google Consent Mode en de voorafgaande blokkering moeten actief zijn voordat een ander script wordt uitgevoerd. Plaats de loader in het HTML-startbestand als het eerste element in <head>, synchroon:

<!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>

In uw appcode

• Routewijzigingen: niets te doen. De runtime blijft geladen, de keuze wordt opgeslagen in de first-party cookie consentl en tegengehouden tags worden zonder herladen vrijgegeven.
• De voorkeuren opnieuw openen: render ergens <a href="#consentl">Cookie settings</a>, of roep window.Consentl?.open("prefs") aan vanuit een knop. Klikken worden op document afgehandeld, dus elementen die later worden gerenderd, werken ook.
• Uw eigen analyse of functies die toestemming vereisen: consentl:change wordt bij elke paginaweergave geactiveerd met de huidige keuzes en opnieuw bij elke wijziging, dus start dingen maar één keer:

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());

• Scripts die uw app later invoegt, worden tegengehouden als ze overeenkomen met een bekende tracker (plan Business) of een blokkeerregel uit het dashboard. Bij Free en Pro controleert u de toestemming in uw code zoals hierboven.
• Tags die in index.html zelf staan, worden door de browser vóór de toestemming opgevraagd; markeer ze met type="text/plain" data-consentl="…" (zie Elke website).

Controleren of het werkt

Bekijk de paginabron van de gebouwde app: de loader is het eerste <script> in <head>. Volg daarna de controles in Elke website.

Beperkingen

• Laad de loader niet vanuit een component en voeg hem bij navigatie niet opnieuw in.
• Bij een taalwissel zonder volledig herladen blijft de banner in zijn eerste taal tot de volgende keer dat de pagina wordt geladen.
• Als u een Content Security Policy verstuurt, sta dan https://api.consentl.com toe (zie Elke website).

Gerelateerde handleidingen

• Next.js
• Nuxt
• Astro

Vastgelopen? Schrijf naar support@consentl.com — wij antwoorden op werkdagen in het Engels.