Web SDK

Kixo Web SDK automatski prati klikove, prikaze stranica, sesije, greške, dubinu skrolovanja, web vitals, rage-clickove, dead-clickove i podatke za toplotnu mapu uz embed od jednog reda. Praćenje mrežnih zahteva dostupno je kao opcionalna postavka. Isporučuje se kao nativni ES modul i radi u modernim pregledačima.

Instalacija

Script tag (CDN)

Dodajte snippet pre završnog taga </head>. Obratite pažnju na type="module" — obavezno je zato što je SDK ES modul. Session replay je izdvojen u poseban recorder chunk iste verzije, koji se učitava tek kada se replay uključi, pa osnovni bundle ostaje mali dok je replay isključen.

html

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

Napomena

SDK čita project_id i api_key iz URL-a skripte i sam se inicijalizuje. Ako opcije želite da podešavate u aplikacionom kodu, uklonite URL parametre i umesto toga pozovite Kixo.init({...}) — globalni objekat Kixo dostupan je kada se modul učita.

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

Koristite ovo kada opcije želite da podešavate u aplikacionom kodu, a ne preko URL-a skripte. Izlaže isti Kixo API kao i CDN embed.

bash

npm install @kixo.io/web

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

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

No-Code platforme

Ako pravite sajt pomoću AI buildera kao što su Lovable, Bolt, v0 ili Replit, nalepite snippet sa script tagom direktno u chat buildera ili u podešavanja za ubacivanje koda. Većina buildera podržava dodavanje skripti u <head> vašeg sajta.

Konfiguracija

Embed od dva reda koristi lokalne podrazumevane analitičke vrednosti ispod. Praćenje zahteva ostaje opcionalno. Session replay namerno nije deo Kixo.init(): uključivanje, uzorkovanje, privatnost, trajanje i postavke snimanja dolaze isključivo iz dashboarda 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,
  },

});

Napomena

Konfiguracija pod kontrolom projekta. U podešavanjima dashboarda možete da isključite lokalne analitičke trackere. Replay uopšte nema lokalnu zastavicu za eksplicitno uključivanje: podesite ga u Settings → Session replay, a SDK će pri sledećem osvežavanju konfiguracije primeniti najnoviju politiku projekta.

Automatski praćeni događaji

Uz podrazumevanu konfiguraciju, Kixo automatski beleži ove događaje bez dodatnog koda:

page_view — svaka navigacija (početno učitavanje + promene ruta u SPA aplikaciji)
session_start / session_end
click — sve interakcije klikom sa selektorom elementa
scroll_depth — pragovi od 25 / 50 / 75 / 100 %
rage_click — ponovljeni klikovi na isti element
dead_click — klikovi na neinteraktivne elemente
error — neobrađeni JavaScript izuzeci + odbijeni promise-i
performance — metrike učitavanja stranice i Web Vitals (LCP, FCP, FID, CLS, INP, TTFB)
network_request — opciono trajanje zahteva kada je praćenje mreže uključeno
heatmap_click / scroll — podaci za toplotnu mapu

Kompletnu listu pogledajte u Referenca događaja.

Prilagođeni događaji

Kixo.track()

Pošaljite prilagođeni događaj sa opcionim svojstvima.

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

Tipizovani pomoćnici za događaje

Pojednostavljeni sloj preko Kixo.track() za događaje koje Kixo prepoznaje po nazivu (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Tipizovani omotači donose proveru svojstava pri kompajliranju i jedno centralno mesto za nazive ključeva — backend detektor standardnih događaja traži doslovno podudaranje.

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

Povežite trenutni uređaj sa poznatim korisnikom. Rezervisani standardni ključevi svojstava nose prefiks $ (Mixpanel konvencija) kako bi bili odvojeni od vaših prilagođenih trait-ova i prikazali se u kolonama profila na dashboardu — u Standardni katalog svojstava ispod je kompletna lista od 37 ključeva.

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čava korisnika za segmentaciju

Dodajte proizvoljne atribute ključ/vrednost trenutnom korisniku. Vrednosti mogu da budu stringovi, brojevi ili logičke vrednosti — logička vrednost je najčistiji način da oznaka korisnika za kasnije ciljanje u segmentima, imejl kampanjama ili upitima u 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' });

Svojstva se čuvaju u localStorage i nakon ponovnog učitavanja i automatski se dodaju narednim događajima. Koristite ih u chatu uz upite kao što je "napravi imejl kampanju za korisnike kod kojih je subscribe = true" — Kixo automatski sastavlja segment i priprema šablon. Brišu se pri Kixo.reset().

Kixo.group()

Povežite korisnika sa kompanijom ili organizacijom.

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

Kixo.reset()

Obrišite identitet, super-properties i sačuvani red za slanje. Pozovite ovo pri odjavi da se naredni događaji ne bi pripisali prethodnom korisniku.

Kixo.reset();

Standardni katalog svojstava

Rezervisani ključevi svojstava nose prefiks $ kako bi bili odvojeni od vaših prilagođenih osobina. Kixo katalog obuhvata 37 ključeva u 3 univerzalna paketa (identitet, geo, životni ciklus) i 5 B2B vertikalnih paketa (pretplata, e-trgovina, mediji, tržište, program lojalnosti). Podesite samo ono što je relevantno za vaš proizvod — dashboard se prilagođava i prikazuje samo pakete koje popunite.

Identitet

Uvek relevantno. Podešava kolone zaglavlja profila.

Ključ	Tip	Opis
`$email`	niska	Primarna imejl adresa, često glavni ključ za povezivanje identiteta.
`$phone`	niska	Broj telefona u formatu E.164.
`$name`	niska	Puno ime za prikaz.
`$first_name`	niska	Ime.
`$last_name`	niska	Prezime.
`$avatar_url`	niska	Pun URL do korisnikove avatar slike.

Geo

Geografski kontekst.

Ključ	Tip	Opis
`$country`	niska	ISO 3166 kod države.
`$city`	niska	Naziv grada.
`$region`	niska	Država ili pokrajina.
`$timezone`	niska	IANA zona, na primer `America/Los_Angeles`.
`$language`	niska	IETF oznaka, na primer `en` ili `ru-RU`.
`$locale`	niska	Puni identifikator lokalizacije.

Životni ciklus

Kada smo ga videli.

Ključ	Tip	Opis
`$created`	ISO8601	Vreme registracije ili otvaranja naloga.
`$last_seen`	ISO8601	Vreme poslednje interakcije.

Pretplata

Podesite ako vaš proizvod ima planove.

Ključ	Tip	Opis
`$plan`	niska	Slug nivoa — `free`, `pro`, `enterprise`.
`$subscription_status`	niska	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Kada ističe trenutni probni period.
`$mrr`	broj	Mesečni ponavljajući prihod u valuti naloga.
`$subscription_started`	ISO8601	Kada je počela trenutna pretplata.

E-trgovina

Podesite ako prodajete proizvode.

Ključ	Tip	Opis
`$lifetime_orders`	broj	Broj završenih porudžbina.
`$lifetime_revenue`	broj	Ukupna potrošnja.
`$aov`	broj	Prosečna vrednost porudžbine.
`$last_purchase`	ISO8601	Najnovija uspešna kupovina.
`$first_purchase`	ISO8601	Prva uspešna kupovina.
`$cart_abandoned_count`	broj	Ukupan broj napuštanja korpe.

Mediji

Podesite ako objavljujete sadržaj.

Ključ	Tip	Opis
`$content_tier`	niska	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV string ili niz	Kategorije koje korisnik prati.
`$watch_time_total`	broj	Ukupno vreme gledanja u sekundama.
`$last_played`	ISO8601	Najnovije pokretanje reprodukcije.

Tržište

Podesite ako ste platforma sa dve strane.

Ključ	Tip	Opis
`$seller_tier`	niska	Slug nivoa na strani prodavca.
`$buyer_tier`	niska	Slug paketa na strani kupca.
`$listings_count`	broj	Aktivni oglasi koje korisnik poseduje.
`$reviews_count`	broj	Recenzije koje je korisnik dobio.
`$verified`	logička vrednost	KYC status.

Program lojalnosti

Podesite ako koristite programe angažovanja i nagrađivanja.

Ključ	Tip	Opis
`$loyalty_points`	broj	Trenutni raspoloživi saldo poena.
`$vip_level`	niska	Slug VIP nivoa.
`$referral_count`	broj	Uspešne preporuke pripisane ovom korisniku.

Savet

Ne vidite svoj obrazac? Za prilagođene trait-ove koristite obične ključeve. Prikazuju se u panelu Custom Traits na dashboardu, bez zagušenja kolona profila. Pet vertikalnih paketa iznad su promišljene pretpostavke o najčešćim B2B modelima — terminologija specifična za korisnika (npr. shipping_plan) ostaje bez prefiksa.

Super-svojstva

Parovi ključ/vrednost na nivou sesije koji se automatski dodaju svakom odlaznom događaju. Za razliku od identify() osobina, koje opisuju identitet, super-svojstva opisuju kontekst sesije — aktivnu A/B varijantu, varijantu builda, uključene feature flagove, affiliate ref. Čuvaju se u localStorage i nakon ponovnog učitavanja; brišu se pri reset(). Svojstva properties u track() uvek imaju prednost pri koliziji ključeva.

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

Toplotne mape

Snimanje toplotnih mapa je podrazumevano uključeno — klikovi i dubina skrolovanja, oboje sa uzorkovanjem od 100 %. Praćenje kretanja miša je opciono (veliki obim podataka; uključite ga po stranici kada ima smisla).

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

Snimak sesije

Session replay snima rrweb DOM snimak i tok izmena kako bi dashboard mogao da rekonstruiše stranicu kao sesiju kroz koju može da se premotava, uporedo sa tokom događaja. Ovo je rekonstrukcija DOM-a, a ne video-snimak ekrana. Replay je podrazumevano isključeno. Uključite ga za projekat u Kontrolna tabla → Podešavanja → Snimanje sesije; nije potrebna izmena aplikacionog koda. Kada se uključi, snimač se preuzima iz zasebnog chunk-a usklađenog sa istom verzijom.

Napomena

Dashboard je izvor istine. Tu podešavate Enable replay, Mask inputs, maksimalno trajanje i napredne kontrole snimanja. captureOnCellular se čuva u istoj politici projekta za iOS i Android; pregledači ne izlažu pouzdan signal za razlikovanje Wi‑Fi i mobilne mreže, pa Web SDK prijavi i zanemari to ograničenje koje važi samo za native aplikacije.

Šta se maskira

Replay je osmišljen tako da može bezbedno da se uključi. Osetljiv sadržaj štite tri sloja, i sva tri su podrazumevano uključena:

Maskiranje unosnih polja kontroliše projekat — dok je podešavanje Maskiraj unosna polja u Dashboard-u uključeno (podrazumevano), otkucani znakovi zamenjuju se zvezdicama pre nego što napuste pregledač. Isključite ga samo za konkretnu potrebu niske osetljivosti; polja za identitet, prijavu i plaćanje ostaju maskirana.
Atribut data-kixo-mask blokira element i celo njegovo podstablo. Postavite ga na bilo koji kontejner koji može da sadrži lične ili poverljive podatke; u replay snimku će biti placeholder, a ne tekst niti DOM sadržaj tog podstabla.
html
```
<div data-kixo-mask>
  
  
</div>
```
Osetljiva polja su uvek maskirana — polja koja liče na lozinku, broj kartice, CVV, SSN, tajnu ili token (po type, name, id ili autocomplete) maskiraju se čak i kada je podešavanje projekta Maskiraj unosna polja isključeno. Vidljiv tekst i serijalizovani DOM atributi takođe prolaze kroz Kixo PII sanitizaciju pre slanja.

Prikupljanje podataka

SDK beleži trackere uključene u vašoj integraciji i podešavanjima projekta, kao i događaje i svojstva koje šalje aplikacija.

Gde se čuvaju snimci

SDK kompresuje rrweb događaje pomoću gzip-a u ograničene segmente, traži od Kixo URL za otpremanje sa potpisom ograničen na projekat i te segmente šalje direktno u skladište za replay. Rekonstruisanu sesiju otvorite u Snimanje → Sesije; povezana je sa analitičkim tokom iste sesije.

Napomena

Replay zavisi od vašeg paketa. Koliko sesija se snima i čuva zavisi od plana projekta; na nižim paketima Kixo i dalje beleži lagane događaje sesije metapodaci, tako da se sesija pojavljuje u listama i analitici.

Feature flagovi

Vrednosti flagova u toku rada proverite preko Kixo.getFeatureFlag().

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

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

Isporuka i ponašanje van mreže

SDK lokalno stavlja događaje u red, šalje ih u paketima i ponavlja privremeno neuspele pokušaje uz backoff. Ako je prikupljanje pauzirano u podešavanjima projekta, novi događaji se ne šalju dok se prikupljanje ponovo ne uključi.

Dijagnostika

Snimak stanja samo za čitanje — koristan za otklanjanje problema tipa „zašto mi događaji ne stižu?” u razvojnim alatima.

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