Dokumentacija praćenja i događaja

Sve što vam je potrebno za instalaciju ClearAnalyticsa na vašu web stranicu i praćenje pregleda stranica, prilagođenih događaja, ciljeva klikova i transakcija e-trgovine.

Pregled

ClearAnalytics nudi dvije varijante skripte za praćenje. Odaberite onu koja odgovara vašim potrebama: minimalnu skriptu za osnovnu analitiku pregleda stranica ili potpunu skriptu za prilagođene događaje, ciljeve klikova i praćenje e-trgovine.

Lagana skripta (ca.js)

Najlakša moguća skripta za praćenje. Savršena za blogove, odredišne stranice i web stranice kojima je potrebna samo analitika pregleda stranica.

ca.js < 1 KB

Automatsko praćenje pregleda stranica
Trajanje sesije i stopa napuštanja
Hvatanje UTM parametara kampanje
Podrška za jednostranične aplikacije

Potpuna skripta (ca-events.js)

Sve iz lagane skripte, plus prilagođeni događaji, praćenje ciljeva klikova, presretanje GA4 dataLayera i potpuna podrška za e-trgovinu.

ca-events.js < 2 KB

Sve iz lagane skripte
Praćenje prilagođenih događaja putem window.ca()
Praćenje ciljeva klikova putem data-ca-goal
Integracija GA4 dataLayera
Potpuno praćenje događaja e-trgovine

Instalacija

Dodajte jednu script oznaku na svoju web stranicu. Bez npm paketa, bez alata za izgradnju, bez konfiguracijskih datoteka. Skripta se učitava asinkrono i nema nikakav utjecaj na performanse stranice.

HTML — Lagana skripta

Dodajte ovo u <head> ili na kraj <body> na svakoj stranici. Automatski prati preglede stranica, trajanje sesije i UTM parametre.

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

HTML — Potpuna skripta

Koristite ovu varijantu ako trebate prilagođene događaje, ciljeve klikova ili praćenje e-trgovine.

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

HTML — Potpuna skripta s DataLayerom

Dodajte atribut data-ca-datalayer za automatsko presretanje GA4 dataLayer događaja, uključujući sve događaje e-trgovine.

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

WordPress

Dodajte script oznaku putem datoteke functions.php vaše teme ili koristite dodatak za umetanje zaglavlja/podnožja.

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

React / Next.js

Koristite Next.js Script komponentu za optimalno učitavanje. Skripta radi s bilo kojim React okvirom.

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

Dodajte skriptu putem Nuxt konfiguracije ili izravno u HTML predlošku za obične Vue aplikacije.

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

Google Tag Manager

Skriptu možete također postaviti putem Google Tag Managera koristeći prilagođenu HTML oznaku.

Tag Type:   Custom HTML
Trigger:    All Pages

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

Kada koristite GTM s atributom data-ca-datalayer, ClearAnalytics će automatski hvatati sve dataLayer događaje koje šalju vaše postojeće GTM oznake.

Prilagođeni događaji

Pratite bilo koju korisničku interakciju slanjem prilagođenih događaja s opcionim metapodacima. Prilagođeni događaji pojavljuju se na vašoj nadzornoj ploči i mogu se koristiti kao okidači ciljeva.

Zahtijeva potpunu skriptu (ca-events.js).

API potpis

window.ca(eventName, properties?);

Parametar	Tip	Opis
`eventName`	string	Opisni naziv za događaj (npr. 'signup', 'file_download').
`properties`	object	Opcionalni objekt s dodatnim metapodacima. Serijaliziran kao JSON.

Primjeri

// Praćenje registracije s informacijama o planu

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

// Praćenje preuzimanja datoteke

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

// Praćenje reprodukcije videa

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

// Praćenje internog pretraživanja

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

Praćenje ciljeva klikova

Pratite klikove na gumbe i poveznice bez pisanja JavaScripta. Dodajte atribut data-ca-goal na bilo koji HTML element i klik će se automatski zabilježiti.

Zahtijeva potpunu skriptu (ca-events.js).

Korištenje

Dodajte data-ca-goal="naziv-cilja" na bilo koji element koji se može kliknuti. Vrijednost atributa postaje identifikator cilja na vašoj nadzornoj ploči.

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

Kako funkcionira

Skripta koristi delegaciju događaja na dokumentu za učinkovito otkrivanje klikova:

Događaj klika se aktivira bilo gdje na stranici.
Skripta prolazi DOM stablo od kliknutog elementa tražeći atribut data-ca-goal.
Ako ga pronađe, šalje događaj klika s nazivom cilja kao selektorom.

Pregled ciljeva klikova

Događaji ciljeva klikova pojavljuju se na stranici Ciljevi na vašoj nadzornoj ploči. Kreirajte cilj s tipom "Klik" i povežite ga s vrijednošću data-ca-goal koju ste koristili u svom HTML-u.

Integracija GA4 DataLayera

Ako vaša stranica već šalje događaje u Google Analytics dataLayer, ClearAnalytics može automatski presresti te događaje. Ovo je najlakši put migracije s GA4.

Zahtijeva potpunu skriptu (ca-events.js).

Omogućavanje presretanja DataLayera

Dodajte atribut data-ca-datalayer na script oznaku. Ovaj pristup uključivanja osigurava da se značajka aktivira samo kada je eksplicitno omogućite.

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

Kako funkcionira

Kada je omogućeno, skripta presreće sve dataLayer.push() pozive:

Prepoznati događaji e-trgovine (purchase, add_to_cart, itd.) prosljeđuju se kao događaji e-trgovine.
Svi ostali prilagođeni događaji prosljeđuju se kao generički prilagođeni događaji.
Interni GTM događaji (gtm.js, gtm.dom, gtm.load, itd.) automatski se filtriraju.
Postojeći unosi u dataLayeru obrađuju se pri učitavanju stranice; budući pushevi presreću se u stvarnom vremenu.

Primjer

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

Ignorirani događaji

Sljedeći interni GTM događaji automatski se ignoriraju i neće se pojaviti na vašoj nadzornoj ploči:

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

Praćenje e-trgovine

Pratite cijeli put kupca od pregledavanja proizvoda do kupnje i povrata. ClearAnalytics podržava svih 14 standardnih događaja e-trgovine koristeći isti dataLayer format kao GA4.

Zahtijeva potpunu skriptu (ca-events.js) s atributom data-ca-datalayer.

Svi događaji e-trgovine koriste GA4-kompatibilan dataLayer.push() format. Ako već imate implementirano GA4 praćenje e-trgovine, ClearAnalytics će automatski hvatati te događaje bez ikakvih promjena koda.

Događaj	Opis
`view_item_list`	Korisnik pregledava popis proizvoda ili rezultate pretraživanja.
`select_item`	Korisnik klikne na proizvod u popisu.
`view_item`	Korisnik pregledava stranicu s detaljima proizvoda.
`add_to_cart`	Korisnik dodaje proizvod u košaricu.
`remove_from_cart`	Korisnik uklanja proizvod iz košarice.
`view_cart`	Korisnik pregledava košaricu.
`add_to_wishlist`	Korisnik dodaje proizvod na listu želja.
`begin_checkout`	Korisnik započinje proces naplate.
`add_shipping_info`	Korisnik šalje podatke o dostavi.
`add_payment_info`	Korisnik šalje podatke o plaćanju.
`purchase`	Korisnik dovršava kupnju.
`refund`	Obrađuje se potpuni ili djelomični povrat.
`view_promotion`	Korisnik pregledava promotivni banner ili ponudu.
`select_promotion`	Korisnik klikne na promociju.

view_item_list

Aktivirajte ovaj događaj kada korisnici vide popis proizvoda, kao što je stranica kategorije ili rezultati pretraživanja.

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

Aktivirajte ovaj događaj kada korisnik klikne na određeni proizvod iz popisa kako bi ga pregledao.

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

Aktivirajte ovaj događaj kada korisnik dođe na stranicu s detaljima proizvoda.

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

Aktivirajte ovaj događaj kada korisnik doda jedan ili više proizvoda u košaricu.

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

Aktivirajte ovaj događaj kada korisnik ukloni proizvod iz košarice.

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

Aktivirajte ovaj događaj kada korisnik pregleda stranicu košarice.

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

Aktivirajte ovaj događaj kada korisnik spremi proizvod na listu želja za kasnije.

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

Aktivirajte ovaj događaj kada korisnik započne proces naplate.

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

Aktivirajte ovaj događaj kada korisnik odabere ili pošalje podatke o dostavi tijekom naplate.

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

Aktivirajte ovaj događaj kada korisnik odabere ili pošalje način plaćanja tijekom naplate.

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

Aktivirajte ovaj događaj kada je kupnja potvrđena. Uključite transaction_id, value, currency, tax, shipping i potpuni items niz.

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

Aktivirajte ovaj događaj kada se obradi povrat. Za potpuni povrat potreban je samo transaction_id. Za djelomične povrate uključite specifične stavke.

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

Aktivirajte ovaj događaj kada promotivni banner, karusel ili ponuda postanu vidljivi korisniku.

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

Aktivirajte ovaj događaj kada korisnik klikne na promociju kako bi saznao više ili iskoristio ponudu.

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

Migracija s Google Analyticsa

ClearAnalytics je dizajniran za rad uz ili kao zamjena za Google Analytics. Oba alata možete pokretati paralelno tijekom migracije bez ikakvih konflikata.

Pokretanje obje skripte paralelno

Dodajte ClearAnalytics skriptu uz postojeću Google Analytics oznaku. Obje skripte će pratiti neovisno bez međusobnog ometanja.

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

Kompatibilnost značajki

Evo kako se značajke ClearAnalyticsa preslikavaju na ekvivalente u Google Analyticsu:

Značajka	Google Analytics	ClearAnalytics
Pregledi stranica	`gtag('event', 'page_view')`	Automatski
Prilagođeni događaji	`gtag('event', ...)`	`window.ca('event')`
E-trgovina	`dataLayer.push()`	dataLayer kompatibilan
UTM kampanje	Automatski	Automatski
Sesije	Na temelju kolačića	Bez kolačića

Koraci migracije

Dodajte ClearAnalytics skriptu na svoju stranicu uz Google Analytics.
Omogućite presretanje dataLayera s data-ca-datalayer za hvatanje postojećih događaja e-trgovine.
Uspoređujte podatke na obje nadzorne ploče 2-4 tjedna kako biste verificirali točnost.
Kada budete zadovoljni, uklonite Google Analytics skriptu i uživajte u bržem postavljanju koje poštuje privatnost.

Podrška za SPA

ClearAnalytics automatski otkriva navigaciju na strani klijenta u jednostraničnim aplikacijama. Nije potrebna dodatna konfiguracija niti integracija s usmjerivačem.

Kako funkcionira

Skripta presreće pozive preglednikovog History API-ja za otkrivanje navigacije po stranicama:

history.pushState() pozivi se presreću i pokreću novi pregled stranice.
history.replaceState() pozivi se presreću i pokreću novi pregled stranice.
popstate događaji (naprijed/natrag u pregledniku) pokreću novi pregled stranice.

Kompatibilni okviri

Radi odmah s bilo kojim okvirom koji koristi History API za usmjeravanje:

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

Nisu potrebni dodaci za usmjerivač, životni ciklus zakačke ili ručni pozivi praćenja. Samo jednom dodajte script oznaku i svaka navigacija po stranicama automatski se prati.

Privatnost i usklađenost

ClearAnalytics je izgrađen s privatnošću u jezgri. Skripta za praćenje prikuplja samo anonimne, agregirane podatke. Osobni podaci nikada se ne pohranjuju niti prenose.

Bez kolačića

Skripta ne postavlja, ne čita niti ovisi o bilo kojim kolačićima preglednika. Nije potreban banner za pristanak na kolačiće.

Bez otisaka

Nikada ne kreiramo otiske preglednika. Ne koriste se tehnike otisaka putem canvasa, WebGL-a, fontova ili zvuka.

Bez pohrane IP adresa

IP adrese posjetitelja koriste se samo za anonimizirano hashiranje tijekom zahtjeva. Nikada se ne pohranjuju u bazi podataka.

Usklađenost s GDPR-om

Budući da se osobni podaci ne prikupljaju, ClearAnalytics ne potpada pod zahtjeve GDPR pristanka. Svi podaci ostaju u EU.

Kako anonimiziramo posjetitelje

Za brojanje jedinstvenih posjetitelja bez pohranjivanja osobnih podataka koristimo dnevno rotirajući anonimni hash:

IP adresa posjetitelja i User-Agent kombiniraju se s dnevno rotirajućom solju.
Ova kombinacija se hashira jednosmjernim SHA-256 algoritmom.
Sol se rotira svakih 24 sata, čineći nemoguće praćenje posjetitelja između dana.
Izvorna IP adresa nikada se ne pohranjuje niti bilježi.

Podaci koje skripta prikuplja

Sljedeća neosjetljiva podatkovna polja šalju se sa svakim događajem pregleda stranice:

Polje	Svrha
`pathname`	URL putanja stranice koja se posjećuje.
`referrer`	URL stranice s koje je posjetitelj došao, ako postoji.
`language`	Postavka jezika preglednika.
`screen_width / screen_height`	Dimenzije zaslona za klasifikaciju tipa uređaja.
`utm_*`	Parametri praćenja kampanje iz URL-a.
`duration`	Vrijeme provedeno na stranici u sekundama.

Budući da ClearAnalytics nikada ne prikuplja osobne podatke, ne trebate banner za pristanak na kolačiće, skočni prozor za privatnost niti mehanizam pristanka za korištenje naše skripte za praćenje. Usklađena je s GDPR-om, ePrivacy, PECR i CCPA iz kutije.