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://api.cookiefence.com" crossorigin>
<script
  id="CookieFence"
  src="https://api.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://api.cookiefence.com/tags/YOUR_TAG_UUID.js"
        strategy="beforeInteractive"
      />
    </html>
  );
}

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.