Dokumentace sledování a událostí

Vše, co potřebujete k instalaci ClearAnalytics na váš web a sledování zobrazení stránek, vlastních událostí, cílů kliknutí a e-commerce transakcí.

Přehled

ClearAnalytics nabízí dvě varianty sledovacího skriptu. Vyberte si tu, která vyhovuje vašim potřebám: minimální skript pro základní analytiku zobrazení stránek, nebo plnohodnotný skript pro vlastní události, cíle kliknutí a sledování e-commerce.

Lehký skript (ca.js)

Nejlehčí možný sledovací skript. Ideální pro blogy, vstupní stránky a weby, které potřebují pouze analytiku zobrazení stránek.

ca.js < 1 KB

Automatické sledování zobrazení stránek
Doba relace a míra okamžitého opuštění
Zachycení parametrů UTM kampaní
Podpora jednostránkových aplikací

Plný skript (ca-events.js)

Vše z lehkého skriptu plus vlastní události, sledování cílů kliknutí, zachycení GA4 dataLayer a plná podpora e-commerce.

ca-events.js < 2 KB

Vše z lehkého skriptu
Sledování vlastních událostí přes window.ca()
Sledování cílů kliknutí přes data-ca-goal
Integrace GA4 dataLayer
Plné sledování e-commerce událostí

Instalace

Přidejte jeden tag skriptu na svůj web. Žádné npm balíčky, žádné build nástroje, žádné konfigurační soubory. Skript se načítá asynchronně a nemá žádný dopad na výkon stránky.

HTML — Lehký skript

Přidejte toto do <head> nebo na konec <body> na každé stránce. Automaticky sleduje zobrazení stránek, dobu relace a UTM parametry.

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

HTML — Plný skript

Použijte tuto variantu, pokud potřebujete vlastní události, cíle kliknutí nebo sledování e-commerce.

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

HTML — Plný skript s DataLayer

Přidejte atribut data-ca-datalayer pro automatické zachycení událostí GA4 dataLayer, včetně všech e-commerce událostí.

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

WordPress

Přidejte tag skriptu přes soubor functions.php vašeho tématu nebo použijte plugin pro vkládání do hlavičky/patičky.

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

React / Next.js

Použijte komponentu Script z Next.js pro optimální načítání. Skript funguje s jakýmkoli React frameworkem.

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

Přidejte skript přes konfiguraci Nuxt nebo přímo do HTML šablony pro běžné Vue aplikace.

// 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 také nasadit přes Google Tag Manager pomocí 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>

Při použití GTM s atributem data-ca-datalayer ClearAnalytics automaticky zachytí všechny dataLayer události odesílané vašimi stávajícími GTM tagy.

Vlastní události

Sledujte jakoukoli interakci uživatele odesláním vlastních událostí s volitelnými metadaty. Vlastní události se zobrazí ve vašem přehledu a lze je použít jako spouštěče cílů.

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

Signatura API

window.ca(eventName, properties?);

Parametr	Typ	Popis
`eventName`	string	Popisný název události (např. 'signup', 'file_download').
`properties`	object	Volitelný objekt s dalšími metadaty. Serializován jako JSON.

Příklady

// Sledování registrace s informací o tarifu

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

// Sledování stažení souboru

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

// Sledování přehrání videa

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

// Sledování interního vyhledávání

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

Sledování cílů kliknutí

Sledujte kliknutí na tlačítka a odkazy bez psaní JavaScriptu. Přidejte atribut data-ca-goal k jakémukoli HTML elementu a kliknutí bude automaticky zaznamenáno.

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

Použití

Přidejte data-ca-goal="název-cíle" k jakémukoli klikatelnému elementu. Hodnota atributu se stane identifikátorem cíle ve vašem přehledu.

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

Jak to funguje

Skript používá delegaci událostí na dokumentu pro efektivní detekci kliknutí:

Kdekoli na stránce dojde ke kliknutí.
Skript prochází DOM strom nahoru od kliknutého elementu a hledá atribut data-ca-goal.
Pokud je nalezen, odešle událost kliknutí s názvem cíle jako selektorem.

Zobrazení cílů kliknutí

Události cílů kliknutí se zobrazují na stránce Cíle ve vašem přehledu. Vytvořte cíl typu "Kliknutí" a napárujte ho s hodnotou data-ca-goal použitou ve vašem HTML.

Integrace GA4 DataLayer

Pokud váš web již odesílá události do Google Analytics dataLayer, ClearAnalytics je může automaticky zachytit. Toto je nejjednodušší cesta migrace z GA4.

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

Aktivace zachycení DataLayer

Přidejte atribut data-ca-datalayer k tagu skriptu. Tento opt-in přístup zajistí, že se funkce aktivuje pouze tehdy, když ji výslovně povolíte.

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

Jak to funguje

Po aktivaci skript zachycuje všechna volání dataLayer.push():

Rozpoznané e-commerce události (purchase, add_to_cart atd.) jsou přesměrovány jako e-commerce události.
Všechny ostatní vlastní události jsou přesměrovány jako obecné vlastní události.
Interní GTM události (gtm.js, gtm.dom, gtm.load atd.) jsou automaticky odfiltrovány.
Existující záznamy dataLayer jsou zpracovány při načtení stránky; budoucí push volání jsou zachycena v reálném čase.

Pří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é události

Následující interní GTM události jsou automaticky ignorovány a neobjeví se ve vašem přehledu:

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

Sledování e-commerce

Sledujte celou cestu zákazníka od prohlížení produktů po nákup a vrácení. ClearAnalytics podporuje všech 14 standardních e-commerce událostí ve stejném formátu dataLayer jako GA4.

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

Všechny e-commerce události používají formát dataLayer.push() kompatibilní s GA4. Pokud již máte implementované sledování e-commerce GA4, ClearAnalytics tyto události automaticky zachytí bez jakýchkoli změn kódu.

Událost	Popis
`view_item_list`	Uživatel vidí seznam produktů nebo výsledky vyhledávání.
`select_item`	Uživatel klikne na produkt v seznamu.
`view_item`	Uživatel zobrazí stránku detailu produktu.
`add_to_cart`	Uživatel přidá produkt do košíku.
`remove_from_cart`	Uživatel odebere produkt z košíku.
`view_cart`	Uživatel zobrazí nákupní košík.
`add_to_wishlist`	Uživatel přidá produkt do seznamu přání.
`begin_checkout`	Uživatel zahájí proces objednávky.
`add_shipping_info`	Uživatel odešle informace o doručení.
`add_payment_info`	Uživatel odešle informace o platbě.
`purchase`	Uživatel dokončí nákup.
`refund`	Je zpracováno úplné nebo částečné vrácení.
`view_promotion`	Uživatel vidí propagační banner nebo nabídku.
`select_promotion`	Uživatel klikne na propagaci.

view_item_list

Spusťte tuto událost, když uživatelé vidí seznam produktů, například stránku kategorie nebo výsledky vyhledávání.

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

Spusťte tuto událost, když uživatel klikne na konkrétní produkt ze seznamu.

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

Spusťte tuto událost, když uživatel přejde 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

Spusťte tuto událost, když uživatel přidá jeden nebo více produktů do košíku.

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

Spusťte tuto událost, když uživatel odebere produkt z košíku.

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

Spusťte tuto událost, když uživatel zobrazí stránku nákupního košíku.

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

Spusťte tuto událost, když uživatel uloží produkt do seznamu přání.

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

Spusťte tuto událost, když uživatel zahájí 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

Spusťte tuto událost, když uživatel vybere nebo odešle údaje o doručení během 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

Spusťte tuto událost, když uživatel vybere nebo odešle platební metodu během 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

Spusťte tuto událost, když je nákup potvrzen. 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

Spusťte tuto událost, když je zpracováno vrácení. Pro úplné vrácení stačí transaction_id. Pro částečná vrácení zahrňte konkrétní 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

Spusťte tuto událost, když se uživateli zobrazí propagační banner, karusel nebo nabídka.

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

Spusťte tuto událost, když uživatel klikne na propagaci, aby se dozvěděl více nebo využil nabídku.

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

Migrace z Google Analytics

ClearAnalytics je navržen pro provoz vedle Google Analytics nebo jako jeho náhrada. Během migrace můžete oba nástroje provozovat paralelně bez konfliktů.

Spuštění obou skriptů paralelně

Přidejte skript ClearAnalytics vedle stávajícího tagu Google Analytics. Oba skripty budou sledovat nezávisle, aniž by se navzájem ovlivňovaly.

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

Takto odpovídají funkce ClearAnalytics svým protějškům v Google Analytics:

Funkce	Google Analytics	ClearAnalytics
Zobrazení stránek	`gtag('event', 'page_view')`	Automaticky
Vlastní události	`gtag('event', ...)`	`window.ca('event')`
E-Commerce	`dataLayer.push()`	kompatibilní s dataLayer
UTM kampaně	Automaticky	Automaticky
Relace	Na bázi cookies	Bez cookies

Kroky migrace

Přidejte skript ClearAnalytics na svůj web vedle Google Analytics.
Povolte zachycení dataLayer pomocí data-ca-datalayer pro zachycení stávajících e-commerce událostí.
Porovnávejte data v obou přehledech po dobu 2–4 týdnů pro ověření přesnosti.
Jakmile budete spokojeni, odstraňte skript Google Analytics a užívejte si rychlejší nastavení s důrazem na soukromí.

Podpora SPA

ClearAnalytics automaticky detekuje navigaci na straně klienta v jednostránkových aplikacích. Není potřeba žádná další konfigurace ani integrace s routerem.

Jak to funguje

Skript zachycuje volání History API prohlížeče pro detekci navigace na stránkách:

history.pushState() volání jsou zachycena a spouštějí nové zobrazení stránky.
history.replaceState() volání jsou zachycena a spouštějí nové zobrazení stránky.
popstate události (tlačítka zpět/vpřed prohlížeče) spouštějí nové zobrazení stránky.

Kompatibilní frameworky

Funguje ihned s jakýmkoli frameworkem, který používá History API pro směrování:

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

Žádné pluginy routeru, lifecycle hooky ani ruční volání sledování nejsou potřeba. Stačí přidat tag skriptu jednou a každá navigace na stránce je automaticky sledována.

Soukromí a soulad

ClearAnalytics je postaven se soukromím v jádru. Sledovací skript shromažďuje pouze anonymní, agregovaná data. Žádné osobní údaje nejsou nikdy uloženy ani přeneseny.

Žádné cookies

Skript nenastavuje, nečte ani nezávisí na žádných cookies prohlížeče. Banner pro souhlas s cookies není potřeba.

Žádné otisky

Nikdy nevytváříme otisky prohlížeče. Nepoužíváme techniky otisků canvas, WebGL, písem ani zvuku.

Žádné ukládání IP

IP adresy návštěvníků se používají pouze pro anonymizované hashování během požadavku. Nikdy nejsou uloženy v databázi.

V souladu s GDPR

Protože nejsou shromažďovány žádné osobní údaje, ClearAnalytics nespadá pod požadavky GDPR na souhlas. Všechna data zůstávají v EU.

Jak anonymizujeme návštěvníky

Pro počítání unikátních návštěvníků bez ukládání osobních údajů používáme denně rotující anonymní hash:

IP adresa návštěvníka a User-Agent jsou kombinovány s denně rotující solí.
Tato kombinace je hashována jednosměrným algoritmem SHA-256.
Sůl se mění každých 24 hodin, což znemožňuje sledování návštěvníků napříč dny.
Původní IP adresa není nikdy uložena ani zalogována.

Data shromažďovaná skriptem

Následující neosobní datová pole jsou odeslána s každou událostí zobrazení stránky:

Pole	Účel
`pathname`	Cesta URL navštívené stránky.
`referrer`	URL odkazující stránky, pokud existuje.
`language`	Jazykové nastavení prohlížeče.
`screen_width / screen_height`	Rozměry obrazovky pro klasifikaci typu zařízení.
`utm_*`	Parametry sledování kampaní z URL.
`duration`	Čas strávený na stránce v sekundách.

Protože ClearAnalytics nikdy neshromažďuje osobní údaje, nepotřebujete banner pro souhlas s cookies, vyskakovací okno pro ochranu soukromí ani mechanismus opt-in pro použití našeho sledovacího skriptu. Je v souladu s GDPR, ePrivacy, PECR a CCPA ihned po nasazení.