Seuranta- ja tapahtumaohjeistus

Kaikki mitä tarvitset ClearAnalyticsin asentamiseen sivustollesi sekä sivunäyttöjen, mukautettujen tapahtumien, klikkaustavoitteiden ja verkkokauppatransaktioiden seuraamiseen.

Yleiskatsaus

ClearAnalytics tarjoaa kaksi seurantaskriptivaihtoehtoa. Valitse tarpeisiisi sopiva: minimalistinen skripti perus sivunäyttöanalytiikkaan tai täysiominaisuuksinen skripti mukautetuille tapahtumille, klikkaustavoitteille ja verkkokauppaseurannalle.

Kevyt skripti (ca.js)

Kevyin mahdollinen seurantaskripti. Täydellinen blogeille, laskeutumissivuille ja sivustoille, jotka tarvitsevat vain sivunäyttöanalytiikkaa.

ca.js < 1 KB

Automaattinen sivunäyttöjen seuranta
Istunnon kesto ja välitön poistumisprosentti
UTM-kampanjaparametrien tallennus
Yksisivuisten sovellusten tuki

Täysi skripti (ca-events.js)

Kaikki kevyen skriptin ominaisuudet sekä mukautetut tapahtumat, klikkaustavoitteiden seuranta, GA4 dataLayer -sieppaus ja täysi verkkokauppatuki.

ca-events.js < 2 KB

Kaikki kevyen skriptin ominaisuudet
Mukautettu tapahtumien seuranta window.ca()-funktiolla
Klikkaustavoitteiden seuranta data-ca-goal-attribuutilla
GA4 dataLayer -integraatio
Täysi verkkokaupan tapahtumien seuranta

Asennus

Lisää yksi skriptitunniste verkkosivustollesi. Ei npm-paketteja, ei rakennustyökaluja, ei konfiguraatiotiedostoja. Skripti latautuu asynkronisesti eikä vaikuta sivun suorituskykyyn.

HTML — Kevyt skripti

Lisää tämä <head>-osioon tai <body>-osion loppuun jokaisella sivulla. Seuraa sivunäyttöjä, istunnon kestoa ja UTM-parametreja automaattisesti.

<script defer src="https://clearanalytics.eu/js/ca.js"></script>

HTML — Täysi skripti

Käytä tätä vaihtoehtoa, jos tarvitset mukautettuja tapahtumia, klikkaustavoitteita tai verkkokauppaseurantaa.

<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>

HTML — Täysi skripti DataLayerilla

Lisää data-ca-datalayer-attribuutti sieppataksesi automaattisesti GA4 dataLayer -tapahtumat, mukaan lukien kaikki verkkokauppatapahtumat.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

WordPress

Lisää skriptitunniste teemasi functions.php-tiedoston kautta tai käytä header/footer-lisäosaa.

// functions.php
add_action('wp_head', function () {
    echo '<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>';
});

React / Next.js

Käytä Next.js Script -komponenttia optimaaliseen lataukseen. Skripti toimii minkä tahansa React-kehyksen kanssa.

// app/layout.tsx  (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://clearanalytics.eu/js/ca-events.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue / Nuxt

Lisää skripti Nuxt-konfiguraation kautta tai suoraan HTML-mallipohjaan tavallisille Vue-sovelluksille.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://clearanalytics.eu/js/ca-events.js',
          defer: true,
        },
      ],
    },
  },
});

Google Tag Manager

Voit myös ottaa skriptin käyttöön Google Tag Managerin kautta käyttäen Custom HTML -tunnistetta.

Tag Type:   Custom HTML
Trigger:    All Pages

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Kun käytät GTM:ää data-ca-datalayer-attribuutin kanssa, ClearAnalytics sieppaa automaattisesti kaikki olemassa olevien GTM-tunnisteiden lähettämät dataLayer-tapahtumat.

Mukautetut tapahtumat

Seuraa mitä tahansa käyttäjän vuorovaikutusta lähettämällä mukautettuja tapahtumia valinnaisilla metatiedoilla. Mukautetut tapahtumat näkyvät kojelaudallasi ja niitä voidaan käyttää tavoitetriggereina.

Vaatii täyden skriptin (ca-events.js).

API-allekirjoitus

window.ca(eventName, properties?);

Parametri	Tyyppi	Kuvaus
`eventName`	string	Kuvaileva nimi tapahtumalle (esim. 'signup', 'file_download').
`properties`	object	Valinnainen objekti lisämetatiedoilla. Serialisoidaan JSON-muotoon.

Esimerkit

// Seuraa rekisteröitymistä suunnitelmatiedoilla

window.ca('signup', { plan: 'pro' });

// Seuraa tiedoston latausta

window.ca('file_download', {
  file_name: 'whitepaper.pdf',
  file_type: 'pdf',
});

// Seuraa videon toistoa

window.ca('video_play', {
  video_title: 'Product Demo',
  duration: 120,
});

// Seuraa sisäistä hakua

window.ca('search', { query: 'privacy analytics' });

Klikkaustavoitteiden seuranta

Seuraa painikkeiden ja linkkien klikkauksia kirjoittamatta JavaScript-koodia. Lisää data-ca-goal-attribuutti mihin tahansa HTML-elementtiin, ja klikkaus tallennetaan automaattisesti.

Vaatii täyden skriptin (ca-events.js).

Käyttö

Lisää data-ca-goal="tavoitteen-nimi" mihin tahansa klikattavaan elementtiin. Attribuutin arvo tulee tavoitetunnisteeksi kojelaudallasi.

<button data-ca-goal="cta-signup">Sign Up</button>

<a href="/pricing" data-ca-goal="pricing-click">View Pricing</a>

<form data-ca-goal="contact-form-submit">
  <!-- The goal fires when any element inside is clicked -->
  <button type="submit">Send</button>
</form>

Miten se toimii

Skripti käyttää tapahtumadelegointia dokumentissa havaitakseen klikkaukset tehokkaasti:

Klikkaustapahtuma laukeaa missä tahansa sivulla.
Skripti kulkee DOM-puuta ylöspäin klikatusta elementistä etsien data-ca-goal-attribuuttia.
Jos löytyy, se lähettää klikkaustapahtuman tavoitenimellä tunnisteena.

Klikkaustavoitteiden tarkastelu

Klikkaustavoitetapahtumat näkyvät kojelaudan Tavoitteet-sivulla. Luo tavoite tyypillä "Klikkaus" ja yhdistä se HTML:ssä käyttämääsi data-ca-goal-arvoon.

GA4 DataLayer -integraatio

Jos sivustosi lähettää jo tapahtumia Google Analytics dataLayeriin, ClearAnalytics voi siepata nämä tapahtumat automaattisesti. Tämä on helpoin tapa siirtyä GA4:stä.

Vaatii täyden skriptin (ca-events.js).

DataLayer-sieppauksen aktivointi

Lisää data-ca-datalayer-attribuutti skriptitunnisteeseen. Tämä opt-in-lähestymistapa varmistaa, että ominaisuus aktivoituu vain, kun otat sen nimenomaisesti käyttöön.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Miten se toimii

Kun ominaisuus on käytössä, skripti sieppaa kaikki dataLayer.push()-kutsut:

Tunnistetut verkkokauppatapahtumat (purchase, add_to_cart jne.) välitetään verkkokauppatapahtumina.
Kaikki muut mukautetut tapahtumat välitetään yleisinä mukautettuina tapahtumina.
GTM:n sisäiset tapahtumat (gtm.js, gtm.dom, gtm.load jne.) suodatetaan automaattisesti pois.
Olemassa olevat dataLayer-merkinnät käsitellään sivun latautuessa; tulevat push-kutsut siepataan reaaliajassa.

Esimerkki

// These dataLayer pushes are automatically captured
dataLayer.push({
  event: 'form_submit',
  form_id: 'contact',
  form_name: 'Contact Form',
});

dataLayer.push({
  event: 'video_start',
  video_title: 'Product Demo',
  video_duration: 120,
});

Ohitetut tapahtumat

Seuraavat GTM:n sisäiset tapahtumat ohitetaan automaattisesti eivätkä näy kojelaudallasi:

// These GTM internal events are automatically filtered out:
gtm.js, gtm.dom, gtm.load, gtm.click, gtm.linkClick, gtm.scrollDepth

Verkkokauppaseuranta

Seuraa koko asiakaspolkua tuotteiden selaamisesta ostoon ja palautukseen. ClearAnalytics tukee kaikkia 14 vakioverkkokauppatapahtumaa käyttäen samaa dataLayer-muotoa kuin GA4.

Vaatii täyden skriptin (ca-events.js) data-ca-datalayer-attribuutilla.

Kaikki verkkokauppatapahtumat käyttävät GA4-yhteensopivaa dataLayer.push()-muotoa. Jos sinulla on jo GA4-verkkokauppaseuranta käytössä, ClearAnalytics sieppaa nämä tapahtumat automaattisesti ilman koodimuutoksia.

Tapahtuma	Kuvaus
`view_item_list`	Käyttäjä näkee tuotelistan tai hakutulokset.
`select_item`	Käyttäjä klikkaa tuotetta listassa.
`view_item`	Käyttäjä näkee tuotetietosivun.
`add_to_cart`	Käyttäjä lisää tuotteen ostoskoriin.
`remove_from_cart`	Käyttäjä poistaa tuotteen ostoskorista.
`view_cart`	Käyttäjä näkee ostoskorin.
`add_to_wishlist`	Käyttäjä lisää tuotteen toivelistalleen.
`begin_checkout`	Käyttäjä aloittaa kassaprosessin.
`add_shipping_info`	Käyttäjä lähettää toimitustietonsa.
`add_payment_info`	Käyttäjä lähettää maksutietonsa.
`purchase`	Käyttäjä suorittaa ostoksen.
`refund`	Täysi tai osittainen palautus käsitellään.
`view_promotion`	Käyttäjä näkee kampanjabannerin tai tarjouksen.
`select_promotion`	Käyttäjä klikkaa kampanjaa.

view_item_list

Laukaise tämä tapahtuma, kun käyttäjät näkevät tuotelistan, kuten kategoriasivun tai hakutulokset.

dataLayer.push({ ecommerce: null }); // Clear previous data
dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 89.99,
        index: 0,
      },
      {
        item_id: 'SKU-002',
        item_name: 'Trail Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 119.99,
        index: 1,
      },
    ],
  },
});

select_item

Laukaise tämä tapahtuma, kun käyttäjä klikkaa tiettyä tuotetta listasta nähdäkseen sen.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_item',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      index: 0,
    }],
  },
});

view_item

Laukaise tämä tapahtuma, kun käyttäjä saapuu tuotetietosivulle.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      item_category: 'Footwear',
      item_variant: 'Blue / Size 42',
      price: 89.99,
      quantity: 1,
    }],
  },
});

add_to_cart

Laukaise tämä tapahtuma, kun käyttäjä lisää yhden tai useamman tuotteen ostoskoriinsa.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      quantity: 1,
    }],
  },
});

remove_from_cart

Laukaise tämä tapahtuma, kun käyttäjä poistaa tuotteen ostoskoristaan.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      quantity: 1,
    }],
  },
});

view_cart

Laukaise tämä tapahtuma, kun käyttäjä tarkastelee ostoskorisivuaan.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_cart',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_to_wishlist

Laukaise tämä tapahtuma, kun käyttäjä tallentaa tuotteen toivelistalleen myöhempää varten.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_wishlist',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

begin_checkout

Laukaise tämä tapahtuma, kun käyttäjä aloittaa kassaprosessin.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    coupon: 'SUMMER20',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_shipping_info

Laukaise tämä tapahtuma, kun käyttäjä valitsee tai lähettää toimitustietonsa kassan aikana.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_shipping_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    shipping_tier: 'Express',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_payment_info

Laukaise tämä tapahtuma, kun käyttäjä valitsee tai lähettää maksutapansa kassan aikana.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_payment_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    payment_type: 'Credit Card',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

purchase

Laukaise tämä tapahtuma, kun osto vahvistetaan. Sisällytä transaction_id, value, currency, tax, shipping ja täysi items-taulukko.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    affiliation: 'Online Store',
    value: 209.98,
    tax: 36.49,
    shipping: 5.99,
    currency: 'EUR',
    coupon: 'SUMMER20',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        item_variant: 'Blue / Size 42',
        price: 89.99,
        quantity: 1,
        coupon: '',
      },
      {
        item_id: 'SKU-003',
        item_name: 'Sports Watch',
        item_brand: 'FitTech',
        item_category: 'Electronics',
        item_variant: 'Black',
        price: 119.99,
        quantity: 1,
        coupon: '',
      },
    ],
  },
});

refund

Laukaise tämä tapahtuma, kun palautus käsitellään. Täyteen palautukseen tarvitaan vain transaction_id. Osittaisiin palautuksiin sisällytä tietyt tuotteet.

// Full refund
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
  },
});

// Partial refund (specific items)
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    items: [{
      item_id: 'SKU-001',
      quantity: 1,
    }],
  },
});

view_promotion

Laukaise tämä tapahtuma, kun kampanjabanneri, karuselli tai tarjous tulee käyttäjälle näkyviin.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      discount: 15.00,
    }],
  },
});

select_promotion

Laukaise tämä tapahtuma, kun käyttäjä klikkaa kampanjaa saadakseen lisätietoja tai hyödyntääkseen tarjouksen.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

Siirtyminen Google Analyticsista

ClearAnalytics on suunniteltu toimimaan Google Analyticsin rinnalla tai sen korvaajana. Voit käyttää molempia työkaluja rinnakkain siirtymän aikana ilman ristiriitoja.

Molempien skriptien käyttö rinnakkain

Lisää ClearAnalytics-skripti nykyisen Google Analytics -tunnisteen rinnalle. Molemmat skriptit seuraavat itsenäisesti häiritsemättä toisiaan.

<!-- Google Analytics (existing) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<!-- ClearAnalytics (add this line) -->
<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Ominaisuuksien yhteensopivuus

Näin ClearAnalytics-ominaisuudet vastaavat Google Analytics -vastineitaan:

Ominaisuus	Google Analytics	ClearAnalytics
Sivunäytöt	`gtag('event', 'page_view')`	Automaattinen
Mukautetut tapahtumat	`gtag('event', ...)`	`window.ca('event')`
Verkkokauppa	`dataLayer.push()`	dataLayer-yhteensopiva
UTM-kampanjat	Automaattinen	Automaattinen
Istunnot	Evästepohjaiset	Evästeettömät

Siirtymävaiheet

Lisää ClearAnalytics-skripti sivustollesi Google Analyticsin rinnalle.
Ota dataLayer-sieppaus käyttöön data-ca-datalayer-attribuutilla olemassa olevien verkkokauppatapahtumien tallentamiseksi.
Vertaa tietoja molemmissa kojelaudoissa 2-4 viikon ajan tarkkuuden varmistamiseksi.
Kun olet tyytyväinen, poista Google Analytics -skripti ja nauti nopeammasta, yksityisyys edellä -kokemuksesta.

SPA-tuki

ClearAnalytics tunnistaa automaattisesti asiakaspuolen navigoinnin yksisivuisissa sovelluksissa. Lisäkonfiguraatiota tai reititinintegraatiota ei tarvita.

Miten se toimii

Skripti sieppaa selaimen History API -kutsut havaitakseen sivunavigaation:

history.pushState() -kutsut siepataan ja laukaisevat uuden sivunäytön.
history.replaceState() -kutsut siepataan ja laukaisevat uuden sivunäytön.
popstate -tapahtumat (selaimen takaisin/eteenpäin) laukaisevat uuden sivunäytön.

Yhteensopivat kehykset

Toimii suoraan minkä tahansa kehyksen kanssa, joka käyttää History API:a reititykseen:

React Next.js Vue.js Nuxt Svelte SvelteKit Angular Remix Astro Inertia.js

Reititinlaajennuksia, elinkaarikoukkuja tai manuaalisia seurantakutsuja ei tarvita. Lisää skriptitunniste kerran, ja jokainen sivunavigointi seurataan automaattisesti.

Yksityisyys ja vaatimustenmukaisuus

ClearAnalytics on rakennettu yksityisyys ytimessään. Seurantaskripti kerää vain anonyymejä, aggregoituja tietoja. Henkilötietoja ei koskaan tallenneta tai lähetetä.

Ei evästeitä

Skripti ei aseta, lue eikä ole riippuvainen mistään selaimen evästeistä. Evästeiden suostumusbanneria ei tarvita.

Ei sormenjälkiä

Emme koskaan luo selaimen sormenjälkiä. Canvas-, WebGL-, fontti- tai äänisormenjälkitekniikoita ei käytetä.

Ei IP-osoitteiden tallennusta

Kävijöiden IP-osoitteita käytetään vain anonymisoituun tiivistykseen pyynnön aikana. Niitä ei koskaan tallenneta tietokantaan.

GDPR-yhteensopiva

Koska henkilötietoja ei kerätä, ClearAnalytics jää GDPR:n suostumusvaatimusten ulkopuolelle. Kaikki tiedot pysyvät EU:ssa.

Miten anonymisoimme kävijät

Yksilöllisten kävijöiden laskemiseksi ilman henkilötietojen tallentamista käytämme päivittäin vaihtuvaa anonyymia tiivistettä:

Kävijän IP-osoite ja User-Agent yhdistetään päivittäin vaihtuvan suolan kanssa.
Tämä yhdistelmä tiivistetään yksisuuntaisella SHA-256-algoritmilla.
Suola vaihtuu 24 tunnin välein, mikä tekee kävijöiden seuraamisen päivien yli mahdottomaksi.
Alkuperäistä IP-osoitetta ei koskaan tallenneta tai kirjata lokiin.

Skriptin keräämät tiedot

Seuraavat ei-henkilökohtaiset tietokentät lähetetään jokaisen sivunäyttötapahtuman yhteydessä:

Kenttä	Tarkoitus
`pathname`	Vierailtu sivun URL-polku.
`referrer`	Viittaavan sivun URL, jos sellainen on.
`language`	Selaimen kieliasetus.
`screen_width / screen_height`	Näytön mitat laitetyypin luokittelua varten.
`utm_*`	Kampanjoiden seurantaparametrit URL:stä.
`duration`	Sivulla vietetty aika sekunteina.

Koska ClearAnalytics ei koskaan kerää henkilötietoja, et tarvitse evästeiden suostumusbanneria, yksityisyysponnahdusikkunaa tai opt-in-mekanismia käyttääksesi seurantaskriptiämme. Se on GDPR-, ePrivacy-, PECR- ja CCPA-yhteensopiva suoraan käyttövalmiina.