Web SDK

Kixo Web SDK po vložení jedného riadku kódu automaticky sleduje kliknutia, zobrazenia stránok, relácie, chyby, hĺbku posunu, web vitals, rage clicky, dead clicky a dáta pre heatmapy. Monitorovanie sieťových požiadaviek je dostupné ako voliteľné nastavenie. Distribuuje sa ako natívny ES modul a funguje v moderných prehliadačoch.

Inštalácia

Script tag (CDN)

Úryvok vložte pred ukončovaciu značku </head>. Všimnite si type="module" — je povinné, pretože SDK je ES modul. Session replay je rozdelený do samostatného recorder chunku zladeného s verziou, ktorý sa načíta až po zapnutí replayu, takže základný bundle zostáva pri vypnutom replayi malý.

html

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

Poznámka

SDK načíta project_id a api_key z URL skriptu a samo sa inicializuje. Ak chcete možnosti nastavovať v aplikačnom kóde, odstráňte parametre z URL a namiesto toho zavolajte Kixo.init({...}) — globálny objekt Kixo je k dispozícii po načítaní modulu.

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

Použite toto riešenie, keď chcete možnosti nastavovať v aplikačnom kóde namiesto cez URL skriptu. Sprístupňuje rovnaké Kixo API ako vloženie z CDN.

bash

npm install @kixo.io/web

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

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

No-Code platformy

Ak web vytvárate pomocou AI nástroja ako Lovable, Bolt, v0 alebo Replit, vložte snippet so script tagom priamo do chatu nástroja alebo do nastavení na vkladanie kódu. Väčšina týchto nástrojov podporuje pridanie skriptov do <head> vášho webu.

Konfigurácia

Dvojriadkové vloženie používa nižšie uvedené lokálne predvolené nastavenia analytiky. Monitorovanie požiadaviek zostáva voliteľné. Session replay zámerne nie je súčasťou Kixo.init(): jeho zapnutie, vzorkovanie, súkromie, trvanie aj nastavenia záznamu sa berú iba z projektového dashboardu.

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

});

Poznámka

Konfigurácia riadená projektom. V nastaveniach dashboardu môžete vypnúť lokálne analytické trackery. Replay nemá žiadny lokálny prepínač na zapnutie: nastavíte ho v Settings → Session replay a SDK pri ďalšom obnovení konfigurácie prevezme aktuálnu politiku projektu.

Automaticky sledované udalosti

S predvolenou konfiguráciou Kixo automaticky zachytáva tieto udalosti bez ďalšieho kódu:

page_view — každá navigácia (prvé načítanie + zmeny trás v SPA)
session_start / session_end
click — všetky kliknutia podľa selektora prvku
scroll_depth — prahy 25 / 50 / 75 / 100 %
rage_click — opakované kliknutia na ten istý prvok
dead_click — kliknutia na neinteraktívne prvky
error — nezachytené výnimky JavaScript + zamietnuté promises
performance — metriky načítania stránky a Web Vitals (LCP, FCP, FID, CLS, INP, TTFB)
network_request — voliteľné časovanie requestov pri zapnutom sledovaní siete
heatmap_click / scroll — údaje pre heatmapu

Úplný zoznam nájdete v Prehľad udalostí.

Vlastné udalosti

Kixo.track()

Odošlite vlastnú udalosť s voliteľnými vlastnosťami.

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

Typované pomocné funkcie pre udalosti

Nadstavba nad Kixo.track() pre udalosti, ktoré Kixo rozpoznáva podľa názvu (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Typované obaly prinášajú validáciu vlastností pri kompilácii a jeden zdroj pravdy pre názvy kľúčov — backendový detektor štandardných udalostí porovnáva názvy doslova.

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

Priraďte aktuálne zariadenie známemu používateľovi. Vyhradené štandardné kľúče vlastností majú prefix $ (konvencia Mixpanel), takže sú oddelené od vašich vlastných traitov a premietnu sa do profilových stĺpcov v dashboarde — úplný zoznam 37 kľúčov nájdete nižšie v Katalóg štandardných vlastností.

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() — označí používateľa na segmentáciu

Pridajte k aktuálnemu používateľovi ľubovoľné atribúty kľúč/hodnota. Hodnoty môžu byť reťazce, čísla alebo booleany — booleovská hodnota je najčistejší spôsob, ako používateľa štítok pre neskoršie cielenie v segmentoch, e-mailových kampaniach alebo chatových dopytoch.

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

Vlastnosti zostávajú uložené v localStorage aj po obnovení stránky a automaticky sa pripájajú k ďalším udalostiam. V chate ich môžete použiť v promptoch ako "vytvor e-mailovú kampaň pre používateľov, pre ktorých subscribe je true" — Kixo automaticky vytvorí segment aj návrh šablóny. Mažú sa pri Kixo.reset().

Kixo.group()

Priraďte používateľa k firme alebo organizácii.

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

Kixo.reset()

Vymaže identitu, super-properties aj trvalo uložený front. Volajte to pri odhlásení, aby sa ďalšie udalosti nepripisovali predchádzajúcemu používateľovi.

Kixo.reset();

Katalóg štandardných vlastností

Vyhradené kľúče vlastností majú prefix $, takže sú oddelené od vašich vlastných traits. Katalóg Kixo obsahuje 37 kľúčov v 3 univerzálnych balíkoch (identita, geo, životný cyklus) a 5 B2B vertikálnych balíkoch (predplatné, e-commerce, médiá, trhovisko, vernosť). Nastavte tie, ktoré sa hodia pre váš produkt — dashboard sa prispôsobí a zobrazí len balíky, ktoré vyplníte.

Identita

Vždy relevantné. Nastavuje stĺpce v hlavičke profilu.

Kľúč	Typ	Popis
`$email`	reťazec	Primárny e-mail, často používaný ako merge key pri spájaní identít.
`$phone`	reťazec	Telefónne číslo vo formáte E.164.
`$name`	reťazec	Celé zobrazované meno.
`$first_name`	reťazec	Krstné meno.
`$last_name`	reťazec	Priezvisko.
`$avatar_url`	reťazec	Úplná URL adresa avataru používateľa.

Geo

Geografický kontext.

Kľúč	Typ	Popis
`$country`	reťazec	Kód krajiny podľa ISO 3166.
`$city`	reťazec	Názov mesta.
`$region`	reťazec	Štát alebo provincia.
`$timezone`	reťazec	IANA zóna, napríklad `America/Los_Angeles`.
`$language`	reťazec	IETF tag, napríklad `en` alebo `ru-RU`.
`$locale`	reťazec	Úplný identifikátor locale.

Životný cyklus

Kedy sme ho videli.

Kľúč	Typ	Popis
`$created`	ISO8601	Čas registrácie alebo vytvorenia účtu.
`$last_seen`	ISO8601	Čas poslednej interakcie.

Predplatné

Nastavte, ak má váš produkt plány.

Kľúč	Typ	Popis
`$plan`	reťazec	Slug úrovne — `free`, `pro`, `enterprise`.
`$subscription_status`	reťazec	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Kedy vyprší aktuálne skúšobné obdobie.
`$mrr`	číslo	Mesačný opakovaný príjem v mene účtu.
`$subscription_started`	ISO8601	Kedy sa začalo aktuálne predplatné.

E-commerce

Nastavte, ak predávate produkty.

Kľúč	Typ	Popis
`$lifetime_orders`	číslo	Počet dokončených objednávok.
`$lifetime_revenue`	číslo	Celkové výdavky.
`$aov`	číslo	Priemerná hodnota objednávky.
`$last_purchase`	ISO8601	Čas posledného úspešného nákupu.
`$first_purchase`	ISO8601	Prvý úspešný nákup.
`$cart_abandoned_count`	číslo	Celkový počet opustení košíka.

Médiá

Nastavte, ak publikujete obsah.

Kľúč	Typ	Popis
`$content_tier`	reťazec	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV reťazec alebo pole	Kategórie, ktoré používateľ sleduje.
`$watch_time_total`	číslo	Celkový čas sledovania v sekundách.
`$last_played`	ISO8601	Čas posledného spustenia prehrávania.

Trhovisko

Nastavte, ak je váš produkt obojstranná platforma.

Kľúč	Typ	Popis
`$seller_tier`	reťazec	Slug úrovne na strane predajcu.
`$buyer_tier`	reťazec	Slug úrovne na strane kupujúceho.
`$listings_count`	číslo	Aktívne inzeráty, ktoré používateľ vlastní.
`$reviews_count`	číslo	Recenzie, ktoré používateľ získal.
`$verified`	boolean	Stav KYC.

Vernosť

Nastavte, ak používate vernostné alebo odmeňovacie programy.

Kľúč	Typ	Popis
`$loyalty_points`	číslo	Aktuálny zostatok bodov, ktoré možno uplatniť.
`$vip_level`	reťazec	Slug VIP úrovne.
`$referral_count`	číslo	Úspešné odporúčania pripísané tomuto používateľovi.

Tip

Nenašli ste svoj vzor? Pre vlastné traity použite kľúče bez prefixu. Zobrazia sa v paneli Custom Traits v dashboarde bez toho, aby zahltili profilové stĺpce. Päť vertikálnych balíkov vyššie je kvalifikovaný odhad najbežnejších tvarov v B2B — terminológia špecifická pre zákazníka, napríklad shipping_plan, zostáva bez prefixu.

Super-properties

Dvojice kľúč/hodnota na úrovni relácie, ktoré sa automaticky pripájajú ku každej odosielanej udalosti. Na rozdiel od traits v identify(), ktoré opisujú identitu, super-properties opisujú kontext relácie — aktívny A/B variant, variant buildu, zapnuté feature flagy či affiliate ref. Ukladajú sa v localStorage aj po obnovení stránky; mažú sa pri reset(). Ak sa kľúče prekrývajú, vlastnosti na úrovni udalosti z properties v track() majú vždy prednosť.

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();

Heatmapy

Záznam heatmapy je predvolene zapnutý — kliknutia aj hĺbka posunu sa vzorkujú na 100 %. Pohyb myši je voliteľný (objem dát je vysoký; zapínajte ho po stránkach, ak to dáva zmysel).

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

Replay relácií

Session replay zaznamenáva snímku DOM a tok mutácií z rrweb, aby dashboard vedel stránku zrekonštruovať ako prehrávateľnú reláciu popri slede udalostí. Ide o rekonštrukciu DOM, nie o videozáznam obrazovky. Replay je predvolene vypnuté. Zapnete ho pre projekt v Prehľad → Nastavenia → Prehrávanie relácií; bez zmeny kódu aplikácie. Po zapnutí sa recorder načíta zo samostatného chunku zladeného s verziou.

Poznámka

Dashboard je zdroj pravdy. Tu nastavíte Enable replay, Mask inputs, maximálnu dĺžku aj pokročilé voľby záznamu. captureOnCellular sa ukladá do rovnakej politiky projektu pre iOS a Android; prehliadače nesprístupňujú spoľahlivú informáciu o pripojení cez Wi‑Fi alebo mobilnú sieť, preto Web SDK toto obmedzenie z natívnych platforiem len nahlási a ignoruje.

Čo sa maskuje

Replay je navrhnutý tak, aby sa dal bezpečne zapnúť. Citlivý obsah chránia tri vrstvy a všetky sú predvolene zapnuté:

Maskovanie vstupov riadi projekt — keď je v dashboarde zapnuté nastavenie Maskovať vstupy (predvolené), napísané znaky sa ešte pred odoslaním z prehliadača nahradia hviezdičkami. Vypnite ho len pre konkrétny prípad s nízkou citlivosťou; polia identity, autentifikácie a platieb zostávajú maskované.
Atribút data-kixo-mask zablokuje prvok aj celý jeho podstrom. Pridajte ho na ľubovoľný kontajner, ktorý môže obsahovať osobné alebo dôverné údaje; v replayi sa zobrazí zástupný prvok, nie text ani obsah DOM z daného podstromu.
html
```
<div data-kixo-mask>
  
  
</div>
```
Citlivé polia sa maskujú vždy — vstupy, ktoré vyzerajú ako heslo, číslo karty, CVV, SSN, secret alebo token (podľa type, name, id alebo autocomplete), sa maskujú aj vtedy, keď je nastavenie projektu Maskovať vstupy vypnuté. Viditeľný text aj serializované atribúty DOM pred odoslaním prechádzajú cez PII sanitizér služby Kixo.

Zber dát

SDK zachytáva trackery zapnuté v integrácii a nastaveniach projektu, plus udalosti a vlastnosti, ktoré odosiela vaša aplikácia.

Kam sa ukladajú záznamy

SDK komprimuje udalosti rrweb pomocou gzipu do ohraničených segmentov, vyžiada si od Kixo podpísanú upload URL pre konkrétny projekt a tieto segmenty nahrá priamo do úložiska replay. Zrekonštruovanú reláciu otvoríte v Prehrávanie → Relácie; odkazuje aj na analytickú stopu tej istej relácie.

Poznámka

Replay závisí od vášho plánu. Koľko relácií sa zachytí a uchová, závisí od plánu projektu; pri nižších programoch Kixo stále zaznamenáva odľahčené údaje o relácii metadáta, aby sa relácia zobrazila v zoznamoch a analytike.

Feature flagy

Hodnoty flagov za behu skontrolujete cez Kixo.getFeatureFlag().

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

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

Doručovanie a správanie offline

SDK ukladá udalosti lokálne do frontu, odosiela ich v dávkach a pri dočasných zlyhaniach opakuje odoslanie s rastúcim odstupom. Ak je zber pozastavený v nastaveniach projektu, nové udalosti sa neodosielajú, kým zber znovu nepovolíte.

Diagnostika

Prehľad stavu iba na čítanie — hodí sa pri ladení typu „prečo mi netečú udalosti?“ v nástrojoch pre vývojárov.

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