Asenna ja integroi CookieFence

Tagin asennus, selainfunktiot, suostumustyökalut sekä tuettu CSS-mukautus.

Asennus

Lisää tagi jokaiselle julkiselle sivulle. Korvaa YOUR_TAG_UUID CookieFencessä näkyvällä arvolla. Lataa tagi ennen analytiikka-, mainos- ja tagienhallintaskriptejä sekä muita suostumusta mahdollisesti edellyttäviä skriptejä.

HTML

<link rel="preconnect" href="https://tag.cookiefence.com" crossorigin>
<script
  id="CookieFence"
  src="https://tag.cookiefence.com/tags/YOUR_TAG_UUID.js"
></script>

Sijoita preconnect-linkki ja skripti mahdollisimman ylös <head>-elementtiin.
Säilytä skriptin tunnisteena CookieFence.
Asenna tagi kerran ja käytä samaa Tag UUID:ta sivuston jokaisella sivulla.
Julkaise tagi ennen tuotantosivuston uutta skannausta.

Next.js App Router

Lisää skripti juuriasetteluun beforeInteractive-strategialla, jotta se alustuu ennen myöhempiä sovellusskriptejä.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="fi">
      <body>{children}</body>
      <Script
        id="CookieFence"
        src="https://tag.cookiefence.com/tags/YOUR_TAG_UUID.js"
        strategy="beforeInteractive"
      />
    </html>
  );
}

Valinnaisten skriptien hallinta

Korvaa valinnaisen skriptin alkuperäinen asennus alla olevalla merkinnällä. Poista tavallinen kopio, jotta skripti ei ohita suostumusta tai käynnisty kahdesti. Välttämättömät skriptit jätetään ennalleen.

HTML

<script type="text/plain" data-cf-category="analytics"
  data-cf-src="https://example.com/analytics.js"></script>
<script type="text/plain" data-cf-category="analytics">
  // Replace with your optional initialization code.
</script>

Säilytä type="text/plain" ja käytä ulkoisessa skriptissä data-cf-src-attribuuttia src-attribuutin sijaan. Valitse täsmälleen yksi ryhmä: functionality, analytics tai marketing. Oikein merkitty skripti pysyy toimimattomana, vaikka CookieFence ei lataudu.
Tuemme tavallista JavaScriptiä. Sallitut skriptit suoritetaan kerran järjestyksessä DOM-rakenteen valmistuttua. Aseta kirjasto ennen alustuskoodia ja käytä samaa ryhmää riippuvaisille skripteille. Async/defer-ajoitusta, moduuleja, import map -määrityksiä tai document.write-integraatioita ei tueta.
Nonce-, integrity-, crossorigin-, referrerpolicy-, id- ja toimittajan data-attribuutit säilytetään. Käytä nykyisiä CSP- ja SRI-suojauksia; älä heikennä niitä. Virheellinen ryhmä, ristiriitaiset lähteet tai latausvirhe eivät aiheuta automaattista uudelleenyritystä.
Jos vierailija peruu luvan jo käynnistettyjen skriptien ryhmältä, valinta tallennetaan ja sivu ladataan uudelleen. Banneri kertoo tästä etukäteen. Tallenna keskeneräinen työ ennen muutosta. Tunnettua tallennustietoa siivotaan, mutta tuntematon, HttpOnly-, kolmannen osapuolen tai IndexedDB-tieto voi jäädä jäljelle. Jo lähetettyjä pyyntöjä ei voi perua.
Erikseen merkityt Google-skriptit edellyttävät suostumusta myös Advanced Consent Mode -tilassa. Tavalliset Google-skriptit säilyttävät nykyisen toimintansa ja voivat latautua denied-oletusarvoilla. Merkintä ohittaa inventaarion luokituksen.
WordPress-lisäosa asentaa CookieFencen, mutta ei muokkaa muiden lisäosien skriptejä. Muokkaa niiden asetuksia tai pyydä kehittäjää korvaamaan skriptimerkinnät. Vanha CookieFence-tagi jättää nämä paikkamerkit toimimattomiksi, kunnes päivitetty tagi on julkaistu.
Testaa yksityisessä ikkunassa: ei skriptipyyntöjä ennen suostumusta tai hylkäyksen jälkeen, yksi suoritus hyväksynnän jälkeen ja ei uudelleenkäynnistystä suostumuksen perumisen ja sivun päivityksen jälkeen. Asennuksen tarkistus ei todista tätä toimintaa eikä merkitsemättömien skriptien estoa.

WordPress

Lisäosa lisää preconnect-linkin ja sivustotagin wp_head-toiminnon kautta. Tarvitset vain Tag UUID:n.

Lataa asennettava CookieFence-lisäosan ZIP-tiedosto.
Avaa WordPressissä Lisäosat → Lisää uusi → Lataa lisäosa.
Aktivoi CookieFence ja avaa Asetukset → CookieFence.
Liitä Tag UUID ja tallenna.

Lataa lisäosan ZIP

Voit korvata tagipalvelimen paikallisessa tai testausympäristössä asetuksella COOKIEFENCE_TAG_BASE_URL.

JavaScript-rajapinta

Rajapinta asetetaan tagin latautuessa kohteeseen window.CookieFence. Käytä optional chaining -syntaksia, jos sovelluskoodi voi suorittua ennen tagin latautumista.

JavaScript

// Avaa suostumusbanneri.
window.CookieFence?.openConsentBanner();

// Renderöi ilmoitus uudelleen, kun paikkamerkki lisätään dynaamisesti.
window.CookieFence?.renderCookieDeclaration();

openConsentBanner() avaa suostumuskäyttöliittymän. Funktio ei tee mitään, jos näkymä on jo avattu.

renderCookieDeclaration() renderöi tai päivittää evästeilmoituksen määritettyyn paikkamerkkiin. Kutsu sitä, kun paikkamerkki on lisätty dynaamisesti.

Yhdistä oma asetuspainike

JavaScript

document
  .querySelector("[data-cookie-settings]")
  ?.addEventListener("click", () => {
    window.CookieFence?.openConsentBanner();
  });

Pelkkää HTML:ää käyttävä linkki

Korvaa TAG_PREFIX Tag UUID:n ensimmäistä yhdysmerkkiä edeltävillä merkeillä. CookieFence käsittelee tämän URL-ankkurin napsautukset.

HTML

<a href="#CookieFenceConsent-TAG_PREFIX">
  Evästeasetukset
</a>

Evästeilmoitus

Lisää paikkamerkki tietosuoja- tai evästekäytäntösivulle. Asennettu tagi täyttää sen luokitellulla evästeinventaariolla ja suostumuksen muuttamiseen tarkoitetulla painikkeella.

HTML

<div id="CookieFenceDeclaration-TAG_PREFIX"></div>

Käytä samaa Tag UUID -etuliitettä kuin HTML-suostumuslinkissä. Jos asiakaspuolen reititin lisää elementin sivun alkulatauksen jälkeen, kutsu renderCookieDeclaration().

Mukautus

Suostumusbanneri

Määritä kohdassa Sivusto → Banneri bannerin sijoittelu, täysleveän asettelun enimmäisleveys, fonttipino, hyväksymis-, hylkäys- ja asetuspainikkeiden värit, tietosuojakäytännön linkki, kielikohtaiset URL-osoitteet sekä esikatselu. Banneri ei tällä hetkellä tue vapaamuotoista omaa CSS:ää.

Evästeilmoituksen CSS

Lisää CSS kohdassa Sivusto → Evästeilmoitus → Mukautettu CSS. Valitsimet rajataan automaattisesti sivuston ilmoituspaikkamerkkiin ja lisätään oletustyylien jälkeen.

Enimmäispituus on 12 000 merkkiä.
Tuetut at-säännöt: @media, @supports ja @container.
url() ja expression() hylätään.
Käytä paikallisia valitsimia äläkä sisällytä luotua paikkamerkin tunnistetta.

Tarkistus

Avaa yksityinen ikkuna ja varmista, että banneri näkyy ensimmäisellä käynnillä.
Varmista, että valinnaiset analytiikka- ja markkinointipyynnöt noudattavat määritettyä suostumustilaa.
Testaa hyväksyntä, hylkäys ja mukautetut valinnat sivun uudelleenlatauksen yli.
Avaa banneri uudelleen omalla asetuspainikkeellasi.
Varmista, että ilmoitus renderöityy ja mukautettu CSS tulee voimaan.
Tarkista selaimen konsolista CookieFence-integraatiovirheet.