Web SDK

A Kixo Web SDK egyetlen beillesztett sorral automatikusan követi a kattintásokat, oldalmegtekintéseket, munkameneteket, hibákat, görgetési mélységet, webes teljesítménymutatókat, rage clickeket, dead clickeket és a hőtérképadatokat. A hálózati kérések monitorozása külön bekapcsolható. Natív ES modulként érhető el, és modern böngészőkben működik.

Telepítés

Scriptcímke (CDN)

Illeszd be a kódrészletet a záró </head> tag elé. Figyelj a(z) type="module" attribútumra — erre azért van szükség, mert az SDK ES-modul. A session replay külön kódrészre van bontva: egy verzióazonos rögzítő chunk csak akkor töltődik be, ha a replay már engedélyezve van, így kikapcsolt replay mellett az alap bundle kicsi marad.

html

<script
  type="module"
  src="https://cdn.kixo.io/kixo.min.js?project_id=YOUR_PROJECT_ID&api_key=YOUR_API_KEY">
</script>

Megjegyzés

Az SDK kiolvassa a(z) project_id és api_key értékét a script URL-ből, majd inicializálja magát. Ha inkább az alkalmazáskódban állítanád be az opciókat, hagyd el az URL-paramétereket, és helyette a(z) Kixo.init({...}) hívást használd — a globális Kixo objektum a modul betöltése után érhető el.

html

<script type="module" src="https://cdn.kixo.io/kixo.min.js"></script>
<script type="module">
  Kixo.init({
    projectId: 'YOUR_PROJECT_ID',
    apiKey:    'YOUR_API_KEY',
  });
</script>

npm

Ezt akkor használd, ha az opciókat nem a script URL-en keresztül, hanem az alkalmazáskódban szeretnéd beállítani. Ugyanazt a(z) Kixo API-t teszi elérhetővé, mint a CDN-beillesztés.

bash

npm install @kixo.io/web

import Kixo from '@kixo.io/web';

Kixo.init({
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY',
});

No-code platformok

Ha AI-alapú builderrel dolgozol, például Lovable, Bolt, v0 vagy Replit, illeszd be a script tag-es kódrészletet közvetlenül a builder chatjébe vagy kódbefecskendezési beállításaiba. A legtöbb builder támogatja, hogy szkripteket adj a webhely <head> részéhez.

Beállítás

A kétsoros beillesztés az alábbi helyi analitikai alapértékeket használja. A hálózati kérések monitorozása továbbra is külön bekapcsolható. A session replay szándékosan nem része a(z) Kixo.init() beállításainak: a bekapcsolás, a mintavételezés, az adatvédelmi beállítások, az időtartam és a rögzítési beállítások kizárólag a projekt dashboardján szabályozhatók.

Kixo.init({
  projectId: 'YOUR_PROJECT_ID',     // required
  apiKey:    'YOUR_API_KEY',         // required

  // Per-tracker toggles — all default to true except network.
  autoTrack: {
    pageViews:   true,
    clicks:      true,
    scrollDepth: true,
    sessions:    true,
    forms:       true,
    network:     false,     // opt in only when you need request telemetry
    errors:      true,
    performance: true,
    rageClicks:  true,
    deadClicks:  true,
  },

  // Heatmap recording (clicks + scroll on by default; mouse-move opt-in).
  heatmap: {
    enabled: true,
    clicks:  true,
    moves:   false,
    scroll:  true,
  },

});

Megjegyzés

A(z) Projekt által vezérelt konfiguráció. Dashboard-beállításokkal letilthatók a helyi analitikai követők. A replayhez egyáltalán nincs helyi pozitív bekapcsolójelző: a(z) Settings → Session replay alatt állítod be, az SDK pedig a következő konfigurációfrissítéskor átveszi a legfrissebb projektirányelvet.

Automatikusan követett események

Alapértelmezett beállításokkal a Kixo további kód nélkül automatikusan rögzíti az alábbi eseményeket:

page_view — minden navigáció (kezdeti betöltés + SPA route-váltások)
session_start / session_end
click — minden kattintás az elemszelektorral együtt
scroll_depth — 25 / 50 / 75 / 100%-os küszöbök
rage_click — ismételt kattintások ugyanazon az elemen
dead_click — kattintások nem interaktív elemeken
error — kezeletlen JavaScript-kivételek és promise-elutasítások
performance — oldalbetöltési és Web Vitals-mutatók (LCP, FCP, FID, CLS, INP, TTFB)
network_request — opcionális kérésidőzítés, ha a hálózati követés be van kapcsolva
heatmap_click / scroll — hőtérképadatok

A teljes listát itt találod: Eseményreferencia.

Egyedi események

Kixo.track()

Küldj egy egyedi eseményt opcionális propertykkel.

Kixo.track('purchase_completed', {
  product_id: 'SKU-123',
  amount: 49.99,
  currency: 'USD',
});

Tipizált eseménysegédek

Kényelmi réteg a(z) Kixo.track() fölött azokhoz az eseményekhez, amelyeket a Kixo név alapján ismer fel (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). A tipizált wrapperek fordítási időben ellenőrzik a propertyket, és egyetlen forrást adnak a kulcsnevekhez — a backend standardesemény-felismerője szó szerinti egyezést keres.

Kixo.trackPurchase({ amount: 49.99, currency: 'USD', productId: 'pro_yearly' });

Kixo.trackSubscriptionStart({
  plan: 'pro',
  amount: 9.99,
  currency: 'USD',
  interval: 'month',
});

Kixo.trackSignup({ method: 'google' });
Kixo.trackTrialStart({ plan: 'pro', days: 14 });
Kixo.trackCancel({ plan: 'pro', reason: 'too_expensive' });
Kixo.trackUpgrade({ fromPlan: 'free', toPlan: 'pro' });
Kixo.trackActivation({ event: 'first_post_published' });
Kixo.trackShare({ channel: 'twitter', contentId: 'post_123' });
Kixo.trackInvite({ channel: 'email', recipientCount: 5 });

Kixo.identify()

Kapcsold össze az aktuális eszközt egy ismert felhasználóval. A fenntartott szabványos propertykulcsok $ előtagot kapnak (Mixpanel-konvenció), így elkülönülnek a saját egyedi traitjeidtől, és felkerülnek a dashboard profil-oszlopaiba — a teljes, 37 kulcsból álló listát lásd alább: Standard propertykatalógus.

Kixo.identify('user_123', {
  $email:  'jane@example.com',     // identity
  $name:   'Jane Doe',              // identity
  $plan:   'pro',                   // subscription pack
  $lifetime_orders: 12,             // e-commerce pack
  signup_source: 'twitter_ad',      // custom trait
});

Kixo.setUserProperty() — felhasználó megjelölése szegmentáláshoz

Tetszőleges kulcs/érték attribútumokat adhatsz az aktuális felhasználóhoz. Az érték lehet szöveg, szám vagy logikai értékek — a logikai forma a legtisztább módja annak, hogy címke egy felhasználót későbbi célzáshoz szegmensekben, e-mail-kampányokban vagy chatlekérdezésekben.

// Tag a user as subscribed — instant segment "Subscribed users"
Kixo.setUserProperty('subscribe', true);

// Mark a VIP — used in campaign targeting + chat ("show me VIPs")
Kixo.setUserProperty('vip', true);

// Numeric and string values work too
Kixo.setUserProperty('plan_tier', 'enterprise');
Kixo.setUserProperty('lifetime_orders', 42);

// Bulk-set
Kixo.setUserProperties({ subscribe: true, plan_tier: 'enterprise' });

A propertyk újratöltés után is megmaradnak a(z) localStorage tárolóban, és automatikusan rákerülnek a következő eseményekre. A chatben ilyen promptokkal használhatod őket: „készíts e-mail-kampányt azoknak a felhasználóknak, akiknél a subscribe értéke true” — a Kixo automatikusan összeállít egy szegmenst, és elkészíti a sablonvázlatot. A(z) Kixo.reset() törli őket.

Kixo.group()

Kapcsold a felhasználót egy vállalathoz vagy szervezethez.

Kixo.group('company_456', {
  name: 'Acme Inc',
  plan: 'enterprise',
});

Kixo.reset()

Törli az identitást, a szuperpropertyket és a tartósított várólistát. Kijelentkezéskor hívd meg, hogy a későbbi események ne az előző felhasználóhoz legyenek társítva.

Kixo.reset();

Standard propertykatalógus

A fenntartott propertykulcsok $ előtagot kapnak, így elkülönülnek az egyedi traitjeidtől. A Kixo katalógusa 37 kulcsot tartalmaz: 3 univerzális csomagban (identity, geo, lifecycle) és 5 B2B vertikális csomagban (subscription, e-commerce, media, marketplace, loyalty). Azokat állítsd be, amelyek a termékedre vonatkoznak — a dashboard ehhez igazodik, és csak a kitöltött csomagokat jeleníti meg.

Azonosítás

Mindig releváns. A profilfejléc oszlopait állítja be.

Kulcs	Típus	Leírás
`$email`	sztring	Elsődleges e-mail-cím; gyakran ez az identitások összefűzésének kulcsa.
`$phone`	sztring	E.164 telefonszám.
`$name`	sztring	Teljes megjelenített név.
`$first_name`	sztring	Keresztnév.
`$last_name`	sztring	Vezetéknév.
`$avatar_url`	sztring	A felhasználó avatarképének teljes URL-je.

Földrajzi adatok

Földrajzi kontextus.

Kulcs	Típus	Leírás
`$country`	sztring	ISO 3166 szerinti országkód.
`$city`	sztring	A város neve.
`$region`	sztring	Állam vagy tartomány.
`$timezone`	sztring	IANA időzóna, például `America/Los_Angeles`.
`$language`	sztring	IETF tag, például `en` vagy `ru-RU`.
`$locale`	sztring	Teljes nyelvi és területi azonosító.

Életciklus

Mikor láttuk.

Kulcs	Típus	Leírás
`$created`	ISO8601	A regisztráció vagy fióklétrehozás időpontja.
`$last_seen`	ISO8601	Utolsó aktivitás időpontja.

Előfizetés

Állítsd be, ha a terméked csomagokat használ.

Kulcs	Típus	Leírás
`$plan`	sztring	Csomag slugja — `free`, `pro`, `enterprise`.
`$subscription_status`	sztring	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	A jelenlegi próbaidőszak lejárata.
`$mrr`	szám	Havi ismétlődő árbevétel a fiók pénznemében.
`$subscription_started`	ISO8601	A jelenlegi előfizetés kezdete.

E-kereskedelem

Állítsd be, ha termékeket értékesítetek.

Kulcs	Típus	Leírás
`$lifetime_orders`	szám	A teljesített rendelések száma.
`$lifetime_revenue`	szám	Összes költés.
`$aov`	szám	Átlagos rendelési érték.
`$last_purchase`	ISO8601	Legutóbbi sikeres vásárlás.
`$first_purchase`	ISO8601	Első sikeres vásárlás.
`$cart_abandoned_count`	szám	Kosárelhagyások teljes száma.

Média

Állítsd be, ha tartalmat publikáltok.

Kulcs	Típus	Leírás
`$content_tier`	sztring	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV-karaktersorozat vagy tömb	A felhasználó által követett kategóriák.
`$watch_time_total`	szám	Összesített megtekintési idő másodpercben.
`$last_played`	ISO8601	Legutóbbi lejátszásindítás.

Piactér

Állítsd be, ha a terméked kétoldalú platform.

Kulcs	Típus	Leírás
`$seller_tier`	sztring	Eladói oldali csomag slugja.
`$buyer_tier`	sztring	A vevőoldali csomag slugja.
`$listings_count`	szám	A felhasználó aktív saját listázásai.
`$reviews_count`	szám	A felhasználó által kapott értékelések.
`$verified`	logikai érték	KYC-állapot.

Hűségprogram

Állítsd be, ha elköteleződési vagy jutalmazási programot használtok.

Kulcs	Típus	Leírás
`$loyalty_points`	szám	Az aktuálisan beváltható pontok egyenlege.
`$vip_level`	sztring	VIP csomag slugja.
`$referral_count`	szám	A felhasználóhoz jóváírt sikeres ajánlások száma.

Tipp

Nem illik rád egyik minta sem? Egyedi traitekhez használj sima kulcsokat. Ezek a dashboard Custom Traits paneljén jelennek meg anélkül, hogy teleszórnák a profil-oszlopokat. A fenti 5 vertikális csomag irányadó javaslat a leggyakoribb B2B mintákhoz — az ügyfélspecifikus elnevezéseknek (például shipping_plan) maradjon sima kulcsuk.

Super-properties

Munkamenetszintű kulcs-érték párok, amelyek automatikusan rákerülnek minden kimenő eseményre. Ezek nem azonosak a(z) identify() traitjeivel, amelyek az identitást írják le; a super-properties a munkamenet kontextusát hordozzák — például az aktív A/B variánst, a buildváltozatot, az engedélyezett feature flageket vagy az affiliate hivatkozást. Újratöltés után is megmaradnak a(z) localStorage tárolóban; a(z) reset() törli őket. Kulcsütközésnél a(z) track() hívásban megadott eseményszintű properties mindig elsőbbséget élvez.

Kixo.setSuperProperty('build_flavor', 'beta');
Kixo.setSuperProperties({ ab_variant: 'B', referrer_campaign: 'autumn-launch' });

// Sugar for A/B tracking — keys as 'experiment_<id>' so backend
// can run direct WHERE filters on experiment analysis.
Kixo.setExperimentVariant('checkout_v2', 'variant_a');

Kixo.unsetSuperProperty('build_flavor');
Kixo.clearSuperProperties();

Hőtérképek

A hőtérképrögzítés alapértelmezetten be van kapcsolva — a kattintásokat és a görgetési mélységet is 100%-os mintavételezéssel rögzíti. Az egérmozgás külön engedélyezhető (nagy adatmennyiség; oldalanként kapcsold be, ha valóban hasznos).

Kixo.init({
  projectId: 'YOUR_PROJECT_ID',
  apiKey:    'YOUR_API_KEY',
  heatmap:   { moves: true },  // turn on full-resolution mouse-move
});

Munkamenet-visszajátszás

A session replay rrweb DOM-pillanatképet és mutációs eseménysort rögzít, hogy a dashboard az oldalt az eseménysor mellett visszatekerhető munkamenetként tudja rekonstruálni. Ez DOM-alapú rekonstrukció, nem képernyővideó-felvétel. A Replay alapértelmezetten ki van kapcsolva. A projektben a(z) Vezérlőpult → Beállítások → Munkamenet-visszajátszás alatt kapcsolhatod be; ehhez nem kell módosítani az alkalmazáskódot. Bekapcsolás után a rögzítő egy külön, verzióhoz illesztett chunkból töltődik be.

Megjegyzés

A dashboard a hiteles forrás. Itt állíthatod be az Enable replay, a Mask inputs, a maximális időtartam és a speciális rögzítési vezérlőket. A(z) captureOnCellular ugyanebben a projektirányelvben van tárolva iOS és Android esetén is; a böngészők nem adnak megbízható jelzést arról, hogy Wi‑Fi-t vagy mobilhálózatot használnak, ezért a Web SDK ezt a csak natív korlátozást jelzi, de figyelmen kívül hagyja.

Mit maszkolunk

A Replay úgy készült, hogy biztonságosan be lehessen kapcsolni. Az érzékeny tartalmat három, alapértelmezetten aktív védelmi réteg óvja:

A beviteli mezők maszkolását a projekt szabályozza — ha a Dashboard Beviteli mezők maszkolása beállítása be van kapcsolva — ez az alapértelmezés — a begépelt karaktereket a böngésző még elküldés előtt csillagokra cseréli. Csak konkrét, alacsony érzékenységű esetben kapcsold ki; az azonosításhoz, hitelesítéshez és fizetéshez tartozó mezők így is maszkolva maradnak.
A(z) A(z) data-kixo-mask attribútum kizár egy elemet a teljes részfájával együtt. Tedd rá minden olyan konténerre, amely személyes vagy bizalmas tartalmat tartalmazhat; a visszajátszásban helyőrző jelenik meg, nem a részfa szövege vagy DOM-tartalma.
html
```
<div data-kixo-mask>
  
  
</div>
```
Az érzékeny mezőket mindig maszkoljuk. — a jelszónak, kártyaszámnak, CVV-nek, SSN-nek, titoknak vagy tokennek látszó mezőket a rendszer mindig maszkolja a type, name, id vagy autocomplete alapján, akkor is, ha a projekt Beviteli mezők maszkolása beállítása ki van kapcsolva. A látható szöveg és a szerializált DOM-attribútumok feltöltés előtt a Kixo PII-szűrőjén is átmennek.

Adatgyűjtés

Az SDK rögzíti az integrációs és projektbeállításokban engedélyezett trackereket, valamint az alkalmazásod által küldött eseményeket és propertyket.

Hová kerülnek a felvételek

Az SDK gzip-pel tömöríti az rrweb-eseményeket méretkorlátos szegmensekbe, projektszintű, aláírt feltöltési URL-t kér a Kixo-tól, majd ezeket a szegmenseket közvetlenül a replay-tárolóba tölti fel. A rekonstruált munkamenetet itt nyithatod meg: Visszajátszás → Munkamenetek; innen ugyanennek a munkamenetnek az analitikai eseménysora is elérhető.

Megjegyzés

A Replay elérhetősége a csomagodtól függ. Az, hogy a rendszer hány munkamenetet rögzít és őriz meg, a projektcsomagtól függ; alacsonyabb csomagoknál a Kixo így is rögzíti a könnyített munkamenet-metaadat adatokat, hogy a munkamenet megjelenjen a listákban és az analitikában.

Feature flagok

A flagértékeket futásidőben a(z) Kixo.getFeatureFlag() segítségével ellenőrizheted.

const variant = Kixo.getFeatureFlag('new_checkout');

if (variant === 'enabled') {
  showNewCheckout();
} else {
  showLegacyCheckout();
}

Kézbesítés és offline működés

Az SDK helyben sorba állítja az eseményeket, kötegekben küldi el őket, és átmeneti hibák esetén backoffos újrapróbálkozást végez. Ha a gyűjtést a projektbeállításokban szünetelteted, az új események addig nem mennek ki, amíg újra be nem kapcsolod a gyűjtést.

Diagnosztika

Csak olvasható állapotkép — hasznos, ha a fejlesztői eszközökben azt keresed, miért nem érkeznek az események.

const diag = Kixo.diagnostics();
console.log(diag);