Dokumentacija sledenja in dogodkov

Vse, kar potrebujete za namestitev ClearAnalytics na svojo spletno stran ter sledenje ogledom strani, prilagojenim dogodkom, ciljem klikov in transakcijam e-trgovine.

Pregled

ClearAnalytics ponuja dve različici sledilne skripte. Izberite tisto, ki ustreza vašim potrebam: minimalno skripto za osnovno analitiko ogledov strani ali polno skripto za prilagojene dogodke, cilje klikov in sledenje e-trgovini.

Lahka skripta (ca.js)

Najlažja možna sledilna skripta. Popolna za bloge, pristajalne strani in spletna mesta, ki potrebujejo le analitiko ogledov strani.

ca.js < 1 KB

Samodejno sledenje ogledom strani
Trajanje seje in stopnja odboja
Zajem parametrov UTM kampanj
Podpora za enostranske aplikacije

Polna skripta (ca-events.js)

Vse iz lahke skripte ter prilagojeni dogodki, sledenje ciljem klikov, zajem GA4 dataLayer in polna podpora e-trgovini.

ca-events.js < 2 KB

Vse iz lahke skripte
Sledenje prilagojenim dogodkom prek window.ca()
Sledenje ciljem klikov prek data-ca-goal
Integracija GA4 dataLayer
Polno sledenje dogodkom e-trgovine

Namestitev

Dodajte en sam skriptni element na svojo spletno stran. Brez npm paketov, brez orodij za gradnjo, brez konfiguracijskih datotek. Skripta se nalaga asinhrono in nima nobenega vpliva na zmogljivost strani.

HTML — Lahka skripta

Dodajte to v <head> ali na konec <body> na vsaki strani. Samodejno sledi ogledom strani, trajanju seje in UTM parametrom.

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

HTML — Polna skripta

Uporabite to različico, če potrebujete prilagojene dogodke, cilje klikov ali sledenje e-trgovini.

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

HTML — Polna skripta z DataLayer

Dodajte atribut data-ca-datalayer za samodejni zajem dogodkov GA4 dataLayer, vključno z vsemi dogodki e-trgovine.

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

WordPress

Dodajte skriptni element prek datoteke functions.php vaše teme ali uporabite vtičnik za vstavljanje v glavo/nogo.

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

React / Next.js

Uporabite komponento Script iz Next.js za optimalno nalaganje. Skripta deluje s katerim koli ogrodjem React.

// 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 skripto prek konfiguracije Nuxt ali neposredno v HTML predlogo za navadne aplikacije Vue.

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

Google Tag Manager

Skripto lahko namestite tudi prek Google Tag Managerja z uporabo oznake po meri HTML.

Tag Type:   Custom HTML
Trigger:    All Pages

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

Pri uporabi GTM z atributom data-ca-datalayer bo ClearAnalytics samodejno zajel vse dogodke dataLayer, ki jih pošiljajo vaše obstoječe oznake GTM.

Prilagojeni dogodki

Sledite kateri koli interakciji uporabnika s pošiljanjem prilagojenih dogodkov z izbirnimi metapodatki. Prilagojeni dogodki se pojavijo na vaši nadzorni plošči in jih je mogoče uporabiti kot sprožilce ciljev.

Zahteva polno skripto (ca-events.js).

Podpis API

window.ca(eventName, properties?);

Parameter	Tip	Opis
`eventName`	string	Opisno ime za dogodek (npr. 'signup', 'file_download').
`properties`	object	Izbirni objekt z dodatnimi metapodatki. Serializiran kot JSON.

Primeri

// Sledite registraciji z informacijami o paketu

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

// Sledite prenosu datoteke

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

// Sledite predvajanju videoposnetka

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

// Sledite notranjemu iskanju

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

Sledenje ciljem klikov

Sledite klikom na gumbe in povezave brez pisanja JavaScripta. Dodajte atribut data-ca-goal kateremu koli HTML elementu in klik bo samodejno zabeležen.

Zahteva polno skripto (ca-events.js).

Uporaba

Dodajte data-ca-goal="ime-cilja" kateremu koli klikljivemu elementu. Vrednost atributa postane identifikator cilja na vaši nadzorni 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 deluje

Skripta uporablja delegacijo dogodkov na dokumentu za učinkovito zaznavanje klikov:

Dogodek klika se sproži kjerkoli na strani.
Skripta se pomika navzgor po drevesu DOM od kliknjenega elementa in išče atribut data-ca-goal.
Če ga najde, pošlje dogodek klika z imenom cilja kot selektorjem.

Pregledovanje ciljev klikov

Dogodki ciljev klikov se pojavijo na strani Cilji na vaši nadzorni plošči. Ustvarite cilj tipa "Klik" in ga povežite z vrednostjo data-ca-goal, ki ste jo uporabili v HTML.

Integracija GA4 DataLayer

Če vaše spletno mesto že pošilja dogodke v Google Analytics dataLayer, jih ClearAnalytics lahko samodejno zajame. To je najlažja pot za prehod z GA4.

Zahteva polno skripto (ca-events.js).

Omogočanje zajema DataLayer

Dodajte atribut data-ca-datalayer k skriptnemu elementu. Ta pristop opt-in zagotavlja, da se funkcija aktivira le, ko jo izrecno omogočite.

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

Kako deluje

Ko je omogočeno, skripta zajame vse klice dataLayer.push():

Prepoznani dogodki e-trgovine (purchase, add_to_cart itd.) se posredujejo kot dogodki e-trgovine.
Vsi drugi prilagojeni dogodki se posredujejo kot splošni prilagojeni dogodki.
Notranji dogodki GTM (gtm.js, gtm.dom, gtm.load itd.) so samodejno filtrirani.
Obstoječi vnosi dataLayer se obdelajo ob nalaganju strani; prihodnji klici push se zajamejo v realnem času.

Primer

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

Prezrti dogodki

Naslednji notranji dogodki GTM so samodejno prezrti in se ne bodo pojavili na vaši nadzorni plošči:

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

Sledenje e-trgovini

Sledite celotni poti stranke od brskanja po izdelkih do nakupa in vračila. ClearAnalytics podpira vseh 14 standardnih dogodkov e-trgovine v enakem formatu dataLayer kot GA4.

Zahteva polno skripto (ca-events.js) z atributom data-ca-datalayer.

Vsi dogodki e-trgovine uporabljajo format dataLayer.push(), združljiv z GA4. Če že imate implementirano sledenje e-trgovini GA4, bo ClearAnalytics te dogodke samodejno zajel brez kakršnih koli sprememb kode.

Dogodek	Opis
`view_item_list`	Uporabnik vidi seznam izdelkov ali rezultate iskanja.
`select_item`	Uporabnik klikne na izdelek v seznamu.
`view_item`	Uporabnik si ogleda stran s podrobnostmi izdelka.
`add_to_cart`	Uporabnik doda izdelek v nakupovalno košarico.
`remove_from_cart`	Uporabnik odstrani izdelek iz košarice.
`view_cart`	Uporabnik si ogleda nakupovalno košarico.
`add_to_wishlist`	Uporabnik doda izdelek na seznam želja.
`begin_checkout`	Uporabnik začne postopek blagajne.
`add_shipping_info`	Uporabnik pošlje podatke o dostavi.
`add_payment_info`	Uporabnik pošlje podatke o plačilu.
`purchase`	Uporabnik zaključi nakup.
`refund`	Obdelano je celotno ali delno vračilo.
`view_promotion`	Uporabnik vidi promocijsko pasico ali ponudbo.
`select_promotion`	Uporabnik klikne na promocijo.

view_item_list

Sprožite ta dogodek, ko uporabniki vidijo seznam izdelkov, kot je stran kategorije ali rezultati iskanja.

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

Sprožite ta dogodek, ko uporabnik klikne na določen izdelek s seznama, da si ga ogleda.

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

Sprožite ta dogodek, ko uporabnik pride na stran s podrobnostmi izdelka.

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

Sprožite ta dogodek, ko uporabnik doda enega ali več izdelkov v nakupovalno košarico.

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

Sprožite ta dogodek, ko uporabnik odstrani izdelek 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

Sprožite ta dogodek, ko si uporabnik ogleda stran nakupovalne 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

Sprožite ta dogodek, ko uporabnik shrani izdelek na seznam želja za pozneje.

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

Sprožite ta dogodek, ko uporabnik začne postopek blagajne.

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

Sprožite ta dogodek, ko uporabnik izbere ali pošlje podatke o dostavi med blagajno.

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

Sprožite ta dogodek, ko uporabnik izbere ali pošlje način plačila med blagajno.

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

Sprožite ta dogodek, ko je nakup potrjen. Vključite transaction_id, value, currency, tax, shipping in celotno polje 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

Sprožite ta dogodek, ko je obdelano vračilo. Za celotno vračilo je potreben samo transaction_id. Za delna vračila vključite specifične izdelke.

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

Sprožite ta dogodek, ko promocijska pasica, vrtiljak ali ponudba postane vidna uporabniku.

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

Sprožite ta dogodek, ko uporabnik klikne na promocijo, da izve več ali izkoristi ponudbo.

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

Prehod z Google Analytics

ClearAnalytics je zasnovan za delo vzporedno z Google Analytics ali kot njegova zamenjava. Obe orodji lahko poganjate vzporedno med prehodom brez konfliktov.

Poganjanje obeh skript vzporedno

Dodajte skripto ClearAnalytics poleg obstoječe oznake Google Analytics. Obe skripti bosta sledili neodvisno brez medsebojnega motenja.

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

Združljivost funkcij

Tako se funkcije ClearAnalytics ujemajo z ustreznimi funkcijami Google Analytics:

Funkcija	Google Analytics	ClearAnalytics
Ogledi strani	`gtag('event', 'page_view')`	Samodejno
Prilagojeni dogodki	`gtag('event', ...)`	`window.ca('event')`
E-trgovina	`dataLayer.push()`	združljiv z dataLayer
UTM kampanje	Samodejno	Samodejno
Seje	Na osnovi piškotkov	Brez piškotkov

Koraki prehoda

Dodajte skripto ClearAnalytics na svojo stran poleg Google Analytics.
Omogočite zajem dataLayer z data-ca-datalayer za zajem obstoječih dogodkov e-trgovine.
Primerjajte podatke v obeh nadzornih ploščah 2-4 tedne za preverjanje natančnosti.
Ko ste zadovoljni, odstranite skripto Google Analytics in uživajte v hitrejši nastavitvi, ki daje prednost zasebnosti.

Podpora za SPA

ClearAnalytics samodejno zazna navigacijo na strani odjemalca v enostranskih aplikacijah. Dodatna konfiguracija ali integracija z usmerjevalnikom ni potrebna.

Kako deluje

Skripta zajame klice History API brskalnika za zaznavanje navigacije po straneh:

history.pushState() klici so zajeti in sprožijo nov ogled strani.
history.replaceState() klici so zajeti in sprožijo nov ogled strani.
popstate dogodki (gumba nazaj/naprej brskalnika) sprožijo nov ogled strani.

Združljiva ogrodja

Deluje brez dodatnih nastavitev s katerim koli ogrodjem, ki uporablja History API za usmerjanje:

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

Vtičniki usmerjevalnika, kljuke življenjskega cikla ali ročni klici sledenja niso potrebni. Preprosto dodajte skriptni element enkrat in vsaka navigacija po strani se samodejno sledi.

Zasebnost in skladnost

ClearAnalytics je zgrajen z zasebnostjo v jedru. Sledilna skripta zbira le anonimne, združene podatke. Osebni podatki se nikoli ne shranijo ali prenesejo.

Brez piškotkov

Skripta ne nastavi, ne bere in ni odvisna od piškotkov brskalnika. Pasica za soglasje s piškotki ni potrebna.

Brez prstnih odtisov

Nikoli ne ustvarjamo prstnih odtisov brskalnika. Ne uporabljamo tehnik prstnih odtisov canvas, WebGL, pisav ali zvoka.

Brez shranjevanja IP

IP naslovi obiskovalcev se uporabljajo le za anonimizirano zgoščevanje med zahtevo. Nikoli se ne shranijo v podatkovni bazi.

Skladno z GDPR

Ker se osebni podatki ne zbirajo, ClearAnalytics ne spada pod zahteve GDPR za soglasje. Vsi podatki ostanejo v EU.

Kako anonimiziramo obiskovalce

Za štetje edinstvenih obiskovalcev brez shranjevanja osebnih podatkov uporabljamo dnevno rotirajoč anonimni zgoščeni niz:

IP naslov obiskovalca in User-Agent sta združena z dnevno rotirajočo soljo.
Ta kombinacija je zgoščena z enosmernim algoritmom SHA-256.
Sol se zamenja vsakih 24 ur, kar onemogoča sledenje obiskovalcem med dnevi.
Izvirni IP naslov se nikoli ne shrani ali zabeleži v dnevnik.

Podatki, ki jih zbira skripta

Naslednja neosebna podatkovna polja se pošljejo z vsakim dogodkom ogleda strani:

Polje	Namen
`pathname`	URL pot obiskane strani.
`referrer`	URL napotitvene strani, če obstaja.
`language`	Jezikovna nastavitev brskalnika.
`screen_width / screen_height`	Dimenzije zaslona za razvrstitev vrste naprave.
`utm_*`	Parametri sledenja kampanjam iz URL-ja.
`duration`	Čas, preživet na strani, v sekundah.

Ker ClearAnalytics nikoli ne zbira osebnih podatkov, ne potrebujete pasice za soglasje s piškotki, pojavnega okna o zasebnosti ali mehanizma opt-in za uporabo naše sledilne skripte. Skladna je z GDPR, ePrivacy, PECR in CCPA brez dodatnih nastavitev.