Yksittäisten widgetien poistaminen käytöstä

gateScript on tarkoitettu script-tagin lataamiseen. Joskus haluat kuitenkin estää osan omasta käyttöliittymästäsi – upotuksen, chat-kuplan, ”hallitse evästeitä” -linkin – koskematta yhteenkään skriptiin. Siihen riittää pelkkä getConsent()- ja onConsentChange()-pari.

Suostumukseen reagoiminen

Lue nykyinen arvo latauksen yhteydessä ja tilaa sitten tulevat muutokset – kävijä voi muuttaa mieltään myöhemmin uudelleenavauspainikkeella, joten tarvitset molemmat:

<div id="widget">Waiting for consent…</div>

<script>
  import { getConsent, onConsentChange } from 'astro-cookie-consent';

  const widget = document.getElementById('widget');

  function render(value: 'accept' | 'decline' | null) {
    if (!widget) return;
    widget.textContent = value === 'accept' ? 'Widget enabled' : 'Widget disabled';
  }

  render(getConsent('analytics'));
  onConsentChange(() => render(getConsent('analytics')));
</script>

Juuri tämä malli on etusivun analytiikkawidgetin takana – vaihda banneria siellä ja katso, miten se reagoi reaaliajassa.

Paikkamerkki ”Ota käyttöön” -painikkeella

Upotetun kolmannen osapuolen sisällön (kartan, videon, chat-widgetin) kohdalla pelkkä ”pois käytöstä” -tila on umpikuja – anna kävijälle tapa ottaa juuri tämä yksi asia käyttöön siellä, missä se on, sen sijaan että lähettäisit hänet takaisin bannerin luo:

<div id="map">
  <div class="placeholder">
    <p>This map needs the <strong>marketing</strong> category.</p>
    <button id="enable-map">Enable map</button>
  </div>
  <iframe data-src="https://maps.example.com/embed" hidden></iframe>
</div>

<script>
  import { getConsent, getConsentRecord, setConsent, onConsentChange } from 'astro-cookie-consent';

  const placeholder = document.querySelector('#map .placeholder');
  const iframe = document.querySelector('#map iframe');
  const button = document.getElementById('enable-map');

  function render(value: 'accept' | 'decline' | null) {
    const accepted = value === 'accept';
    placeholder.hidden = accepted;
    iframe.hidden = !accepted;
    if (accepted && !iframe.src) iframe.src = iframe.dataset.src; // load once, lazily
  }

  render(getConsent('marketing'));
  onConsentChange(() => render(getConsent('marketing')));

  button.addEventListener('click', () => {
    // Merge with the existing record — setConsent replaces the whole
    // categories map, so pass the others through untouched instead of
    // only the one this button knows about.
    const current = getConsentRecord()?.categories ?? {};
    setConsent({ ...current, marketing: true });
  });
</script>

Kaksi tärkeää yksityiskohtaa:

• Yhdistä, älä korvaa. setConsent() korvaa koko tallennetun kategoriakartan – sen kutsuminen pelkällä { marketing: true } -arvolla palauttaisi huomaamatta kaikki muut kategoriat (esim. analytics), jotka kävijä oli jo hyväksynyt. Lue ensin nykyinen tietue ja levitä se mukaan.
• Viivästetty src. Iframen oikea URL on data-src-attribuutissa, kunnes suostumus on annettu, joten upotuksen omat evästeet eivät koskaan lataudu ennen kuin kävijä on hyväksynyt ne – vasta iframe.src-arvon asettaminen lähettää pyynnön.

Katso jokaisen funktion täydellinen allekirjoitus JS-rajapinnan viitteestä ja itse kategorioiden käyttöönotto sivulta Kategoriakohtainen suostumus.