TreFemten

Eget banner (headless)

Vil du lage banneret selv, for eksempel i React, Vue eller Blade, velger du Headless under Utseende i TreFemten. Da viser TreFemten ikke noe banner, men tar seg fortsatt av informasjonskapselen, signalene til Google, Microsoft og Meta, blokkerte skript og samtykkeloggen. Du installerer koden på samme måte som ellers.

Ditt eget banner må oppfylle de samme kravene som vårt:

  • «Godta alle» og «Avvis alle» med lik vekt i første lag, og en måte å velge per kategori uten å måtte godta eller avvise først.
  • Ingenting forhåndsvalgt.
  • Lukker besøkende banneret uten å velge, gjelder bare nødvendige informasjonskapsler.
  • En lett tilgjengelig måte å åpne valget igjen på.
  • Informasjon om tjenestene i hver kategori: hvem, hva til og hvor lenge (categories under har alt dette).

Vente på TreFemten

Skriptet ditt kan kjøre før TreFemten er klart. Legg koden i køen tfq, så kjøres den når API-et finnes:

(window.tfq = window.tfq || []).push((api) => {
    if (!api.getConsentState().decided) {
        showMyBanner(api.categories);
    }
});

Du kan også lytte etter hendelsen trefemten:ready, som har API-et i event.detail.

API

Alt ligger på window.TreFemten.

Egenskap eller metode Beskrivelse
categories Kategoriene med key, necessary, name, description og services (navn, leverandør, formål, lagring).
getConsentState() { decided, consent, id, timestamp }. consent er et objekt med true/false for hver kategorinøkkel.
acceptAll() Godtar alle kategorier.
rejectAll() Avviser alt som ikke er nødvendig.
updateConsent(kategorier) Godtar nøyaktig de valgfrie kategoriene du oppgir, som liste (['statistikk']) eller objekt ({ statistikk: true }). Resten avvises.
open() Ber om at valget åpnes. I headless-modus sender det hendelsen trefemten:open, som banneret ditt lytter etter.
onConsentChange(callback) Kaller callback med ny tilstand når samtykket endres. Returnerer en funksjon som stopper lyttingen.
version Versjonen av TreFemten-skriptet.

Alle valg som gjøres gjennom API-et, logges som om de ble gjort i vårt banner, merket «API» i samtykkeloggen.

Hendelser

Hendelsene sendes på window:

  • trefemten:ready: TreFemten er klart. event.detail er API-et.
  • trefemten:change: samtykket er endret. event.detail er den nye tilstanden.
  • trefemten:open: noen vil åpne valget, for eksempel via en lenke med data-tf-open. Vis banneret ditt.

Eksempel

(window.tfq = window.tfq || []).push((api) => {
    const show = () => myBanner.open({
        categories: api.categories.filter((category) => !category.necessary),
        current: api.getConsentState(),
        onAcceptAll: () => api.acceptAll(),
        onRejectAll: () => api.rejectAll(),
        onSave: (keys) => api.updateConsent(keys),
    });

    window.addEventListener('trefemten:open', show);
    if (!api.getConsentState().decided) show();
});