Siirry sisältöön

Kieli

Dokumentaation valikko

Pikaopas

Asenna Cookiesh minuuteissa tavallisella HTML:llä, Next.js:llä tai Google Tag Managerilla ja varmista, että kolmansien osapuolten skriptit pysyvät estettyinä, kunnes kävijät suostuvat.

Päivitetty viimeksi 29. lokakuuta 2026

Cookiesh toimii yhdellä script-tagilla. Lataa se ennen muita sivun tageja, merkitse suostumusta tarvitsevat skriptit kategorialla, ja Cookiesh näyttää kullekin kävijälle oikean bannerin kävijän alueen mukaan, estää nämä skriptit, kunnes kävijä suostuu, ja tallentaa valinnan. Useimmat sivustot ovat käytössä alle viidessä minuutissa.

Ennen aloittamista

Tarvitset Cookiesh-tilin ja sivuston. Avaa hallintapaneelissa Domains → Add domain, kirjoita verkkotunnuksesi ja kopioi Site ID. Se näyttää tältä: ck_live_8f2a91.

Cookiesh jakaa kaiken neljään suostumuskategoriaan:

Kategoria Oletus Tyypillinen käyttö
necessary Aina päällä Istunnot, tietoturva, kuormantasaus, itse suostumuseväste
preferences Pois päältä Kieli, teema ja muut muistetut asetukset
analytics Pois päältä Tuote- ja liikenneanalytiikka
marketing Pois päältä Mainonta, uudelleenkohdennus ja sosiaalisen median pikselit

Tee ensimmäinen evästeskannaus hallintapaneelista ennen julkaisua. Silloin Cookiesh tietää, mitkä skriptit ja evästeet kuuluvat mihinkin kategoriaan, ja voi esitäyttää bannerisi.

Asennus HTML:llä

Lisää latausskripti <head>-osan ensimmäiseksi skriptiksi, jotta se suoritetaan ennen kaikkea, mikä asettaa evästeitä:

<head>
  <script
    src="https://sdk.cookiesh.eu/v1/cookiesh.js"
    data-site-id="ck_live_8f2a91"
    async
  ></script>
  <!-- muut tagit alla -->
</head>

Vaihda sitten jokaisen suostumusta tarvitsevan skriptin type="text/javascript" arvoon type="text/plain" ja lisää data-cookiesh-kategoria. Cookiesh palauttaa tyypin ja suorittaa skriptin, kun kävijä sallii kyseisen kategorian:

<script
  type="text/plain"
  data-cookiesh="analytics"
  src="https://analytics.example.com/script.js"
></script>

<script type="text/plain" data-cookiesh="marketing">
  // Sisäiset skriptit toimivat samalla tavalla.
  initAdPixel();
</script>

Myös iframet, kuten upotetut videot ja kartat, voi estää. Käytä src-attribuutin sijaan data-cookiesh-src-attribuuttia, niin Cookiesh lataa ne suostumuksen jälkeen.

Asennus Next.js:llä

Asenna React SDK:

npm install @cookiesh/react

Lataa skripti juurilayoutissa beforeInteractive-strategialla, jotta se suoritetaan ennen muita skriptejä, ja kääri sovellus CookieshProvider-komponentin sisään:

// app/layout.tsx
import Script from 'next/script';
import { CookieshProvider } from '@cookiesh/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://sdk.cookiesh.eu/v1/cookiesh.js"
          data-site-id={process.env.NEXT_PUBLIC_COOKIESH_SITE_ID}
          strategy="beforeInteractive"
        />
        <CookieshProvider>{children}</CookieshProvider>
      </body>
    </html>
  );
}

Renderöi suostumuksesta riippuvainen koodi vain, kun kategoria on sallittu. useConsent() renderöi uudelleen aina, kun kävijä muuttaa valintaansa:

// app/analytics.tsx
'use client';

import Script from 'next/script';
import { useConsent } from '@cookiesh/react';

export function Analytics() {
  const { analytics } = useConsent();
  if (!analytics) return null;

  return <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />;
}

Kirjautumista edellyttävissä tuotteissa välitä userId CookieshProvider-komponentille, jotta kävijän valinta synkronoituu laitteiden välillä.

Asennus Google Tag Managerilla

Cookieshin Community Template asettaa Google Consent Mode v2 -oletukset ennen kuin yksikään tagi käynnistyy ja päivittää ne, kun kävijä tekee valinnan.

  1. Avaa GTM-konttisi kohdasta Templates → Tag templates → Search gallery ja lisää Cookiesh CMP.
  2. Luo mallista uusi tagi ja liitä Site ID.
  3. Aseta laukaisimeksi Consent Initialization – All Pages.
  4. Valitse oletussuostumustila kullekin alueelle. Käytä arvoa denied ETA-alueelle, Isolle-Britannialle ja Sveitsille.
  5. Avaa jokaisen Google-tagin kohdalla Advanced settings → Consent settings. Jätä sisäänrakennetut suostumustarkistukset päälle ja vaadi lisäsuostumus muille kuin Googlen tageille.
  6. Julkaise kontti.

Jos lataat gtag.js:n ilman GTM:ää, aseta oletukset itse ennen Google-tagia:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500,
  });
</script>

Cookiesh lähettää vastaavan gtag('consent', 'update', …)-kutsun heti, kun kävijä tekee valinnan, sekä jokaisella myöhemmällä sivunkatselulla.

Asennuksen tarkistaminen

  1. Avaa sivustosi yksityisessä ikkunassa. Bannerin pitäisi tulla näkyviin, eikä selaimen kehittäjätyökaluissa pitäisi vielä näkyä analytiikka- tai markkinointievästeitä.
  2. Suorita konsolissa Cookiesh.debug(). Se listaa havaitun alueen, aktiivisen bannerin, jokaisen estetyn skriptin ja nykyisen suostumustilan.
  3. Hyväksy vain analytiikka ja lataa sivu uudelleen. Analytiikkaskriptit suoritetaan, mutta markkinointiskriptit pysyvät estettyinä.
  4. Tarkista Google Tag Assistantissa, että Consent-välilehdellä oletus- ja päivitystapahtumat näkyvät oikeassa järjestyksessä.

Seuraavat vaiheet