Dokumentácia sledovania a udalostí

Všetko, čo potrebujete na inštaláciu ClearAnalytics na váš web a sledovanie zobrazení stránok, vlastných udalostí, cieľov kliknutí a e-commerce transakcií.

Prehľad

ClearAnalytics ponúka dva varianty sledovacieho skriptu. Vyberte si ten, ktorý vyhovuje vašim potrebám: minimálny skript pre základnú analytiku zobrazení stránok alebo plnohodnotný skript pre vlastné udalosti, ciele kliknutí a sledovanie e-commerce.

Ľahký skript (ca.js)

Najľahší možný sledovací skript. Ideálny pre blogy, vstupné stránky a weby, ktoré potrebujú iba analytiku zobrazení stránok.

ca.js < 1 KB

Automatické sledovanie zobrazení stránok
Trvanie relácie a miera okamžitého opustenia
Zachytávanie parametrov UTM kampaní
Podpora jednostránkových aplikácií

Plný skript (ca-events.js)

Všetko z ľahkého skriptu plus vlastné udalosti, sledovanie cieľov kliknutí, zachytávanie GA4 dataLayer a plná podpora e-commerce.

ca-events.js < 2 KB

Všetko z ľahkého skriptu
Sledovanie vlastných udalostí cez window.ca()
Sledovanie cieľov kliknutí cez data-ca-goal
Integrácia GA4 dataLayer
Plné sledovanie e-commerce udalostí

Inštalácia

Pridajte jeden tag skriptu na váš web. Žiadne npm balíčky, žiadne build nástroje, žiadne konfiguračné súbory. Skript sa načítava asynchrónne a nemá žiadny vplyv na výkon stránky.

HTML — Ľahký skript

Pridajte toto do <head> alebo na koniec <body> na každej stránke. Automaticky sleduje zobrazenia stránok, trvanie relácie a UTM parametre.

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

HTML — Plný skript

Použite tento variant, ak potrebujete vlastné udalosti, ciele kliknutí alebo sledovanie e-commerce.

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

HTML — Plný skript s DataLayer

Pridajte atribút data-ca-datalayer na automatické zachytávanie udalostí GA4 dataLayer, vrátane všetkých e-commerce udalostí.

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

WordPress

Pridajte tag skriptu cez súbor functions.php vášho motívu alebo použite plugin na vkladanie do hlavičky/päty.

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

React / Next.js

Použite komponent Script z Next.js na optimálne načítanie. Skript funguje s akýmkoľvek React frameworkom.

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

Pridajte skript cez konfiguráciu Nuxt alebo priamo do HTML šablóny pre bežné Vue aplikácie.

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

Google Tag Manager

Skript môžete tiež nasadiť cez Google Tag Manager pomocou vlastného HTML tagu.

Tag Type:   Custom HTML
Trigger:    All Pages

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

Pri použití GTM s atribútom data-ca-datalayer ClearAnalytics automaticky zachytí všetky dataLayer udalosti odosielané vašimi existujúcimi GTM tagmi.

Vlastné udalosti

Sledujte akúkoľvek interakciu používateľa odoslaním vlastných udalostí s voliteľnými metadátami. Vlastné udalosti sa zobrazujú vo vašom prehľade a môžu byť použité ako spúšťače cieľov.

Vyžaduje plný skript (ca-events.js).

Signatúra API

window.ca(eventName, properties?);

Parameter	Typ	Popis
`eventName`	string	Popisný názov udalosti (napr. 'signup', 'file_download').
`properties`	object	Voliteľný objekt s ďalšími metadátami. Serializovaný ako JSON.

Príklady

// Sledovanie registrácie s informáciou o pláne

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

// Sledovanie stiahnutia súboru

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

// Sledovanie prehratia videa

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

// Sledovanie interného vyhľadávania

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

Sledovanie cieľov kliknutí

Sledujte kliknutia na tlačidlá a odkazy bez písania JavaScriptu. Pridajte atribút data-ca-goal k akémukoľvek HTML elementu a kliknutie bude automaticky zaznamenané.

Vyžaduje plný skript (ca-events.js).

Použitie

Pridajte data-ca-goal="názov-cieľa" k akémukoľvek klikateľnému elementu. Hodnota atribútu sa stane identifikátorom cieľa vo vašom prehľade.

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

Ako to funguje

Skript používa delegáciu udalostí na dokumente na efektívnu detekciu kliknutí:

Kdekoľvek na stránke dôjde ku kliknutiu.
Skript prechádza DOM strom nahor od kliknutého elementu a hľadá atribút data-ca-goal.
Ak sa nájde, odošle udalosť kliknutia s názvom cieľa ako selektorom.

Zobrazenie cieľov kliknutí

Udalosti cieľov kliknutí sa zobrazujú na stránke Ciele vo vašom prehľade. Vytvorte cieľ typu "Kliknutie" a napárujte ho s hodnotou data-ca-goal použitou vo vašom HTML.

Integrácia GA4 DataLayer

Ak váš web už odosiela udalosti do Google Analytics dataLayer, ClearAnalytics ich môže automaticky zachytiť. Toto je najjednoduchšia cesta migrácie z GA4.

Vyžaduje plný skript (ca-events.js).

Aktivácia zachytávania DataLayer

Pridajte atribút data-ca-datalayer k tagu skriptu. Tento opt-in prístup zaistí, že sa funkcia aktivuje iba vtedy, keď ju výslovne povolíte.

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

Ako to funguje

Po aktivácii skript zachytáva všetky volania dataLayer.push():

Rozpoznané e-commerce udalosti (purchase, add_to_cart atď.) sú presmerované ako e-commerce udalosti.
Všetky ostatné vlastné udalosti sú presmerované ako všeobecné vlastné udalosti.
Interné GTM udalosti (gtm.js, gtm.dom, gtm.load atď.) sú automaticky odfiltrované.
Existujúce záznamy dataLayer sú spracované pri načítaní stránky; budúce push volania sú zachytávané v reálnom čase.

Príklad

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

Ignorované udalosti

Nasledujúce interné GTM udalosti sú automaticky ignorované a nezobrazia sa vo vašom prehľade:

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

Sledovanie e-commerce

Sledujte celú cestu zákazníka od prehliadania produktov po nákup a vrátenie. ClearAnalytics podporuje všetkých 14 štandardných e-commerce udalostí v rovnakom formáte dataLayer ako GA4.

Vyžaduje plný skript (ca-events.js) s atribútom data-ca-datalayer.

Všetky e-commerce udalosti používajú formát dataLayer.push() kompatibilný s GA4. Ak už máte implementované sledovanie e-commerce GA4, ClearAnalytics tieto udalosti automaticky zachytí bez akýchkoľvek zmien kódu.

Udalosť	Popis
`view_item_list`	Používateľ vidí zoznam produktov alebo výsledky vyhľadávania.
`select_item`	Používateľ klikne na produkt v zozname.
`view_item`	Používateľ zobrazí stránku detailu produktu.
`add_to_cart`	Používateľ pridá produkt do košíka.
`remove_from_cart`	Používateľ odoberie produkt z košíka.
`view_cart`	Používateľ zobrazí nákupný košík.
`add_to_wishlist`	Používateľ pridá produkt do zoznamu prianí.
`begin_checkout`	Používateľ začne proces objednávky.
`add_shipping_info`	Používateľ odošle informácie o doručení.
`add_payment_info`	Používateľ odošle informácie o platbe.
`purchase`	Používateľ dokončí nákup.
`refund`	Spracuje sa úplné alebo čiastočné vrátenie.
`view_promotion`	Používateľ vidí propagačný banner alebo ponuku.
`select_promotion`	Používateľ klikne na propagáciu.

view_item_list

Spustite túto udalosť, keď používatelia vidia zoznam produktov, napríklad stránku kategórie alebo výsledky vyhľadávania.

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

Spustite túto udalosť, keď používateľ klikne na konkrétny produkt zo zoznamu.

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

Spustite túto udalosť, keď používateľ prejde na stránku detailu produktu.

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

Spustite túto udalosť, keď používateľ pridá jeden alebo viac produktov do košíka.

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

Spustite túto udalosť, keď používateľ odoberie produkt z košíka.

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

Spustite túto udalosť, keď používateľ zobrazí stránku nákupného košíka.

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

Spustite túto udalosť, keď používateľ uloží produkt do zoznamu prianí.

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

Spustite túto udalosť, keď používateľ začne proces objednávky.

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

Spustite túto udalosť, keď používateľ vyberie alebo odošle údaje o doručení počas objednávky.

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

Spustite túto udalosť, keď používateľ vyberie alebo odošle platobnú metódu počas objednávky.

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

Spustite túto udalosť, keď je nákup potvrdený. Zahrňte transaction_id, value, currency, tax, shipping a úplné pole items.

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

Spustite túto udalosť, keď sa spracuje vrátenie. Pre úplné vrátenie stačí transaction_id. Pre čiastočné vrátenia zahrňte konkrétne položky.

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

Spustite túto udalosť, keď sa používateľovi zobrazí propagačný banner, karusel alebo ponuka.

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

Spustite túto udalosť, keď používateľ klikne na propagáciu, aby sa dozvedel viac alebo využil ponuku.

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

Migrácia z Google Analytics

ClearAnalytics je navrhnutý na prevádzku popri Google Analytics alebo ako jeho náhrada. Počas migrácie môžete oba nástroje prevádzkovať paralelne bez konfliktov.

Spustenie oboch skriptov paralelne

Pridajte skript ClearAnalytics vedľa existujúceho tagu Google Analytics. Oba skripty budú sledovať nezávisle bez vzájomného ovplyvňovania.

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

Kompatibilita funkcií

Takto zodpovedajú funkcie ClearAnalytics ich protipólom v Google Analytics:

Funkcia	Google Analytics	ClearAnalytics
Zobrazenia stránok	`gtag('event', 'page_view')`	Automaticky
Vlastné udalosti	`gtag('event', ...)`	`window.ca('event')`
E-Commerce	`dataLayer.push()`	kompatibilný s dataLayer
UTM kampane	Automaticky	Automaticky
Relácie	Na báze cookies	Bez cookies

Kroky migrácie

Pridajte skript ClearAnalytics na svoj web popri Google Analytics.
Povoľte zachytávanie dataLayer pomocou data-ca-datalayer na zachytenie existujúcich e-commerce udalostí.
Porovnávajte dáta v oboch prehľadoch počas 2–4 týždňov na overenie presnosti.
Keď budete spokojní, odstráňte skript Google Analytics a užívajte si rýchlejšie nastavenie s dôrazom na súkromie.

Podpora SPA

ClearAnalytics automaticky deteguje navigáciu na strane klienta v jednostránkových aplikáciách. Nie je potrebná žiadna ďalšia konfigurácia ani integrácia s routerom.

Ako to funguje

Skript zachytáva volania History API prehliadača na detekciu navigácie na stránkach:

history.pushState() volania sú zachytené a spúšťajú nové zobrazenie stránky.
history.replaceState() volania sú zachytené a spúšťajú nové zobrazenie stránky.
popstate udalosti (tlačidlá späť/vpred prehliadača) spúšťajú nové zobrazenie stránky.

Kompatibilné frameworky

Funguje okamžite s akýmkoľvek frameworkom, ktorý používa History API na smerovanie:

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

Žiadne pluginy routera, lifecycle hooky ani manuálne volania sledovania nie sú potrebné. Stačí pridať tag skriptu raz a každá navigácia na stránke je automaticky sledovaná.

Súkromie a súlad

ClearAnalytics je postavený so súkromím v jadre. Sledovací skript zhromažďuje iba anonymné, agregované dáta. Žiadne osobné údaje nie sú nikdy uložené ani prenesené.

Žiadne cookies

Skript nenastavuje, nečíta ani nezávisí na žiadnych cookies prehliadača. Banner na súhlas s cookies nie je potrebný.

Žiadne odtlačky

Nikdy nevytvárame odtlačky prehliadača. Nepoužívame techniky odtlačkov canvas, WebGL, písiem ani zvuku.

Žiadne ukladanie IP

IP adresy návštevníkov sa používajú iba na anonymizované hashovanie počas požiadavky. Nikdy nie sú uložené v databáze.

V súlade s GDPR

Pretože sa nezhromažďujú žiadne osobné údaje, ClearAnalytics nespadá pod požiadavky GDPR na súhlas. Všetky dáta zostávajú v EÚ.

Ako anonymizujeme návštevníkov

Na počítanie unikátnych návštevníkov bez ukladania osobných údajov používame denne rotujúci anonymný hash:

IP adresa návštevníka a User-Agent sú kombinované s denne rotujúcou soľou.
Táto kombinácia je hashovaná jednosmerným algoritmom SHA-256.
Soľ sa mení každých 24 hodín, čo znemožňuje sledovanie návštevníkov naprieč dňami.
Pôvodná IP adresa nie je nikdy uložená ani zalogovaná.

Dáta zhromažďované skriptom

Nasledujúce neosobné dátové polia sú odoslané s každou udalosťou zobrazenia stránky:

Pole	Účel
`pathname`	Cesta URL navštívenej stránky.
`referrer`	URL odkazujúcej stránky, ak existuje.
`language`	Jazykové nastavenie prehliadača.
`screen_width / screen_height`	Rozmery obrazovky na klasifikáciu typu zariadenia.
`utm_*`	Parametre sledovania kampaní z URL.
`duration`	Čas strávený na stránke v sekundách.

Pretože ClearAnalytics nikdy nezhromažďuje osobné údaje, nepotrebujete banner na súhlas s cookies, vyskakovacie okno o súkromí ani mechanizmus opt-in na používanie nášho sledovacieho skriptu. Je v súlade s GDPR, ePrivacy, PECR a CCPA ihneď po nasadení.