Consentimento de cookies

Peça permissão aos leitores antes de o analytics rodar, com o banner próprio do Blume ou um gerenciador de consentimento hospedado como Osano ou Ethyca, configurado como adaptador no blume.config.ts.

Defina consent no blume.config.ts para pedir permissão aos leitores antes de o seu analytics rodar. Ele recebe um adaptador de blume/consent: o banner próprio do Blume ou um gerenciador de consentimento hospedado que você já usa.

import { defineConfig } from "blume";
import { googleAnalytics, posthog } from "blume/analytics";
import { native } from "blume/consent";

export default defineConfig({
  analytics: [
    googleAnalytics({ id: "G-XXXXXXXXXX" }),
    posthog({ key: "phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }),
  ],
  consent: native({ policy: "/privacy" }),
});

Com consent definido, todos os adaptadores de analytics esperam. As tags deles ficam na página, mas só rodam quando o leitor permite o analytics, e aí rodam na ordem em que você os listou. Quem recusa nunca carrega essas tags. Essa pessoa também não vê a avaliação da página nem a caixa de comentário dela, já que as respostas não teriam para onde ir. O Vercel Web Analytics carrega de qualquer jeito, porque o componente dele não é uma tag que o Blume consiga reter. Mesmo assim, ele não envia nada até o leitor permitir o analytics.

Adaptadores

O banner do Blume

O native() mostra um pequeno card no rodapé da página até o leitor responder. Ele traz Aceitar e Recusar lado a lado, então recusar é tão fácil quanto aceitar. A resposta fica salva no navegador do leitor, e o banner não aparece de novo depois disso.

consent: native({
  policy: "/privacy", // optional: links the banner to your privacy policy
}),

O policy aceita uma rota de página ou uma URL completa. O texto do banner vem traduzido em todos os idiomas integrados. Para mudar o texto, sobrescreva as strings de UI de consent (message, accept, decline, policy, settings) com i18n.ui.

O banner também funciona no blume dev, então você consegue vê-lo enquanto escreve. Já o analytics em si só carrega em builds de produção.

Osano

O osano() carrega o Osano Cookie Consent, que mostra o banner e a gaveta que você configurou no painel do Osano. O Blume roda o seu analytics assim que o Osano informa o consentimento de analytics do leitor, e roda de novo sempre que o leitor mudar a escolha. Os dois IDs estão na tag de script que o Osano te passa: https://cmp.osano.com/<customerId>/<configId>/osano.js.

import { osano } from "blume/consent";

consent: osano({ customerId: "AzZdRbSIoEzZU2", configId: "7b9e2f4a-…" }),

É o Osano que decide o que conta como consentimento em cada região, seguindo o modo de conformidade que você escolheu no painel dele.

Ethyca

O ethyca() carrega o gerenciador de consentimento Fides, da Ethyca, a partir da sua central de privacidade. Ele mostra o banner e o modal que você configurou no Fides. O Blume roda o seu analytics assim que o aviso de analytics do leitor estiver ativo. Isso acontece quando o leitor aceitou, quando não recusou ou quando o aviso só pede que ele confirme que está ciente.

import { ethyca } from "blume/consent";

consent: ethyca({
  privacyCenter: "https://privacy.example.com",
  propertyId: "FDS-XXXXXX", // optional: which Fides property to load
  notice: "analytics", // optional: the notice key that covers analytics
}),

O valor padrão de notice é analytics. Defina esse campo se o seu aviso de analytics no Fides usar outra chave.

Assim como o analytics, o Osano e o Fides só carregam em builds de produção, então testar no blume dev não cria nenhum registro de consentimento. Para testá-los antes de publicar, use blume build e blume preview.

Mudando uma resposta

Quando consent está definido, o rodapé do site mostra um link Configurações de cookies. Ele abre de novo o banner do Blume ou as preferências do gerenciador de consentimento hospedado. Se você trocar o rodapé pelo seu próprio Footer, é só colocar o atributo data-blume-consent-open em qualquer elemento para que ele funcione como esse link:

<button data-blume-consent-open type="button">Cookie settings</button>

Se um leitor permitir o analytics e depois voltar atrás, a página é recarregada, porque essa é a única forma de parar scripts que já começaram a rodar. A partir daí, o analytics fica desligado.

Seus próprios scripts

Você pode reter qualquer script seu do mesmo jeito: coloque type="text/plain" e data-blume-consent="analytics" nele, e o script vai rodar quando o leitor permitir o analytics. Para reagir às respostas por conta própria, escute o evento blume:consent no window. O detail.analytics dele traz a escolha do leitor. Já o window.blumeConsent.analytics guarda a escolha atual: fica null até o gerenciador de consentimento responder e depois vira true ou false.

window.addEventListener("blume:consent", (event) => {
  if (event.detail.analytics) {
    // start something that needs consent
  }
});