Jälgimise ja sündmuste dokumentatsioon

Kõik, mida vajate ClearAnalyticsi paigaldamiseks oma veebisaidile ning lehekülastuste, kohandatud sündmuste, klikieesmärkide ja e-kaubanduse tehingute jälgimiseks.

Ülevaade

ClearAnalytics pakub kahte jälgimisskripti varianti. Valige oma vajadustele sobiv: minimaalne skript põhiliseks lehekülastuste analüütikaks või täisfunktsionaalne skript kohandatud sündmuste, klikieesmärkide ja e-kaubanduse jälgimiseks.

Kerge skript (ca.js)

Kõige kergem võimalik jälgimisskript. Ideaalne blogidele, sihtlehtedele ja saitidele, mis vajavad ainult lehekülastuste analüütikat.

ca.js < 1 KB

Automaatne lehekülastuste jälgimine
Seansi kestus ja põrkemäär
UTM kampaaniaparameetrite hõivamine
Ühelehiste rakenduste tugi

Täisskript (ca-events.js)

Kõik, mis kerges skriptis, pluss kohandatud sündmused, klikieesmärkide jälgimine, GA4 dataLayer pealtkuulamine ja täielik e-kaubanduse tugi.

ca-events.js < 2 KB

Kõik, mis kerges skriptis
Kohandatud sündmuste jälgimine läbi window.ca()
Klikieesmärkide jälgimine läbi data-ca-goal
GA4 dataLayer integratsioon
Täielik e-kaubanduse sündmuste jälgimine

Paigaldamine

Lisage oma veebisaidile üks script-silt. Ilma npm-pakettideta, ilma ehitustööriistadeta, ilma konfiguratsioonifailideta. Skript laadib asünkroonselt ja ei mõjuta lehe jõudlust.

HTML — Kerge skript

Lisage see <head> või <body> lõppu igale lehele. Jälgib automaatselt lehekülastusi, seansi kestust ja UTM parameetreid.

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

HTML — Täisskript

Kasutage seda varianti, kui vajate kohandatud sündmusi, klikieesmärke või e-kaubanduse jälgimist.

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

HTML — Täisskript koos DataLayeriga

Lisage atribuut data-ca-datalayer, et automaatselt pealt kuulata GA4 dataLayer sündmusi, sealhulgas kõiki e-kaubanduse sündmusi.

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

WordPress

Lisage script-silt oma teema functions.php faili kaudu või kasutage päise/jaluse sisestamise pistikprogrammi.

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

React / Next.js

Kasutage optimaalseks laadimiseks Next.js Script komponenti. Skript töötab iga React raamistikuga.

// 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

Lisage skript Nuxt konfiguratsiooni kaudu või otse HTML mallile tavaliste Vue rakenduste jaoks.

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

Google Tag Manager

Skripti saab juurutada ka Google Tag Manageri kaudu, kasutades kohandatud HTML silti.

Tag Type:   Custom HTML
Trigger:    All Pages

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

GTM kasutamisel koos atribuudiga data-ca-datalayer hõivab ClearAnalytics automaatselt kõik dataLayer sündmused, mida teie olemasolevad GTM sildid edastavad.

Kohandatud sündmused

Jälgige mis tahes kasutaja tegevust, saates kohandatud sündmusi valikuliste metaandmetega. Kohandatud sündmused kuvatakse teie töölaual ja neid saab kasutada eesmärkide käivitajatena.

Nõuab täisskripti (ca-events.js).

API signatuur

window.ca(eventName, properties?);

Parameeter	Tüüp	Kirjeldus
`eventName`	string	Sündmuse kirjeldav nimi (nt 'signup', 'file_download').
`properties`	object	Valikuline objekt täiendavate metaandmetega. Serialiseeritakse JSON-ina.

Näited

// Registreerimise jälgimine koos paketi teabega

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

// Faili allalaadimise jälgimine

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

// Video esitamise jälgimine

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

// Sisemise otsingu jälgimine

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

Klikieesmärkide jälgimine

Jälgige nuppude ja linkide klikke ilma JavaScripti kirjutamata. Lisage atribuut data-ca-goal mis tahes HTML elemendile ja klikk salvestatakse automaatselt.

Nõuab täisskripti (ca-events.js).

Kasutamine

Lisage data-ca-goal="goal-name" mis tahes klõpsatavale elemendile. Atribuudi väärtusest saab eesmärgi identifikaator teie töölaual.

<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>

Kuidas see töötab

Skript kasutab sündmuse delegeerimist dokumendil klikkide tõhusaks tuvastamiseks:

Kliki sündmus aktiveerub kuskil lehel.
Skript liigub DOM puus ülespoole klõpsatud elemendist, otsides atribuuti data-ca-goal.
Kui leitakse, saadetakse kliki sündmus eesmärgi nimega selektorina.

Klikieesmärkide vaatamine

Klikieesmärkide sündmused kuvatakse teie töölaua eesmärkide lehel. Looge eesmärk tüübiga "Click" ja siduge see oma HTML-is kasutatud data-ca-goal väärtusega.

GA4 DataLayer integratsioon

Kui teie sait juba edastab sündmusi Google Analytics dataLayerisse, saab ClearAnalytics need sündmused automaatselt pealt kuulata. See on lihtsaim viis GA4-lt üleminekuks.

Nõuab täisskripti (ca-events.js).

DataLayeri pealtkuulamise lubamine

Lisage script-sildile atribuut data-ca-datalayer. See opt-in lähenemisviis tagab, et funktsioon aktiveerub ainult siis, kui te selle selgesõnaliselt lubate.

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

Kuidas see töötab

Kui see on lubatud, kuulab skript pealt kõik dataLayer.push() kutsed:

Tuntud e-kaubanduse sündmused (purchase, add_to_cart jne) edastatakse e-kaubanduse sündmustena.
Kõik muud kohandatud sündmused edastatakse üldiste kohandatud sündmustena.
GTM sisesündmused (gtm.js, gtm.dom, gtm.load jne) filtreeritakse automaatselt välja.
Olemasolevad dataLayeri kirjed töödeldakse lehe laadimisel; tulevased lisandused kuulatakse pealt reaalajas.

Näide

// 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,
});

Ignoreeritud sündmused

Järgmised GTM sisesündmused ignoreeritakse automaatselt ja ei kuvata teie töölaual:

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

E-kaubanduse jälgimine

Jälgige kogu klienditeekonda toodete sirvimisest ostu ja tagastuseni. ClearAnalytics toetab kõiki 14 standardset e-kaubanduse sündmust, kasutades sama dataLayer formaati kui GA4.

Nõuab täisskripti (ca-events.js) koos atribuudiga data-ca-datalayer.

Kõik e-kaubanduse sündmused kasutavad GA4-ga ühilduvat dataLayer.push() formaati. Kui teil on juba GA4 e-kaubanduse jälgimine rakendatud, hõivab ClearAnalytics need sündmused automaatselt ilma koodimuudatusteta.

Sündmus	Kirjeldus
`view_item_list`	Kasutaja vaatab toodete loendit või otsingutulemusi.
`select_item`	Kasutaja klõpsab loendis toodet.
`view_item`	Kasutaja vaatab toote üksikasjade lehte.
`add_to_cart`	Kasutaja lisab toote ostukorvi.
`remove_from_cart`	Kasutaja eemaldab toote ostukorvist.
`view_cart`	Kasutaja vaatab ostukorvi.
`add_to_wishlist`	Kasutaja lisab toote soovinimekirja.
`begin_checkout`	Kasutaja alustab maksmisprotsessi.
`add_shipping_info`	Kasutaja esitab tarneandmed.
`add_payment_info`	Kasutaja esitab makseandmed.
`purchase`	Kasutaja viib ostu lõpule.
`refund`	Töödeldakse täielik või osaline tagasimakse.
`view_promotion`	Kasutaja vaatab reklaambännerit või pakkumist.
`select_promotion`	Kasutaja klõpsab kampaanial.

view_item_list

Käivitage see sündmus, kui kasutajad näevad toodete loendit, näiteks kategoorialehte või otsingutulemusi.

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

Käivitage see sündmus, kui kasutaja klõpsab loendist konkreetsel tootel selle vaatamiseks.

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

Käivitage see sündmus, kui kasutaja jõuab toote üksikasjade lehele.

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

Käivitage see sündmus, kui kasutaja lisab ühe või mitu toodet ostukorvi.

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

Käivitage see sündmus, kui kasutaja eemaldab toote ostukorvist.

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

Käivitage see sündmus, kui kasutaja vaatab ostukorvi lehte.

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

Käivitage see sündmus, kui kasutaja salvestab toote soovinimekirja hilisemaks.

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

Käivitage see sündmus, kui kasutaja alustab maksmisvooga.

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

Käivitage see sündmus, kui kasutaja valib või esitab tarneandmed maksmise ajal.

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

Käivitage see sündmus, kui kasutaja valib või esitab makseviisi maksmise ajal.

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

Käivitage see sündmus, kui ost on kinnitatud. Lisage transaction_id, value, currency, tax, shipping ja täielik items massiiv.

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

Käivitage see sündmus, kui tagasimakse töödeldakse. Täieliku tagasimakse puhul on vajalik ainult transaction_id. Osaliste tagasimaksete puhul lisage konkreetsed tooted.

// 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

Käivitage see sündmus, kui reklaambänner, karussell või pakkumine muutub kasutajale nähtavaks.

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

Käivitage see sündmus, kui kasutaja klõpsab kampaanial, et rohkem teada saada või pakkumist kasutada.

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,
    }],
  },
});

Üleminek Google Analyticsilt

ClearAnalytics on loodud töötama kõrvuti Google Analyticsiga või selle asendajana. Saate mõlemat tööriista ülemineku ajal paralleelselt käitada ilma konfliktideta.

Mõlema skripti paralleelne käitamine

Lisage ClearAnalyticsi skript oma olemasoleva Google Analyticsi sildi kõrvale. Mõlemad skriptid jälgivad iseseisvalt ilma üksteist segamata.

<!-- 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>

Funktsioonide ühilduvus

ClearAnalyticsi funktsioonide vastavus Google Analyticsi omadega:

Funktsioon	Google Analytics	ClearAnalytics
Lehekülastused	`gtag('event', 'page_view')`	Automaatne
Kohandatud sündmused	`gtag('event', ...)`	`window.ca('event')`
E-kaubandus	`dataLayer.push()`	dataLayeriga ühilduv
UTM kampaaniad	Automaatne	Automaatne
Seansid	Küpsistepõhine	Küpsisevaba

Ülemineku sammud

Lisage ClearAnalyticsi skript oma saidile Google Analyticsi kõrvale.
Lubage dataLayeri pealtkuulamine atribuudiga data-ca-datalayer olemasolevate e-kaubanduse sündmuste hõivamiseks.
Võrrelge andmeid mõlemal töölaual 2-4 nädala jooksul täpsuse kontrollimiseks.
Kui olete rahul, eemaldage Google Analyticsi skript ja nautige kiiremat, privaatsusele keskendunud seadistust.

SPA tugi

ClearAnalytics tuvastab automaatselt kliendipoolse navigatsiooni ühelehistes rakendustes. Lisaseadistust ega ruuteri integratsiooni pole vaja.

Kuidas see töötab

Skript kuulab pealt brauseri History API kutseid lehenavigatsiooni tuvastamiseks:

history.pushState() kutsed kuulatakse pealt ja käivitavad uue lehekülastuse.
history.replaceState() kutsed kuulatakse pealt ja käivitavad uue lehekülastuse.
popstate sündmused (brauseri tagasi/edasi) käivitavad uue lehekülastuse.

Ühilduvad raamistikud

Töötab kohe kõigi raamistikuga, mis kasutavad marsruutimiseks History API-t:

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

Ruuteri pistikprogramme, elutsükli konkse ega käsitsi jälgimiskutseid pole vaja. Lihtsalt lisage script-silt ühe korra ja iga lehenavigatsiooni jälgitakse automaatselt.

Privaatsus ja vastavus

ClearAnalytics on loodud privaatsus südames. Jälgimisskript kogub ainult anonüümseid, agregeeritud andmeid. Isiklikku teavet ei salvestata ega edastata kunagi.

Ilma küpsisteta

Skript ei sea, ei loe ega sõltu ühestki brauseri küpsisest. Küpsiste nõusolekubännerit pole vaja.

Ilma sõrmejälgedeta

Me ei loo kunagi brauseri sõrmejälgi. Lõuendi, WebGL-i, fondi ega heli sõrmejälje tehnikaid ei kasutata.

Ilma IP salvestamiseta

Külastajate IP-aadresse kasutatakse ainult anonümiseeritud räsimiseks päringu ajal. Neid ei salvestata kunagi andmebaasi.

GDPR-iga ühilduv

Kuna isikuandmeid ei koguta, ei kuulu ClearAnalytics GDPR-i nõusoleku nõuete alla. Kõik andmed jäävad EL-i.

Kuidas me külastajaid anonümiseerime

Unikaalsete külastajate loendamiseks ilma isikuandmete salvestamiseta kasutame igapäevaselt roteeruvat anonüümset räsi:

Külastaja IP-aadress ja User-Agent kombineeritakse igapäevaselt roteeruva soolaga.
See kombinatsioon räsitakse ühesuunalise SHA-256 algoritmiga.
Sool roteerub iga 24 tunni tagant, muutes külastajate jälgimise päevade vahel võimatuks.
Algset IP-aadressi ei salvestata ega logita kunagi.

Skripti poolt kogutavad andmed

Järgmised mitteisiklikud andmeväljad saadetakse iga lehekülastuse sündmusega:

Väli	Eesmärk
`pathname`	Külastatava lehe URL-i tee.
`referrer`	Viitava lehe URL, kui on.
`language`	Brauseri keeleseade.
`screen_width / screen_height`	Ekraani mõõtmed seadmetüübi klassifitseerimiseks.
`utm_*`	Kampaania jälgimisparameetrid URL-ist.
`duration`	Lehel veedetud aeg sekundites.

Kuna ClearAnalytics ei kogu kunagi isikuandmeid, ei vaja te küpsiste nõusolekubännerit, privaatsuse hüpikakent ega opt-in mehhanismi meie jälgimisskripti kasutamiseks. See on kohe ühilduv GDPR-i, ePrivacy, PECR-i ja CCPA-ga.