Küpsiste nõusoleku käsitlemine üheleherakendustes

Üheleherakenduses (single-page app, SPA) ei laadita lehte kunagi täielikult uuesti, seega peab küpsiste nõusolek elama rakenduse olekus, mitte ühe korra käivituvas skriptis. Salvesta külastaja valik, jaga seda kõigi komponentidega, aktiveeri või blokeeri skripte selle muutumisel, saada marsruudimuutuste lehevaatamisi ainult nõusolekuga ja muuda tagasivõtmine kohe kehtivaks, mitte alles järgmisel lehe laadimisel.

Miks on küpsiste nõusolek üheleherakenduses keerulisem?

Enamik nõusolekumustreid eeldab täielikke lehelaadimisi, samas kui SPA laaditakse üks kord ja seejärel vahetatakse vaateid JavaScriptiga. See murrab neli eeldust:

• Skriptid laaditakse üks kord. Kui analüütika oli laadimisel blokeeritud ja külastaja nõustub hiljem, ei võta ükski lehe laadimine seda üles. Pead selle kohapeal aktiveerima.
• Lehevaatamised on virtuaalsed. Marsruudimuutused ei laadi lehte uuesti, seega peab sinu ruuter lehevaatamistest teatama ja enne seda nõusolekut kontrollima.
• Valikud muutuvad seansi keskel. Külastaja võib nõustuda, sirvida ja seejärel jaluse lingi kaudu nõusoleku tagasi võtta, samal ajal kui skriptid juba mälus töötavad.
• Serveripoolne renderdamine lisab hüdratsiooni. Raamistikega nagu Next.js või Nuxt peab serveri HTML vastama esimesele kliendipoolsele renderdusele, kuid server ei pruugi külastaja valikut teada.

Kuidas modelleerida nõusolekuolekut SPA-s?

Käsitle nõusolekut väikese olekuhoidlana (store), millest loeb iga rakenduse osa ja millel on tellimismeetod, et komponendid ja skriptid saaksid muudatustele reageerida. Määra kõigi mittevajalike kategooriate vaikeväärtuseks keeldumine, et kood, mis käivitub enne salvestatud valiku laadimist, ei saaks kunagi andmeid lekitada.

// consent-store.ts
export type Category = 'necessary' | 'preferences' | 'analytics' | 'marketing';
export type Consent = Record<Category, boolean>;

export const DENIED: Consent = {
  necessary: true, preferences: false, analytics: false, marketing: false,
};

let state: Consent = DENIED;
const listeners = new Set<() => void>();

export const consentStore = {
  get: (): Consent => state,
  set(next: Partial<Consent>) {
    state = { ...state, ...next, necessary: true };
    listeners.forEach((notify) => notify());
  },
  subscribe(listener: () => void) {
    listeners.add(listener);
    return () => { listeners.delete(listener); };
  },
};

Päris rakenduses salvestaks set valiku ka esimese osapoole küpsisesse, kirjutaks selle sinu nõusolekulogisse ja uuendaks Google Consent Mode’i käsuga gtag('consent', 'update', …). Reactis ühendab useSyncExternalStore olekuhoidla komponentidega ja sama konksuga (hook) saab piirata ka manuseid, mis seavad küpsiseid:

// consent.tsx
import { useSyncExternalStore } from 'react';
import { consentStore, DENIED } from './consent-store';

export function useConsent() {
  return useSyncExternalStore(consentStore.subscribe, consentStore.get, () => DENIED);
}

export function VideoEmbed({ videoId }: { videoId: string }) {
  const { marketing } = useConsent();

  if (!marketing) {
    return (
      <div className="embed-placeholder">
        <p>Seda videot majutab YouTube, mis võib seada turundusküpsiseid.</p>
        <button type="button" onClick={() => consentStore.set({ marketing: true })}>
          Luba turundusküpsised ja esita
        </button>
      </div>
    );
  }

  return (
    <iframe
      src={`https://www.youtube-nocookie.com/embed/${videoId}`}
      title="Tootevideo"
      allowFullScreen
    />
  );
}

useSyncExternalStore kolmas argument on hetktõmmis, mida kasutatakse serveripoolse renderdamise ja hüdratsiooni ajal. Kui see tagastab DENIED, on server ja esimene kliendipoolne renderdus kooskõlas ning React renderdab kohe pärast hüdratsiooni uuesti tegeliku olekuga. Vues täidab sama rolli komponeeritav funktsioon (composable), mis ümbritseb reaktiivset ref-i.

Skriptide puhul, mis ei ole komponendid, telli olekuhoidla muudatused otse ja laadi skriptid dünaamilise import()-iga, kui nende kategooria on lubatud. Meie juhend skriptide blokeerimise kohta kuni nõusolekuni käsitleb aktiveerimismustreid.

Kuidas jälgida marsruudimuutusi ainult nõusolekuga?

Saada ruuterist pärast iga navigeerimist virtuaalne lehevaatamine ja kontrolli nõusolekut just sel hetkel. Kui külastaja annab analüütikanõusoleku seansi keskel, on mõistlik salvestada leht, millel ta parajasti on, sest sealt nõusolek algab.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { useConsent } from './consent';
import { trackPageView } from './analytics';

export function PageViewTracker() {
  const { pathname } = useLocation();
  const { analytics } = useConsent();

  useEffect(() => {
    if (analytics) trackPageView(pathname);
  }, [pathname, analytics]);

  return null;
}

Väldi topeltloendamist. Mõned analüütikatööriistad saavad saata lehevaatamisi automaatselt brauseri ajaloo muutumisel; Google Analytics 4 pakub seda täiustatud mõõtmise valikuna. Kasuta kas automaatset valikut või oma jälgijat, mitte mõlemat.

Kuidas vältida hüdratsiooni mittevastavusi ja bänneri vilkumist?

Otsusta, kus on külastaja valik esimesel renderdamisel teada. Selleks on kaks head võimalust:

• Loe nõusolekuküpsist serveris. Küpsised saadetakse iga päringuga, nii et serveris renderdatud lehed saavad bännerit õigesti näidata või vahele jätta alates esimesest baidist. See toimib ainult siis, kui HTML-i ei puhverdata ega jagata külastajate vahel.
• Renderda bänner ainult kliendis. Staatiliselt genereeritud või CDN-is puhverdatud lehtede puhul ära renderda serveris midagi ja näita bännerit pärast rakenduse ühendamist (mount). Paiguta see fikseeritud ülekattena, et hiline ilmumine ei põhjustaks paigutuse nihet; vt küpsisebännerid ja Core Web Vitals.

Mõlemal juhul käsitletakse valikut meeles pidavat küpsist või salvestusruumi kirjet üldjuhul selle valiku järgimiseks vajalikuna; vt mida loetakse rangelt vajalikuks küpsiseks.

Kuidas käsitleda nõusoleku tagasivõtmist seansi keskel?

Muuda tagasivõtmine kohe kehtivaks ja sama lihtsaks kui nõusoleku andmine, nagu nõuab isikuandmete kaitse üldmääruse (IKÜM, GDPR) artikli 7 lõige 3. Praktikas tähendab see püsivat linki „Küpsiste seaded“, tavaliselt jaluses, mis avab eelistused uuesti ilma lehte laadimata. Kui külastaja võtab kategooria nõusoleku tagasi:

1. Uuenda olekuhoidlat ja salvesta uus valik.
2. Kui kasutad Google’i märgendeid, saada gtag('consent', 'update', …), määrates asjakohaste signaalide väärtuseks 'denied'.
3. Lõpeta jälgimisfunktsioonide väljakutsumine; olekuhoidlaga piiratud kood teeb seda automaatselt.
4. Kustuta esimese osapoole küpsised, mille tagasivõetud kategooria seadis, kui tead nende nimesid ja domeene. Sinu skriptid ei saa kustutada teistel domeenidel seatud küpsiseid.
5. Laadi leht uuesti, kui mõni tagasivõetud skript juba töötab. Teegid hoiavad taimereid, kuulajaid ja mälus olevaid ID-sid ning uuesti laadimine on ainus usaldusväärne viis neid tühjendada.

Lehe uuesti laadimine pärast tagasivõtmist on õiglane kompromiss: seda juhtub harva ja alternatiiv oleks käivitada koodi, mille käivitamiseks sul enam luba ei ole.

Kokkuvõte

SPA-s on nõusolek olek: kasuta vaikimisi keeldumist, jaga üht olekuhoidlat, piira selle abil skripte ja manuseid, saada lehevaatamisi ainult nõusolekuga ja muuda tagasivõtmine kohe kehtivaks. Sellised tööriistad nagu Cookiesh saavad suure osa sellest torustikust enda peale võtta: Reacti SDK pakub komponenti CookieshProvider ja konksu useConsent() ning kõige muu jaoks on olemas sündmus consent:updated.

See artikkel on üldine teave, mitte õigusnõustamine. Oma konkreetse olukorra kohta otsuste tegemiseks pea nõu kvalifitseeritud privaatsusspetsialistiga.