Web SDK

Kixo Web SDK, įterptas viena eilute, automatiškai renka paspaudimus, puslapių peržiūras, sesijas, klaidas, slinkimo gylį, web vitals, įniršio paspaudimus, tuščius paspaudimus ir šilumos žemėlapių duomenis. Tinklo užklausų stebėjimą galima įjungti papildomai. Platinamas kaip natyvus ES modulis ir veikia šiuolaikinėse naršyklėse.

Diegimas

Script žyma (CDN)

Pridėkite fragmentą prieš uždaromąją </head> žymą. Atkreipkite dėmesį į type="module" — jis būtinas, nes SDK yra ES modulis. Sesijų atkūrimas išskaidytas į versiją atitinkantį recorder bloką, kuris įkeliamas tik įjungus replay, todėl kol replay išjungtas, bazinis paketas išlieka mažas.

html

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

Pastaba

SDK nuskaito project_id ir api_key iš script URL ir inicijuojasi. Jei parinktis norite nustatyti programos kode, pašalinkite URL parametrus ir vietoj jų kvieskite Kixo.init({...}) — moduliui užsikrovus bus pasiekiamas globalus objektas Kixo.

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

Naudokite šį būdą, kai parinktis norite nustatyti programos kode, o ne per script URL. Jis pateikia tą pačią Kixo API kaip ir CDN įterpimas.

bash

npm install @kixo.io/web

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

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

No-Code platformos

Jei kuriate su AI pagrįsta kūrimo platforma, tokia kaip Lovable, Bolt, v0 ar Replit, įklijuokite script žymos fragmentą tiesiai į platformos pokalbį arba kodo įterpimo nustatymus. Dauguma tokių platformų leidžia pridėti skriptus į svetainės <head>.

Konfigūracija

Dviejų eilučių įterpimas naudoja toliau nurodytus vietinės analitikos numatytuosius nustatymus. Užklausų stebėjimas lieka pasirinktinis. Sesijos atkūrimo sąmoningai nėra Kixo.init(): jo įjungimas, imtis, privatumo nuostatos, trukmė ir fiksavimo nustatymai valdomi tik projekto suvestinėje.

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

});

Pastaba

Projekto valdoma konfigūracija. Dashboard nustatymuose galima išjungti vietinius analitikos sekiklius. Replay apskritai neturi vietinio aiškaus įjungimo žymens: sukonfigūruokite jį skiltyjeSettings → Session replay, o SDK per kitą konfigūracijos atnaujinimą pritaikys naujausią projekto politiką.

Automatiškai sekami įvykiai

Pagal numatytąją konfigūraciją Kixo šiuos įvykius fiksuoja automatiškai, be papildomo kodo:

page_view — kiekviena navigacija (pradinis įkėlimas ir SPA maršruto pasikeitimai)
session_start / session_end
click — visi paspaudimai pagal elemento selektorių
scroll_depth — 25 / 50 / 75 / 100 % slenksčiai
rage_click — pakartotiniai paspaudimai ant to paties elemento
dead_click — paspaudimai ant neinteraktyvių elementų
error — nepagautos JavaScript išimtys ir atmesti promise
performance — puslapio įkėlimo ir Web Vitals metrikos (LCP, FCP, FID, CLS, INP, TTFB)
network_request — pasirenkami užklausų trukmės duomenys, kai įjungtas tinklo sekimas
heatmap_click / scroll — šilumos žemėlapių duomenys

Visą sąrašą rasite Įvykių žinynas.

Pasirinktiniai įvykiai

Kixo.track()

Siųskite pasirinktinį įvykį su neprivalomomis savybėmis.

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

Tipizuoti įvykių pagalbiniai metodai

Patogesnis Kixo.track() variantas įvykiams, kuriuos Kixo atpažįsta pagal pavadinimą (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Tipizuoti pagalbiniai metodai suteikia savybių tikrinimą kompiliavimo metu ir vieną tiesos šaltinį raktų pavadinimams — standartinių įvykių atpažinimas serveryje remiasi tiksliu atitikimu.

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

Susiekite dabartinį įrenginį su žinomu naudotoju. Rezervuoti standartinių savybių raktai naudoja $ prefiksą (Mixpanel konvencija), todėl nesikerta su jūsų pasirinktiniais požymiais ir perkeliami į dashboard profilio stulpelius — visą 37 raktų sąrašą rasite Standartinių savybių katalogas.

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() — pažymėkite naudotoją segmentavimui

Pridėkite dabartiniam naudotojui laisvos formos rakto ir reikšmės atributus. Reikšmės gali būti tekstas, skaičius arba loginės reikšmės — loginė reikšmė yra švariausias būdas žyma naudotoją vėlesniam taikymui segmentuose, el. pašto kampanijose ar pokalbių užklausose.

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

Savybės išsaugomos localStorage, išlieka po puslapio perkrovimo ir automatiškai pridedamos prie vėlesnių įvykių. Pokalbyje galite naudoti užklausas, pvz., "sukurk el. pašto kampaniją naudotojams, kurių subscribe yra true" — Kixo automatiškai sukurs segmentą ir parengs šablono juodraštį. Išvalomos per Kixo.reset().

Kixo.group()

Susiekite naudotoją su įmone ar organizacija.

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

Kixo.reset()

Išvalykite tapatybę, super-properties ir išsaugotą eilę. Iškvieskite tai atsijungiant, kad vėlesni įvykiai nebūtų priskirti ankstesniam naudotojui.

Kixo.reset();

Standartinių savybių katalogas

Rezervuoti savybių raktai turi $ prefiksą, todėl nesikerta su jūsų pasirinktiniais požymiais. Kixo kataloge yra 37 raktai: 3 universalūs paketai (tapatybė, geografiniai duomenys, gyvavimo ciklas) ir 5 B2B sritiniai paketai (prenumerata, e. prekyba, medija, prekyvietė, lojalumas). Pildykite tik tai, kas tinka jūsų produktui — suvestinė prisitaikys ir rodys tik tuos paketus, kuriuos naudojate.

Tapatybė

Visada aktualu. Nustato profilio antraštės stulpelius.

Raktas	Tipas	Aprašymas
`$email`	eilutė	Pagrindinis el. pašto adresas, dažnai naudojamas kaip sujungimo raktas tapatybėms susieti.
`$phone`	eilutė	E.164 telefono numeris.
`$name`	eilutė	Visas rodomas vardas.
`$first_name`	eilutė	Vardas.
`$last_name`	eilutė	Pavardė.
`$avatar_url`	eilutė	Pilnas naudotojo avataro paveikslėlio URL.

Geo

Geografinis kontekstas.

Raktas	Tipas	Aprašymas
`$country`	eilutė	ISO 3166 šalies kodas.
`$city`	eilutė	Miesto pavadinimas.
`$region`	eilutė	Valstija arba provincija.
`$timezone`	eilutė	IANA zona, pvz., `America/Los_Angeles`.
`$language`	eilutė	IETF žyma, pvz., `en` arba `ru-RU`.
`$locale`	eilutė	Pilnas locale identifikatorius.

Gyvavimo ciklas

Kada juos matėme.

Raktas	Tipas	Aprašymas
`$created`	ISO8601	Registracijos arba paskyros sukūrimo laikas.
`$last_seen`	ISO8601	Paskutinio įsitraukimo laikas.

Prenumerata

Nurodykite, jei jūsų produktas turi planus.

Raktas	Tipas	Aprašymas
`$plan`	eilutė	Plano slug — `free`, `pro`, `enterprise`.
`$subscription_status`	eilutė	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Kada baigiasi dabartinis bandomasis laikotarpis.
`$mrr`	skaičius	Mėnesinės pasikartojančios pajamos paskyros valiuta.
`$subscription_started`	ISO8601	Kada prasidėjo dabartinė prenumerata.

El. prekyba

Nurodykite, jei parduodate produktus.

Raktas	Tipas	Aprašymas
`$lifetime_orders`	skaičius	Užbaigtų užsakymų skaičius.
`$lifetime_revenue`	skaičius	Bendra išleista suma.
`$aov`	skaičius	Vidutinė užsakymo vertė.
`$last_purchase`	ISO8601	Paskutinis sėkmingas pirkimas.
`$first_purchase`	ISO8601	Pirmasis sėkmingas pirkimas.
`$cart_abandoned_count`	skaičius	Bendras per visą laiką paliktų krepšelių skaičius.

Medija

Nurodykite, jei publikuojate turinį.

Raktas	Tipas	Aprašymas
`$content_tier`	eilutė	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV eilutė arba masyvas	Kategorijos, kurias seka naudotojas.
`$watch_time_total`	skaičius	Bendra peržiūros trukmė sekundėmis per visą laiką.
`$last_played`	ISO8601	Paskutinė atkūrimo pradžia.

Prekyvietė

Nurodykite, jei jūsų platforma jungia dvi puses.

Raktas	Tipas	Aprašymas
`$seller_tier`	eilutė	Pardavėjo plano slug.
`$buyer_tier`	eilutė	Pirkėjo pusės pakopos slug.
`$listings_count`	skaičius	Naudotojui priklausantys aktyvūs skelbimai.
`$reviews_count`	skaičius	Atsiliepimai, kuriuos naudotojas yra gavęs.
`$verified`	boolean	KYC būsena.

Lojalumas

Nurodykite, jei naudojate įsitraukimo ar lojalumo programas.

Raktas	Tipas	Aprašymas
`$loyalty_points`	skaičius	Dabartinis išperkamų taškų likutis.
`$vip_level`	eilutė	VIP lygio slug.
`$referral_count`	skaičius	Sėkmingi rekomendavimai, priskirti šiam naudotojui.

Patarimas

Nerandate savo varianto? Pasirinktiniams požymiams naudokite paprastus raktus. Jie rodomi dashboard skiltyje Custom Traits ir neapkrauna profilio stulpelių. Penki aukščiau pateikti vertikalūs paketai yra apgalvoti spėjimai apie dažniausias B2B struktūras — klientui būdinga terminija (pvz., shipping_plan) lieka be prefikso.

Super-properties

Sesijos lygmens rakto ir reikšmės poros, automatiškai pridedamos prie kiekvieno išsiunčiamo įvykio. Skirtingai nuo identify() požymių, kurie aprašo tapatybę, super-properties aprašo sesijos kontekstą — aktyvų A/B variantą, build variantą, įjungtas funkcijų vėliavėles, partnerio nuorodą. Išsaugomos localStorage ir išlieka po puslapio perkrovimo; išvalomos per reset(). Jei raktai sutampa, įvykio lygmens properties iš track() visada turi pirmenybę.

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

Šilumos žemėlapiai

Šilumos žemėlapių įrašymas pagal numatymą įjungtas — fiksuojami paspaudimai ir slinkimo gylis, abiem taikant 100 % atranką. Pelės judėjimas yra pasirenkamas (didelės apimties; junkite atskiruose puslapiuose, jei reikia).

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

Sesijos atkūrimas

Sesijos atkūrimas įrašo rrweb DOM momentinę kopiją ir mutacijų srautą, kad suvestinėje būtų galima atkurti puslapį kaip prasukamą sesiją greta įvykių sekos. Tai DOM rekonstrukcija, o ne ekrano vaizdo įrašas. Replay yra pagal numatymą išjungta. Įjunkite jį projekto Valdymo skydelis → Nustatymai → Sesijų atkūrimas skiltyje; programos kodo keisti nereikia. Įjungus funkciją, įrašymo modulis parsiunčiamas kaip atskiras, su versija suderintas paketas.

Pastaba

Suvestinė yra tiesos šaltinis. Ten nustatykite Enable replay, Mask inputs, maksimalią trukmę ir išplėstinius fiksavimo valdiklius. captureOnCellular saugoma toje pačioje projekto politikoje, skirtoje iOS ir Android; naršyklės nepateikia patikimo Wi‑Fi ir mobiliojo ryšio atskyrimo, todėl Web SDK apie šį tik native aplinkai taikomą ribojimą praneša, bet jo nepaiso.

Kas maskuojama

Replay sukurtas taip, kad jį būtų saugu įjungti. Jautrų turinį saugo trys sluoksniai, visi jie pagal numatymą įjungti:

Įvesčių maskavimą valdo projektas — kai Dashboard nustatymas Maskuoti įvestis įjungtas (pagal numatymą), įvesti simboliai dar naršyklėje pakeičiami žvaigždutėmis. Išjunkite tai tik konkrečiam, mažo jautrumo atvejui; tapatybės, autentifikavimo ir mokėjimo laukai vis tiek lieka maskuojami.
Atributas data-kixo-mask blokuoja elementą ir visą jo poaibį. Dėkite jį ant bet kurio konteinerio, kuriame gali būti asmeninio ar konfidencialaus turinio; atkūrime bus rodomas vietaženklis, o ne to poaibio tekstas ar DOM turinys.
html
```
<div data-kixo-mask>
  
  
</div>
```
Jautrūs laukai visada maskuojami — laukai, panašūs į slaptažodį, kortelės numerį, CVV, SSN, paslaptį ar prieigos raktą (pagal type, name, id arba autocomplete), maskuojami net tada, kai projekto Maskuoti įvestis nustatymas išjungtas. Matomas tekstas ir serializuoti DOM atributai prieš įkėlimą taip pat pereina per Kixo PII valymą.

Duomenų rinkimas

SDK fiksuoja sekiklius, įjungtus jūsų integracijoje ir projekto nustatymuose, taip pat įvykius ir savybes, kuriuos siunčia jūsų programa.

Kur keliauja įrašai

SDK suglaudina rrweb įvykius gzip formatu į riboto dydžio segmentus, paprašo Kixo projekto lygmens pasirašyto įkėlimo URL ir tuos segmentus įkelia tiesiai į replay saugyklą. Atkurtą sesiją atidarykite Atkūrimas → Sesijos — ten ji susieta su tos pačios sesijos analitikos seka.

Pastaba

Replay prieinamumas priklauso nuo jūsų plano. Kiek sesijų užfiksuojama ir išsaugoma, priklauso nuo jūsų projekto plano; žemesniuose planuose Kixo vis tiek įrašo lengvus sesijos metaduomenys, kad sesija būtų matoma sąrašuose ir analitikoje.

Funkcijų vėliavėlės

Vėliavėlių reikšmes vykdymo metu tikrinkite per Kixo.getFeatureFlag().

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

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

Pristatymas ir veikimas neprisijungus

SDK lokaliai kaupia įvykių eilę, siunčia juos paketais ir laikinų klaidų atveju kartoja siuntimą su ilgėjančiomis pauzėmis. Jei rinkimas pristabdytas projekto nustatymuose, nauji įvykiai nebus siunčiami, kol rinkimas vėl nebus įjungtas.

Diagnostika

Tik skaitoma būsenos suvestinė — naudinga aiškinantis per dev tools, kodėl įvykiai nekeliauja.

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