Nyomkövetés és események dokumentáció

Minden, amire szüksége van a ClearAnalytics telepítéséhez a webhelyén, valamint az oldalmegtekintések, egyéni események, kattintási célok és e-kereskedelmi tranzakciók nyomon követéséhez.

Áttekintés

A ClearAnalytics két nyomkövető script változatot kínál. Válassza az igényeinek megfelelőt: egy minimális scriptet az alapvető oldalmegtekintés-analitikához, vagy egy teljesen felszerelt scriptet egyéni eseményekhez, kattintási célokhoz és e-kereskedelmi nyomkövetéshez.

Könnyű Script (ca.js)

A lehető legkönnyebb nyomkövető script. Tökéletes blogokhoz, landing oldalakhoz és olyan webhelyekhez, amelyeknek csak oldalmegtekintés-analitika kell.

ca.js < 1 KB

Automatikus oldalmegtekintés-nyomkövetés
Munkamenet időtartam és visszafordulási arány
UTM kampányparaméterek rögzítése
Single-page alkalmazás támogatás

Teljes Script (ca-events.js)

Minden, ami a könnyű scriptben van, plusz egyéni események, kattintási cél nyomkövetés, GA4 dataLayer elfogás és teljes e-kereskedelmi támogatás.

ca-events.js < 2 KB

Minden, ami a könnyű scriptben van
Egyéni események nyomkövetése window.ca()-n keresztül
Kattintási célok nyomkövetése data-ca-goal-on keresztül
GA4 dataLayer integráció
Teljes e-kereskedelmi esemény nyomkövetés

Telepítés

Adjon hozzá egyetlen script taget a webhelyéhez. Nincs szükség npm csomagokra, build eszközökre vagy konfigurációs fájlokra. A script aszinkron módon töltődik be és nulla hatással van az oldal teljesítményére.

HTML — Könnyű Script

Adja hozzá ezt a <head>-hez vagy a <body> végéhez minden oldalon. Automatikusan nyomon követi az oldalmegtekintéseket, a munkamenet időtartamot és az UTM paramétereket.

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

HTML — Teljes Script

Használja ezt a változatot, ha egyéni eseményekre, kattintási célokra vagy e-kereskedelmi nyomkövetésre van szüksége.

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

HTML — Teljes Script DataLayerrel

Adja hozzá a data-ca-datalayer attribútumot a GA4 dataLayer események automatikus elfogásához, beleértve az összes e-kereskedelmi eseményt.

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

WordPress

Adja hozzá a script taget a téma functions.php fájlján keresztül, vagy használjon fejléc/lábléc beszúró bővítményt.

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

React / Next.js

Használja a Next.js Script komponenst az optimális betöltéshez. A script bármely React keretrendszerrel működik.

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

Adja hozzá a scriptet a Nuxt konfigurációján keresztül vagy közvetlenül a HTML sablonjába egyszerű Vue alkalmazásokhoz.

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

Google Tag Manager

A scriptet a Google Tag Manageren keresztül is telepítheti egyéni HTML tag használatával.

Tag Type:   Custom HTML
Trigger:    All Pages

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

Amikor a GTM-et a data-ca-datalayer attribútummal használja, a ClearAnalytics automatikusan rögzíti az összes dataLayer eseményt, amelyeket a meglévő GTM tagek küldenek.

Egyéni események

Kövesse nyomon bármely felhasználói interakciót egyéni események küldésével opcionális metaadatokkal. Az egyéni események megjelennek a vezérlőpultján és célkiváltóként használhatók.

Teljes scriptet igényel (ca-events.js).

API aláírás

window.ca(eventName, properties?);

Paraméter	Típus	Leírás
`eventName`	string	Az esemény leíró neve (pl. 'signup', 'file_download').
`properties`	object	Opcionális objektum további metaadatokkal. JSON-ként szerializálva.

Példák

// Regisztráció nyomkövetése csomaginformációval

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

// Fájlletöltés nyomkövetése

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

// Videólejátszás nyomkövetése

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

// Belső keresés nyomkövetése

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

Kattintási cél nyomkövetés

Kövesse nyomon a gomb- és linkkattintásokat JavaScript írása nélkül. Adjon hozzá egy data-ca-goal attribútumot bármely HTML elemhez, és a kattintás automatikusan rögzítésre kerül.

Teljes scriptet igényel (ca-events.js).

Használat

Adja hozzá a data-ca-goal="goal-name" attribútumot bármely kattintható elemhez. Az attribútum értéke lesz a célazonosító a vezérlőpultján.

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

Hogyan működik

A script eseménydelegálást használ a document-en a hatékony kattintásérzékeléshez:

Kattintási esemény aktiválódik az oldal bármely pontján.
A script felfelé halad a DOM fában a kattintott elemtől, keresve a data-ca-goal attribútumot.
Ha megtalálja, kattintási eseményt küld a célnévvel mint szelektorral.

Kattintási célok megtekintése

A kattintási cél események a vezérlőpult Célok oldalán jelennek meg. Hozzon létre egy "Click" típusú célt, és párosítsa a HTML-ben használt data-ca-goal értékkel.

GA4 DataLayer integráció

Ha webhelye már küld eseményeket a Google Analytics dataLayer-be, a ClearAnalytics automatikusan el tudja fogni ezeket az eseményeket. Ez a legegyszerűbb migrációs út a GA4-ről.

Teljes scriptet igényel (ca-events.js).

DataLayer elfogás engedélyezése

Adja hozzá a data-ca-datalayer attribútumot a script taghez. Ez az opt-in megközelítés biztosítja, hogy a funkció csak akkor aktiválódik, amikor Ön kifejezetten engedélyezi.

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

Hogyan működik

Ha engedélyezve van, a script elfogja az összes dataLayer.push() hívást:

A felismert e-kereskedelmi események (purchase, add_to_cart stb.) e-kereskedelmi eseményként továbbítódnak.
Minden más egyéni esemény általános egyéni eseményként továbbítódik.
A GTM belső események (gtm.js, gtm.dom, gtm.load stb.) automatikusan kiszűrődnek.
A meglévő dataLayer bejegyzések az oldal betöltésekor feldolgozásra kerülnek; a jövőbeli hozzáadások valós időben kerülnek elfogásra.

Példa

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

Figyelmen kívül hagyott események

A következő GTM belső események automatikusan figyelmen kívül hagyásra kerülnek és nem jelennek meg a vezérlőpultján:

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

E-kereskedelmi nyomkövetés

Kövesse nyomon a teljes vásárlói utat a termékböngészéstől a vásárlásig és visszatérítésig. A ClearAnalytics támogatja mind a 14 standard e-kereskedelmi eseményt, ugyanazt a dataLayer formátumot használva, mint a GA4.

Teljes scriptet igényel (ca-events.js) a data-ca-datalayer attribútummal.

Az összes e-kereskedelmi esemény GA4-kompatibilis dataLayer.push() formátumot használ. Ha már rendelkezik GA4 e-kereskedelmi nyomkövetéssel, a ClearAnalytics automatikusan rögzíti ezeket az eseményeket nulla kódmódosítással.

Esemény	Leírás
`view_item_list`	A felhasználó terméklistát vagy keresési eredményeket tekint meg.
`select_item`	A felhasználó rákattint egy termékre a listában.
`view_item`	A felhasználó egy termékrészlet oldalt tekint meg.
`add_to_cart`	A felhasználó terméket ad a kosárhoz.
`remove_from_cart`	A felhasználó eltávolít egy terméket a kosárból.
`view_cart`	A felhasználó megtekinti a kosarat.
`add_to_wishlist`	A felhasználó terméket ad a kívánságlistájához.
`begin_checkout`	A felhasználó elindítja a fizetési folyamatot.
`add_shipping_info`	A felhasználó megadja a szállítási adatokat.
`add_payment_info`	A felhasználó megadja a fizetési adatokat.
`purchase`	A felhasználó befejez egy vásárlást.
`refund`	Teljes vagy részleges visszatérítés történik.
`view_promotion`	A felhasználó reklám bannert vagy ajánlatot lát.
`select_promotion`	A felhasználó rákattint egy promócióra.

view_item_list

Aktiválja ezt az eseményt, amikor a felhasználók terméklistát látnak, például kategóriaoldalt vagy keresési eredményeket.

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

Aktiválja ezt az eseményt, amikor a felhasználó rákattint egy adott termékre a listából annak megtekintéséhez.

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

Aktiválja ezt az eseményt, amikor a felhasználó egy termékrészlet oldalra érkezik.

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

Aktiválja ezt az eseményt, amikor a felhasználó egy vagy több terméket ad a kosárhoz.

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

Aktiválja ezt az eseményt, amikor a felhasználó eltávolít egy terméket a kosárból.

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

Aktiválja ezt az eseményt, amikor a felhasználó megtekinti a kosár oldalt.

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

Aktiválja ezt az eseményt, amikor a felhasználó elment egy terméket a kívánságlistájára későbbre.

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

Aktiválja ezt az eseményt, amikor a felhasználó elindítja a fizetési folyamatot.

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

Aktiválja ezt az eseményt, amikor a felhasználó kiválasztja vagy megadja a szállítási adatokat a fizetés során.

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

Aktiválja ezt az eseményt, amikor a felhasználó kiválasztja vagy megadja a fizetési módot a fizetés során.

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

Aktiválja ezt az eseményt, amikor a vásárlás megerősítésre kerül. Tartalmazza a transaction_id, value, currency, tax, shipping és a teljes items tömböt.

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

Aktiválja ezt az eseményt, amikor visszatérítés történik. Teljes visszatérítéshez csak a transaction_id szükséges. Részleges visszatérítéseknél adja meg a konkrét tételeket.

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

Aktiválja ezt az eseményt, amikor egy reklám banner, karusszel vagy ajánlat láthatóvá válik a felhasználó számára.

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

Aktiválja ezt az eseményt, amikor a felhasználó rákattint egy promócióra, hogy többet tudjon meg vagy kihasználja az ajánlatot.

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

Átállás a Google Analyticsről

A ClearAnalytics úgy lett tervezve, hogy a Google Analytics mellett vagy annak helyettesítőjeként működjön. A migráció során mindkét eszközt futtathatja párhuzamosan konfliktusok nélkül.

Mindkét Script párhuzamos futtatása

Adja hozzá a ClearAnalytics scriptet a meglévő Google Analytics tag mellé. Mindkét script függetlenül követ anélkül, hogy zavarná a másikat.

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

Funkció-kompatibilitás

Így feleltethetők meg a ClearAnalytics funkciói a Google Analytics megfelelőiknek:

Funkció	Google Analytics	ClearAnalytics
Oldalmegtekintések	`gtag('event', 'page_view')`	Automatikus
Egyéni események	`gtag('event', ...)`	`window.ca('event')`
E-kereskedelem	`dataLayer.push()`	dataLayer kompatibilis
UTM kampányok	Automatikus	Automatikus
Munkamenetek	Cookie-alapú	Cookie-mentes

Migrációs lépések

Adja hozzá a ClearAnalytics scriptet webhelyéhez a Google Analytics mellé.
Engedélyezze a dataLayer elfogást a data-ca-datalayer segítségével a meglévő e-kereskedelmi események rögzítéséhez.
Hasonlítsa össze az adatokat mindkét vezérlőpulton 2-4 hétig a pontosság ellenőrzéséhez.
Ha elégedett, távolítsa el a Google Analytics scriptet és élvezze a gyorsabb, adatvédelem-központú beállítást.

SPA támogatás

A ClearAnalytics automatikusan felismeri a kliensoldali navigációt single-page alkalmazásokban. Nincs szükség további konfigurációra vagy router integrációra.

Hogyan működik

A script elfogja a böngésző History API hívásait az oldalnavigáció felismeréséhez:

history.pushState() hívások elfogásra kerülnek és új oldalmegtekintést indítanak.
history.replaceState() hívások elfogásra kerülnek és új oldalmegtekintést indítanak.
popstate események (böngésző vissza/előre) új oldalmegtekintést indítanak.

Kompatibilis keretrendszerek

Azonnal működik bármely keretrendszerrel, amely a History API-t használja az útvonalkezeléshez:

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

Nem szükségesek router bővítmények, életciklus hook-ok vagy kézi nyomkövetési hívások. Egyszerűen adja hozzá a script taget egyszer, és minden oldalnavigáció automatikusan nyomon lesz követve.

Adatvédelem és megfelelőség

A ClearAnalytics az adatvédelemmel a középpontjában készült. A nyomkövető script csak anonim, összesített adatokat gyűjt. Személyes információ soha nem kerül tárolásra vagy továbbításra.

Nincsenek cookie-k

A script nem állít be, nem olvas és nem függ semmilyen böngésző cookie-tól. Nincs szükség cookie-hozzájárulási bannerre.

Nincs ujjlenyomat-azonosítás

Soha nem készítünk böngésző ujjlenyomatokat. Nem használunk canvas, WebGL, betűtípus vagy hang ujjlenyomat technikákat.

Nincs IP-tárolás

A látogatók IP-címeit csak anonimizált hash-elésre használjuk a kérés során. Soha nem kerülnek tárolásra az adatbázisban.

GDPR-kompatibilis

Mivel személyes adatokat nem gyűjtünk, a ClearAnalytics nem tartozik a GDPR hozzájárulási követelményei alá. Minden adat az EU-ban marad.

Hogyan anonimizáljuk a látogatókat

Az egyedi látogatók számlálásához személyes adatok tárolása nélkül naponta rotálódó anonim hash-t használunk:

A látogató IP-címe és User-Agent-je egy naponta rotálódó salt-tal kombinálódik.
Ezt a kombinációt egyirányú SHA-256 algoritmussal hash-eljük.
A salt 24 óránként rotálódik, lehetetlenné téve a látogatók napok közötti nyomon követését.
Az eredeti IP-cím soha nem kerül tárolásra vagy naplózásra.

A Script által gyűjtött adatok

A következő nem személyes adatmezők kerülnek elküldésre minden oldalmegtekintés eseményhez:

Mező	Cél
`pathname`	A meglátogatott oldal URL útvonala.
`referrer`	A hivatkozó oldal URL-je, ha van.
`language`	A böngésző nyelvi beállítása.
`screen_width / screen_height`	Képernyőméretek az eszköztípus osztályozásához.
`utm_*`	Kampány nyomkövető paraméterek az URL-ből.
`duration`	Az oldalon töltött idő másodpercben.

Mivel a ClearAnalytics soha nem gyűjt személyes adatokat, nincs szüksége cookie-hozzájárulási bannerre, adatvédelmi felugró ablakra vagy opt-in mechanizmusra a nyomkövető scriptünk használatához. Azonnal kompatibilis a GDPR-rel, az ePrivacy-vel, a PECR-rel és a CCPA-val.