Julkaistu Päivitetty

Cookiebot-opas

Vaiheittainen opas Cookiebotin käyttöönottoon sekä Google Consent Moden, Microsoft UET:n ja Clarityn suostumustilojen määrittämiseen ja testaamiseen.

Silmälasipäinen sarjakuvakilpikonna seisoo Cookiebot-logon ja evästesuojan näyttävän selainikkunan vieressä
Luotu OpenAI ImageGenillä

Pyydä tekoälyä tiivistämään:

ChatGPTPerplexityClaudeGoogle AI

Tässä oppaassa Cookiebot asennetaan suoraan verkkosivustolle. Ohje etenee skriptien lisäämisestä toiminnan tarkistamiseen selaimessa. Sivuston ylläpitäjä saa ohjeet toteutukseen, markkinoinnin ja analytiikan asiantuntija suostumustilojen tarkistamiseen ja kehittäjä kopioitavat koodit muokattaviksi.

Ennen aloittamista

Opas käsittelee suoraan sivustolle tehtävää toteutusta: suostumuksen oletustilat ja Cookiebot-tagi lisätään sivuston <head>-osioon. Tarvitset Cookiebotin verkkotunnusryhmän tunnuksen (Domain Group ID) sekä pääsyn sivuston lähdekoodiin tai sisällönhallintajärjestelmän toimintoon, jolla skriptejä voi lisätä <head>-osioon.

Älä käytä näitä skriptejä yhdessä Google Tag Managerin Cookiebot CMP -mallipohjan tai muun suostumuksen oletustiloja ja päivityksiä jo hallitsevan integraation kanssa. Tarkista tai poista nykyinen toteutus ennen jatkamista, sillä samaa suostumustilaa hallitsevat integraatiot voivat toimia ristiriitaisesti.

Opas käsittelee teknistä toteutusta eikä ratkaise sen lainmukaisuutta. Evästeluokkien, aluekohtaisten toimintatapojen, säilytysajan ja banneritekstien on vastattava sivuston käytäntöjä ja sovellettavia vaatimuksia.

Vaihe 1 – Valitse suostumuksen oletustilojen asettamistapa

Molemmat alla olevat skriptit asettavat Google Consent Mode v2:n oletustilat. Jos sivusto käyttää Microsoft Advertisingia tai Clarityä, samoilla skripteillä voi asettaa myös Microsoft UET:n ja Microsoft Clarity Consent API v2:n oletustilat. Microsoft Advertising edellyttää suostumussignaaleja ETA-alueella, Britanniassa ja Sveitsissä. UET olettaa arvon granted, jos oletustilaa ei ole asetettu, joten mukaan valitun UET-integraation oletustilaksi on asetettava denied.

Basic ja Advanced Consent Mode kuvaavat tagin latausajankohtaa, eivät sitä, kumman oletustilan asettavan skriptin kopioit. Basic-tilassa tagin lataaminen estetään, kunnes tarvittava suostumus on annettu. Advanced-tilassa tagi latautuu denied-oletustilassa ja lähettää rajattuja mittaustietoja ilman evästeitä. Tässä oppaassa Microsoft UET käyttää Basic-tilaa. Google-tagit voivat käyttää kumpaa tahansa tilaa lataussääntöjensä mukaan. Katso Googlen Basic- ja Advanced-tilojen vertailu ja Cookiebotin UET-ohje.

UET lukee vain ad_storage-arvon. Microsoft Clarity on erillinen tuote, jonka Consent API v2 lukee sekä ad_Storage-arvon (markkinointi) että analytics_Storage-arvon (tilastointi). Kun valitset palvelun mukaan, skriptit alustavat sen suostumusarvot ennen kyseisen Microsoft-tagin latautumista. Sekä UET että Clarity ovat edellyttäneet suostumussignaaleja ETA-alueen, Britannian ja Sveitsin kävijöiltä 31.10.2025 alkaen.

Valitse oletustilan asettava skripti

Palautetaanko palaavan kävijän tallennetut Cookiebot-valinnat ennen Cookiebotin latautumista?

Valitse Microsoftin suostumusten hallinta

Google Consent Mode sisältyy aina toteutukseen. Nämä valinnat koskevat kumpaakin oletustilan asettavaa skriptiä.

Vaihe 2 – Lisää Cookiebot verkkosivustolle

Sijoita luotu Cookiebot-tagi ensimmäiseksi skriptiksi <head>-osioon. Tämä on erityisen tärkeää automaattista estoa käytettäessä, sillä ennen Cookiebotia latautuvat skriptit voivat jäädä sen hallinnan ulkopuolelle.

  • Automaattinen esto käyttää data-blockingmode="auto"-attribuuttia. Älä käytä sen kanssa async- tai defer-attribuuttia.
  • Manuaalisessa estossa Cookiebot ladataan async-attribuutilla. Merkitse silloin jokaiseen ei-välttämättömään skriptiin, iframeen ja kuvaan oikea suostumusluokka. Katso Cookiebotin automaattisen eston ja manuaalisen eston ohjeet.

Jos WordPress-lisäosa lisää sivulle Google Tag Managerin, tarkista lopullinen sivun lähdekoodi lisäosan asetusten lisäksi. Tässä toteutuksessa Cookiebotin on suorituttava ennen Google Tag Manageria ja muita tageja, jotka voivat asettaa ei-välttämättömiä evästeitä.

Mukauta Cookiebot-skriptiä
Kopioi verkkotunnusryhmän tunnus (Domain Group ID) Cookiebot Managerista.
Edistynyt toteutus: poista automaattinen suostumusintegraatio käytöstä

Luotu tagi pitää Cookiebotin Google-, Microsoft UET- ja Microsoft Clarity -suostumusintegraatiot käytössä. Lisää käytöstä poistava attribuutti käsin vain, jos oma toteutuksesi hallitsee kyseisen palvelun kaikki suostumuspäivitykset: hyväksymisen ja kieltämisen, myöhemmät muutokset, suostumuksen peruuttamisen sekä palaavien kävijöiden suostumukset.

Omalla koodilla korvattava integraatio Cookiebot-tagiin lisättävä attribuutti
Google Consent Mode data-consentmode="disabled"
Microsoft UET Consent Mode data-ms-consent-mode="disabled"
Microsoft Clarity Consent Mode data-ms-clarity-consent-mode="disabled"

Poista käytöstä vain integraatio, jonka korvaat omalla toteutuksellasi. Jos palvelua ei käytetä lainkaan, jätä sen tagi ja siihen liittyvä koodi pois.

Valitse kiinteä kieli, jos sivuston kunkin kieliversion tulee näyttää banneri samalla kielellä. Valitse automaattinen kielentunnistus, jos Cookiebotin tulee käyttää kävijän selaimen kieltä.

Näytä kaikki data-culture-kielikoodit
Kieli data-culture-koodi
Arabia AR
Bulgaria BG
Katalaani CA
Tšekki CS
Kymri CY
Tanska DA
Saksa DE
Nykykreikka EL
Englanti EN
Espanja ES
Viro ET
Baski EU
Suomi FI
Ranska FR
Iiri GA
Heprea HE
Hindi HI
Kroatia HR
Unkari HU
Indonesia ID
Islanti IS
Italia IT
Japani JA
Korea KO
Liettua LT
Latvia LV
Makedonia MK
Malaiji MS
Norjan bokmål NB
Hollanti NL
Puola PL
Portugali PT
Brasilianportugali PT-BR
Romania RO
Venäjä RU
Sinhala SI
Slovakki SK
Sloveeni SL
Albania SQ
Serbia SR
Ruotsi SV
Tamili TA
Thai TH
Turkki TR
Ukraina UK
Vietnam VI
Kiina ZH
Perinteinen kiina ZH-HANT

Vaihe 3 – Lisää evästeluettelo evästesivulle

Evästeluettelo (Cookie Declaration) on valinnainen. Lisää se sivulle, jolla haluat luetella sivustolta löydetyt evästeet ja seurantatekniikat, esimerkiksi evästesivulle. Luettelo käyttää vaiheessa 2 annettua verkkotunnusryhmän tunnusta. Voit valita sen kielen erikseen.

Mukauta evästeluettelon skriptiä
Kenttä täytetään automaattisesti vaiheessa 2 antamallasi Cookiebot-tunnuksella.

Vaihe 4 – Lisää painike evästeasetusten muuttamiseen

Cookiebotin Privacy Trigger -painikkeella kävijä voi jo muuttaa tai peruuttaa suostumuksensa. Jos haluat tarjota toisen tavan avata asetukset, lisää painike alatunnisteeseen tai tietosuojasivulle. Painike toimii Cookiebot-skriptin latauduttua.


<button type="button" onclick="Cookiebot.renew()">
  Muokkaa evästeasetuksia
</button>

Vaihe 5 – Tarkista suostumustilat ja tagien toiminta

Tarkista Googlen suostumustilat ensisijaisesti Google Tag Assistantilla: varmista, että ensimmäinen Consent-tapahtuma sisältää oletustilan ja viimeisin Consent-tapahtuma päivityksen. Alla oleva konsolikoodi tarjoaa täydentävän tarkistuksen Googlen, UET:n ja Clarityn tiloista nykyisellä sivulla.

Tarkista ennen suostumuksen antamista seuraavat asiat:

  • Kaikkien Google-signaalien arvo on denied, paitsi security_storage-signaalin.
  • UET:n ad_storage-oletusarvo on denied, tai tagin lataaminen on estetty Basic-tilassa.
  • Clarityn molempien tallennustyyppien arvo on DENIED.

Suorita koodi uudelleen suostumuksen antamisen ja peruuttamisen jälkeen. Varmista, että suostumustilat päivittyvät molemmissa tapauksissa.

(() => {

  // Määritellään funktion sisällä, jotta koodin voi suorittaa toistuvasti.
  const consentStatusString = status =>
    status === undefined ? "" : status ? "granted" : "denied";

  const consentStatusColor = status =>
    status === "granted" ? "color: #4AF626" : "color: #ef2929";

  /* =========================================================
     GOOGLE CONSENT MODE
     ========================================================= */

  console.log(
    "%cGoogle Consent Mode",
    "font-weight: bold; font-size: 16px;"
  );

  if (
    !("google_tag_data" in window) ||
    !window.google_tag_data?.ics?.entries
  ) {
    console.log("Consent Mode -tietoja ei löytynyt");
  } else {
    const consentEntries = window.google_tag_data.ics.entries;

    // Käy läpi kaikki suostumussignaalit paitsi 'wait_for_update'.
    for (const entry in consentEntries) {
      if (entry === "wait_for_update") continue;

      const defaultStatus = consentStatusString(
        consentEntries[entry]["default"]
      );

      const updateStatus = consentStatusString(
        consentEntries[entry]["update"]
      );

      console.log(
        `%c${entry}`,
        "font-weight: bold; font-size: 14px;"
      );

      // Oletustila
      if (defaultStatus !== "") {
        console.log(
          `\tdefault: %c${defaultStatus}`,
          consentStatusColor(defaultStatus)
        );
      } else {
        console.log("\tdefault: ei löytynyt");
      }

      // Päivitetty tila
      if (updateStatus !== "") {
        console.log(
          `\tupdate: %c${updateStatus}`,
          consentStatusColor(updateStatus)
        );
      } else {
        console.log("\tupdate: ei löytynyt");
      }
    }

    // wait_for_update
    if ("wait_for_update" in consentEntries) {
      console.log(
        "%cwait_for_update",
        "font-weight: bold; font-size: 14px;"
      );

      const initialConfig = window.dataLayer?.find(
        item =>
          item?.[0] === "consent" &&
          item?.[1] === "default"
      );

      const waitForUpdate =
        initialConfig?.[2]?.wait_for_update ?? "ei löytynyt";

      console.log(
        `\tdefault: %c${waitForUpdate}`,
        "color: #FFA500"
      );
    }
  }


  /* =========================================================
     MICROSOFT UET
     ========================================================= */

  console.log(
    "%cMicrosoft UET",
    "font-weight: bold; font-size: 16px;"
  );

  console.log(
    window.uetq ?? "UET-tietoja ei löytynyt"
  );


  /* =========================================================
     MICROSOFT CLARITYN SUOSTUMUS
     ========================================================= */

  console.log(
    "%cMicrosoft Clarity",
    "font-weight: bold; font-size: 16px;"
  );

  if (typeof window.clarity === "function") {
    clarity(
      "metadata",
      (d, upgrade, consent) => {
        console.log("consentStatus:", consent);
      },
      false,
      true,
      true
    );
  } else {
    console.log("Clarity-tietoja ei löytynyt");
  }

})();

Lähde: https://karppinen.one/fi/toteutusmallit/cookiebot-opas/

Jutun erittely

SANAT
4 188
Kelpo määrä tekstiä.
OTSIKOT
8
Väljä rakenne.
LUKUAIKA
21 min
Selviät kyllä.
LINKIT
5
Polkuja jonnekin.
KOODILOHKOT
6
Hieman teknistä.
KUVAT
0
Sekin on rohkea valinta.

Haluatko lisää Karppinen.one-sisältöä?

Lisää Karppinen.one Googlen ensisijaiseksi lähteeksi, niin näet enemmän artikkeleitani hakutuloksissa.

Lisää Karppinen.one ensisijaiseksi lähteeksi Googlessa
Näytä kaikki kirjoitukset
Violettiin kaapuun pukeutunut sarjakuvahiiri osoittaa artikkelin asettelua. Puhekuplissa näkyvät lukuajan edistymispalkki, valmistumispalkki ja valintamerkki.
9 min

Luetaanko artikkeleitasi? Käytännön opas sisällön kulutuksen mittaamiseen

Sivun katselut, sitoutumisaste ja vierityssyvyys kertovat vain osan. Opas rakentaa artikkeleille käytännöllisen mittausmallin, joka yhdistää etenemisen, lukuajan ja selkeästi määritellyn arvioidun lukukerran.

Analytiikka
Silmälasipäinen sarjakuvakilpikonna tutkii HubSpot-lomaketta suurennuslasilla. Onnistunut lähetys kulkee pilvessä toimivan hakupalvelun kautta Google Tag Manager -ikkunaan.
47 min

HubSpot-lomakkeiden seuranta GTM:llä oikealla lomakkeen nimellä

Google Tag Manager -malli, joka lähettää onnistuneet HubSpot-lomakkeiden lähetykset dataLayeriin HubSpotin todellisella lomakkeen nimellä. Nimi haetaan Cloudflare Workerin tai PHP-päätepisteen kautta.