Consentl

Consentl com React, Vue, Angular e outras aplicações de página única

Coloque o loader do Consentl no index.html, e não num componente, nas aplicações de página única criadas com Vite, Create React App ou Angular CLI.

Loader em primeiro lugar no <head>
Sim

Numa aplicação de página única, os componentes são montados demasiado tarde para o consentimento: as predefinições do Google Consent Mode e o bloqueio prévio têm de estar ativos antes de qualquer outro script ser executado. Coloque o loader no ficheiro HTML de entrada como primeiro elemento no <head>, síncrono:

<!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>
Ferramenta Ficheiro
Vite (React, Vue, Svelte, Solid) index.html na raiz do projeto
Create React App public/index.html
Angular CLI src/index.html

No código da sua aplicação

  • Mudanças de rota: não é preciso fazer nada. O runtime mantém-se carregado, a escolha é guardada no cookie próprio consentl e as tags retidas são libertadas sem recarregar a página.
  • Voltar a abrir as preferências: apresente <a href="#consentl">Cookie settings</a> em qualquer lugar, ou chame window.Consentl?.open("prefs") a partir de um botão. Os cliques são tratados em document, pelo que os elementos apresentados mais tarde também funcionam.
  • As suas próprias estatísticas ou funcionalidades que exigem consentimento: consentl:change é disparado em cada visualização de página com as escolhas atuais e novamente em cada alteração, pelo que deve iniciar tudo apenas uma 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());
  • Os scripts que a sua aplicação insere mais tarde são retidos quando correspondem a um rastreador conhecido (plano Business) ou a uma regra de bloqueio do painel. Nos planos Free e Pro, verifique o consentimento no seu código, como acima.
  • As tags escritas no próprio index.html são pedidas pelo navegador antes do consentimento; marque-as com type="text/plain" data-consentl="…" (consulte Qualquer site).

Verificar que funciona

Veja o código-fonte da página da aplicação compilada: o loader é o primeiro <script> no <head>. Depois, siga as verificações em Qualquer site.

Limitações

  • Não carregue o loader a partir de um componente nem o injete novamente durante a navegação.
  • Uma mudança de idioma sem recarregamento completo mantém o banner no primeiro idioma até ao próximo carregamento de página.
  • Se enviar uma Content Security Policy, permita https://api.consentl.com (consulte Qualquer site).

Com dificuldades? Escreva para support@consentl.com — respondemos em inglês nos dias úteis.