Web SDK

Kixo Web SDK z enovrstičnim vklopom samodejno beleži klike, oglede strani, seje, napake, globino drsenja, web vitals, besne klike, mrtve klike in podatke za toplotne zemljevide. Spremljanje omrežnih zahtevkov je na voljo kot izbirna nastavitev. Na voljo je kot izvorni modul ES in deluje v sodobnih brskalnikih.

Namestitev

Oznaka script (CDN)

Izsek dodajte pred zaključno oznako </head>. Bodite pozorni na type="module" — obvezen je, ker je SDK modul ES. Session replay je razdeljen v ločen recorder chunk z usklajeno različico, ki se naloži šele po vklopu replaya, zato osnovni bundle ostane majhen, dokler je replay izklopljen.

html

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

Opomba

SDK iz URL-ja skripte prebere project_id in api_key ter se inicializira. Če želite možnosti nastaviti v kodi aplikacije, odstranite parametre iz URL-ja in namesto tega pokličite Kixo.init({...}) — globalni objekt Kixo je na voljo, ko se modul naloži.

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

Uporabite to, kadar želite možnosti nastaviti v kodi aplikacije namesto prek URL-ja skripte. Izpostavi isti API Kixo kot vklop prek CDN.

bash

npm install @kixo.io/web

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

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

Platforme brez kode

Če gradite z orodjem z podporo AI, kot so Lovable, Bolt, v0 ali Replit, izsek s script tag neposredno prilepite v klepet orodja ali v nastavitve za vnos kode. Večina takih orodij podpira dodajanje skript v <head> vašega spletnega mesta.

Konfiguracija

Dvovrstični vklop uporablja spodnje lokalne privzete nastavitve analitike. Spremljanje zahtevkov ostaja izbirno. Session replay namenoma ni del Kixo.init(): vklop, vzorčenje, zasebnost, trajanje in nastavitve zajema se določajo izključno v nadzorni plošči projekta.

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

});

Opomba

Nastavitve v Konfiguracija, ki jo določa projekt. Dashboard lahko izklopijo lokalne analitične sledilnike. Replay sploh nima lokalne potrditvene zastavice za vklop: nastavite ga v Settings → Session replay, SDK pa ob naslednji osvežitvi konfiguracije prevzame najnovejšo projektno politiko.

Samodejno zabeleženi dogodki

S privzeto konfiguracijo Kixo brez dodatne kode samodejno zajame te dogodke:

page_view — vsaka navigacija (začetno nalaganje + spremembe poti v SPA)
session_start / session_end
click — vsi kliki z izbirnikom elementa
scroll_depth — pragovi pri 25 / 50 / 75 / 100 %
rage_click — ponovljeni kliki na isti element
dead_click — kliki na neinteraktivne elemente
error — neujete izjeme JavaScript in zavrnitve promise-ov
performance — metrike nalaganja strani in Web Vitals (LCP, FCP, FID, CLS, INP, TTFB)
network_request — izbirno merjenje trajanja zahtevkov, ko je omogočeno sledenje omrežju
heatmap_click / scroll — podatki toplotnega zemljevida

Celoten seznam je v Referenca dogodkov.

Dogodki po meri

Kixo.track()

Pošljite dogodek po meri z neobveznimi lastnostmi.

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

Tipizirani pomočniki za dogodke

Priročna plast nad Kixo.track() za dogodke, ki jih Kixo prepozna po imenu (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Tipizirani ovojni klici prinesejo preverjanje lastnosti med prevajanjem in enoten vir resnice za imena ključev — strežniški prepoznavalnik standardnih dogodkov se ujema dobesedno.

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

Trenutno napravo povežite z znanim uporabnikom. Rezervirani standardni ključi lastnosti imajo predpono $ (konvencija Mixpanel), zato so ločeni od vaših lastnosti po meri in se prikažejo v stolpcih profila na nadzorni plošči — celoten seznam vseh 37 ključev je spodaj v Katalog standardnih lastnosti.

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() — uporabnika označi za segmentacijo

Trenutnemu uporabniku pripnite poljubne atribute ključ/vrednost. Vrednosti so lahko nizi, števila ali logične vrednosti — logična vrednost je najčistejši način, da uporabnika oznaka za poznejše ciljanje v segmentih, e-poštnih kampanjah ali poizvedbah v Chatu.

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

Lastnosti se shranijo v localStorage tudi po ponovnem nalaganju in se samodejno pripnejo naslednjim dogodkom. V klepetu jih lahko uporabite s pozivi, kot je "ustvari e-poštno kampanjo za uporabnike, pri katerih je subscribe nastavljen na true" — Kixo samodejno sestavi segment in pripravi osnutek predloge. Izbrišejo se ob Kixo.reset().

Kixo.group()

Uporabnika povežite s podjetjem ali organizacijo.

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

Kixo.reset()

Počisti identiteto, super-properties in trajno vrsto. To pokličite ob odjavi, da se naslednji dogodki ne pripišejo prejšnjemu uporabniku.

Kixo.reset();

Katalog standardnih lastnosti

Rezervirani ključi lastnosti imajo predpono $, zato so ločeni od vaših lastnosti po meri. Kixo vključuje 37 ključev v 3 univerzalnih paketih (identiteta, geo, življenjski cikel) in 5 B2B vertikalnih paketih (naročnine, e-trgovina, mediji, tržnica, zvestoba). Nastavite samo tiste, ki veljajo za vaš izdelek — nadzorna plošča se prilagodi in prikaže le pakete, ki jih uporabljate.

Identiteta

Vedno relevantno. Določa stolpce v glavi profila.

Ključ	Vrsta	Opis
`$email`	niz	Glavni e-poštni naslov, pogosto uporabljen kot merge key za povezovanje identitete.
`$phone`	niz	Telefonska številka v zapisu E.164.
`$name`	niz	Polno prikazno ime.
`$first_name`	niz	Ime.
`$last_name`	niz	Priimek.
`$avatar_url`	niz	Poln URL do uporabnikove slike avatarja.

Geo

Geografski kontekst.

Ključ	Vrsta	Opis
`$country`	niz	Koda države po standardu ISO 3166.
`$city`	niz	Ime mesta.
`$region`	niz	Zvezna država ali provinca.
`$timezone`	niz	IANA cona, na primer `America/Los_Angeles`.
`$language`	niz	Oznaka IETF, na primer `en` ali `ru-RU`.
`$locale`	niz	Polni identifikator področnih nastavitev.

Življenjski cikel

Kdaj smo ga zaznali.

Ključ	Vrsta	Opis
`$created`	ISO8601	Čas prijave ali ustvaritve računa.
`$last_seen`	ISO8601	Čas zadnje interakcije.

Naročnina

Nastavite, če ima vaš izdelek pakete.

Ključ	Vrsta	Opis
`$plan`	niz	Slug paketa — `free`, `pro`, `enterprise`.
`$subscription_status`	niz	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Kdaj se izteče trenutno poskusno obdobje.
`$mrr`	število	Mesečni ponavljajoči se prihodek v valuti računa.
`$subscription_started`	ISO8601	Kdaj se je začela trenutna naročnina.

E-trgovina

Nastavite, če prodajate izdelke.

Ključ	Vrsta	Opis
`$lifetime_orders`	število	Število zaključenih naročil.
`$lifetime_revenue`	število	Skupna poraba.
`$aov`	število	Povprečna vrednost naročila.
`$last_purchase`	ISO8601	Zadnji uspešen nakup.
`$first_purchase`	ISO8601	Prvi uspešen nakup.
`$cart_abandoned_count`	število	Skupno število opuščenih košaric.

Mediji

Nastavite, če objavljate vsebine.

Ključ	Vrsta	Opis
`$content_tier`	niz	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV niz ali polje	Kategorije, ki jim uporabnik sledi.
`$watch_time_total`	število	Skupni čas gledanja v sekundah.
`$last_played`	ISO8601	Zadnji začetek predvajanja.

Tržnica

Nastavite, če je vaš izdelek dvostranska platforma.

Ključ	Vrsta	Opis
`$seller_tier`	niz	Slug paketa na strani prodajalca.
`$buyer_tier`	niz	Slug paketa na strani kupca.
`$listings_count`	število	Aktivni oglasi, ki jih ima uporabnik v lasti.
`$reviews_count`	število	Ocene, ki jih je uporabnik prejel.
`$verified`	logična vrednost	Stanje KYC.

Zvestoba

Nastavite, če uporabljate programe angažiranja in nagrajevanja.

Ključ	Vrsta	Opis
`$loyalty_points`	število	Trenutno stanje točk za unovčenje.
`$vip_level`	niz	Slug ravni VIP.
`$referral_count`	število	Uspešne napotitve, pripisane temu uporabniku.

Namig

Ne najdete svojega vzorca? Za lastnosti po meri uporabite navadne ključe. Prikažejo se v razdelku Custom Traits na nadzorni plošči, ne da bi obremenjevali stolpce profila. Zgornjih 5 vertikalnih paketov je premišljen nabor najpogostejših B2B oblik — izrazje, značilno za posamezno stranko, kot je shipping_plan, ostane brez predpone.

Superlastnosti

Pari ključ–vrednost na ravni seje, ki se samodejno pripnejo vsakemu poslanemu dogodku. Za razliko od lastnosti identify(), ki opisujejo identiteto, superlastnosti opisujejo kontekst seje — aktivno različico A/B, različico gradnje, vključene zastavice funkcij in partnerski vir. Shranijo se v localStorage tudi po ponovnem nalaganju in se izbrišejo ob reset(). Ob trku ključev imajo vedno prednost lastnosti dogodka properties v track().

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

Toplotni zemljevidi

Snemanje toplotnih zemljevidov je privzeto vklopljeno — kliki in globina drsenja, oboje s 100-% vzorčenjem. Premikanje miške je izbirno (velik obseg podatkov; vklopite ga za posamezno stran, če je smiselno).

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

Posnetek seje

Session replay shranjuje rrweb-posnetek DOM in tok mutacij, da lahko nadzorna plošča stran rekonstruira kot sejo, po kateri se lahko premikate, skupaj s sledjo dogodkov. To je rekonstrukcija DOM, ne videoposnetek zaslona. Replay je privzeto izklopljeno. Omogočite ga za projekt v Nadzorna plošča → Nastavitve → Posnetki sej; sprememba kode aplikacije ni potrebna. Ko ga vklopite, se snemalnik prenese iz ločenega paketa z ujemajočo se različico.

Opomba

Nadzorna plošča je vir resnice. Tam nastavite Enable replay, Mask inputs, največje trajanje in napredne možnosti zajema. captureOnCellular je shranjen v isti projektni politiki za iOS in Android; brskalniki ne omogočajo zanesljivega razlikovanja med Wi‑Fi in mobilnim omrežjem, zato Web SDK to omejitev, ki velja samo za izvorne aplikacije, zabeleži in prezre.

Kaj se maskira

Replay je zasnovan tako, da ga lahko varno vklopite. Občutljivo vsebino privzeto ščitijo tri plasti:

Maskiranje vnosov določa projekt — dokler je v Dashboard vklopljena nastavitev Maskiraj vnose (privzeto), se vtipkani znaki še pred odhodom iz brskalnika zamenjajo z zvezdicami. Izklopite jo le za točno določen primer z nizko stopnjo občutljivosti; polja za identiteto, prijavo in plačila ostanejo maskirana.
Atribut data-kixo-mask blokira element in celotno njegovo poddrevo. Dodajte ga vsakemu vsebniku, ki lahko vsebuje osebne ali zaupne podatke; v posnetku bo prikazan nadomestni blok, ne pa besedilo ali vsebina DOM tega poddrevesa.
html
```
<div data-kixo-mask>
  
  
</div>
```
Občutljiva polja so vedno maskirana — vnosi, ki so po type, name, id ali autocomplete videti kot geslo, številka kartice, CVV, SSN, skrivnost ali žeton, se maskirajo tudi, ko je nastavitev projekta Maskiraj vnose izklopljena. Vidno besedilo in serializirani atributi DOM pred pošiljanjem preidejo tudi skozi Kixo PII sanitizer.

Zbiranje podatkov

SDK zajema sledilnike, omogočene v vaši integraciji in nastavitvah projekta, ter dogodke in lastnosti, ki jih pošilja vaša aplikacija.

Kam se shranjujejo posnetki

SDK dogodke rrweb stisne z gzip v omejene segmente, od Kixo zahteva podpisan URL za nalaganje v obsegu projekta in te segmente naloži neposredno v shrambo za replay. Rekonstruirano sejo odprite v Posnetki → Seje; povezana je z analitično sledjo iste seje.

Opomba

Replay je na voljo glede na vaš paket. Koliko sej se zajame in hrani, je odvisno od paketa vašega projekta; pri nižjih paketih Kixo še vedno zabeleži lahke metapodatke seje metapodatki, da je seja vidna na seznamih in v analitiki.

Zastavice funkcij

Vrednosti zastavic med izvajanjem preverite z Kixo.getFeatureFlag().

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

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

Pošiljanje in delovanje brez povezave

SDK dogodke lokalno postavi v vrsto, jih pošilja v paketih in pri prehodnih napakah poskuse ponavlja z odlogom. Če je zbiranje v nastavitvah projekta začasno ustavljeno, se novi dogodki ne pošiljajo, dokler zbiranja znova ne omogočite.

Diagnostika

Posnetek stanja samo za branje — uporaben pri razhroščevanju vprašanja »zakaj moji dogodki ne prihajajo?« v razvojnih orodjih.

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