Web SDK

Kixo Web SDK ar vienas rindas iegulšanu automātiski izseko klikšķus, lapu skatījumus, sesijas, kļūdas, ritināšanas dziļumu, web vitals, rage-clicks, dead-clicks un siltumkaršu datus. Tīkla pieprasījumu uzraudzība ir pieejama kā izvēles iestatījums. Izplatīts kā vietējs ES modulis un darbojas mūsdienīgos pārlūkos.

Instalācija

Script tags (CDN)

Pievienojiet fragmentu pirms aizverošā taga </head>. Pievērsiet uzmanību type="module" — tas ir obligāts, jo SDK ir ES modulis. Sesijas atkārtojums ir nodalīts atsevišķā, versijai atbilstošā ierakstītāja gabalā, kas ielādējas tikai pēc replay ieslēgšanas, tāpēc pamatkomplekts paliek neliels, kamēr replay ir izslēgts.

html

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

Piezīme

SDK nolasa project_id un api_key no skripta URL un pats inicializējas. Ja opcijas vēlaties konfigurēt lietotnes kodā, noņemiet URL parametrus un tā vietā izsauciet Kixo.init({...}) — globālais objekts Kixo būs pieejams pēc moduļa ielādes.

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

Izmantojiet šo variantu, ja opcijas vēlaties konfigurēt lietotnes kodā, nevis skripta URL. Tas atklāj to pašu Kixo API kā CDN iegulšana.

bash

npm install @kixo.io/web

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

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

Bez koda platformas

Ja veidojat ar AI darbinātu būvētāju, piemēram, Lovable, Bolt, v0 vai Replit, ielīmējiet script-tag fragmentu tieši būvētāja čatā vai koda ievietošanas iestatījumos. Lielākā daļa būvētāju atbalsta skriptu pievienošanu vietnes <head>.

Konfigurācija

Divu rindu iegulšana izmanto tālāk norādītos lokālos analītikas noklusējumus. Pieprasījumu uzraudzība joprojām ir izvēles iespēja. Sesiju ieraksts apzināti nav daļa no Kixo.init(): tā ieslēgšana, iztvere, privātuma iestatījumi, ilgums un tveršanas parametri tiek vadīti tikai no projekta paneļa.

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

});

Piezīme

Projekta pārvaldīta konfigurācija. Dashboard iestatījumos var atslēgt lokālos analītikas izsekotājus. Atkārtojumam vispār nav lokāla ieslēgšanas karodziņa: konfigurējiet to sadaļā Settings → Session replay, un SDK nākamajā konfigurācijas atsvaidzināšanā piemēros jaunāko projekta politiku.

Automātiski izsekoti notikumi

Ar noklusējuma konfigurāciju Kixo bez papildu koda automātiski fiksē šos notikumus:

page_view — katra navigācija (sākotnējā ielāde + SPA maršrutu maiņas)
session_start / session_end
click — visi klikšķi uz elementiem, kas atbilst selektoram
scroll_depth — 25 / 50 / 75 / 100 % sliekšņi
rage_click — atkārtoti klikšķi uz tā paša elementa
dead_click — klikšķi uz neinteraktīviem elementiem
error — neapstrādāti JavaScript izņēmumi un promise noraidījumi
performance — lapas ielādes un Web Vitals metrikas (LCP, FCP, FID, CLS, INP, TTFB)
network_request — papildu pieprasījumu laika dati, ja ir ieslēgta tīkla izsekošana
heatmap_click / scroll — siltumkartes dati

Pilnu sarakstu skatiet Notikumu atsauce.

Pielāgoti notikumi

Kixo.track()

Nosūtiet pielāgotu notikumu ar papildu īpašībām.

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

Tipizēti notikumu palīgi

Ērtāka kārta virs Kixo.track() notikumiem, kurus Kixo atpazīst pēc nosaukuma (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Tipizētie wrapperi nodrošina īpašību pārbaudi kompilēšanas laikā un vienu patiesības avotu atslēgu nosaukumiem — backend standarta notikumu detektors salīdzina burtiski.

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

Saistiet pašreizējo ierīci ar zināmu lietotāju. Rezervētajām standarta īpašību atslēgām ir prefikss $ (Mixpanel konvencija), lai tās būtu atdalītas no jūsu pielāgotajām pazīmēm un nonāktu paneļa profila kolonnās — pilnu 37 atslēgu sarakstu skatiet zemāk pie Standarta īpašību katalogs.

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() — atzīmē lietotāju segmentēšanai

Pievienojiet pašreizējam lietotājam patvaļīgus atslēgu/vērtību atribūtus. Vērtības var būt virknes, skaitļi vai boolean vērtības — forma boolean ir tīrākais veids, kā lietotāju tags vēlākai mērķēšanai segmentos, e-pasta kampaņās vai čata vaicājumos.

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

Īpašības tiek saglabātas localStorage arī pēc pārlādes un automātiski pievienotas nākamajiem notikumiem. Izmantojiet tās čatā ar uzvednēm, piemēram, "izveido e-pasta kampaņu lietotājiem, kuriem subscribe ir true" — Kixo automātiski izveidos segmentu un sagatavos veidnes melnrakstu. Notīrās ar Kixo.reset().

Kixo.group()

Saistiet lietotāju ar uzņēmumu vai organizāciju.

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

Kixo.reset()

Notīra identitāti, super-properties un saglabāto rindu. Izsauciet to, izrakstoties, lai nākamie notikumi netiktu piesaistīti iepriekšējam lietotājam.

Kixo.reset();

Standarta īpašību katalogs

Rezervētajām īpašību atslēgām ir prefikss $, lai tās nepārklātos ar jūsu pielāgotajām pazīmēm. Kixo katalogā ir 37 atslēgas 3 universālās pakās (identitāte, ģeogrāfija, dzīves cikls) un 5 B2B vertikālajās pakās (abonementi, e-komercija, mediji, tirdzniecības platformas, lojalitāte). Norādiet tikai tās, kas attiecas uz jūsu produktu — panelis pielāgosies un rādīs tikai aizpildītās pakas.

Identitāte

Vienmēr aktuāli. Nosaka profila galvenes kolonnas.

Atslēga	Tips	Apraksts
`$email`	virkne	Primārā e-pasta adrese, bieži izmantota kā sapludināšanas atslēga identitātes sasaistē.
`$phone`	virkne	E.164 tālruņa numurs.
`$name`	virkne	Pilns attēlojamais vārds.
`$first_name`	virkne	Vārds.
`$last_name`	virkne	Uzvārds.
`$avatar_url`	virkne	Pilns lietotāja avatara attēla URL.

Geo

Ģeogrāfiskais konteksts.

Atslēga	Tips	Apraksts
`$country`	virkne	ISO 3166 valsts kods.
`$city`	virkne	Pilsētas nosaukums.
`$region`	virkne	Štats vai province.
`$timezone`	virkne	IANA zona, piemēram, `America/Los_Angeles`.
`$language`	virkne	IETF tags, piemēram, `en` vai `ru-RU`.
`$locale`	virkne	Pilns lokāles identifikators.

Dzīves cikls

Kad mēs viņu redzējām.

Atslēga	Tips	Apraksts
`$created`	ISO8601	Reģistrācijas vai konta izveides laiks.
`$last_seen`	ISO8601	Pēdējās aktivitātes laiks.

Abonementi

Iestatiet, ja jūsu produktam ir plāni.

Atslēga	Tips	Apraksts
`$plan`	virkne	Līmeņa slug — `free`, `pro`, `enterprise`.
`$subscription_status`	virkne	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Kad beidzas pašreizējais izmēģinājuma periods.
`$mrr`	skaitlis	Mēneša atkārtotie ieņēmumi konta valūtā.
`$subscription_started`	ISO8601	Kad sākās pašreizējais abonements.

E-komercija

Iestatiet, ja pārdodat preces.

Atslēga	Tips	Apraksts
`$lifetime_orders`	skaitlis	Pabeigto pasūtījumu skaits.
`$lifetime_revenue`	skaitlis	Kopējie tēriņi.
`$aov`	skaitlis	Vidējā pasūtījuma vērtība.
`$last_purchase`	ISO8601	Pēdējais veiksmīgais pirkums.
`$first_purchase`	ISO8601	Pirmais veiksmīgais pirkums.
`$cart_abandoned_count`	skaitlis	Kopējais pamesto grozu skaits.

Mediji

Iestatiet, ja publicējat saturu.

Atslēga	Tips	Apraksts
`$content_tier`	virkne	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV virkne vai masīvs	Kategorijas, kurām lietotājs seko.
`$watch_time_total`	skaitlis	Kopējais skatīšanās laiks sekundēs.
`$last_played`	ISO8601	Pēdējais atskaņošanas sākums.

Tirdzniecības platforma

Iestatiet, ja jūsu produkts ir divpusēja platforma.

Atslēga	Tips	Apraksts
`$seller_tier`	virkne	Pārdevēja līmeņa slug.
`$buyer_tier`	virkne	Pircēja puses līmeņa slug.
`$listings_count`	skaitlis	Aktīvie sludinājumi, kas pieder lietotājam.
`$reviews_count`	skaitlis	Atsauksmes, ko lietotājs ir saņēmis.
`$verified`	boolean	KYC statuss.

Lojalitāte

Iestatiet, ja izmantojat iesaistes vai atlīdzību programmas.

Atslēga	Tips	Apraksts
`$loyalty_points`	skaitlis	Pašreizējais izmantojamo punktu atlikums.
`$vip_level`	virkne	VIP līmeņa slug.
`$referral_count`	skaitlis	Veiksmīgas rekomendācijas, kas piesaistītas šim lietotājam.

Ieteikums

Neredzat savu modeli? Pielāgotām pazīmēm izmantojiet parastas atslēgas. Tās parādās paneļa Custom Traits sadaļā, nepiesārņojot profila kolonnas. Piecas iepriekš minētās vertikāles ir pārdomāti minējumi par biežākajām B2B struktūrām — klientam specifiski termini (piemēram, shipping_plan) paliek bez prefiksa.

Super-properties

Sesijas atslēgu/vērtību pāri, ko automātiski pievieno katram izejošajam notikumam. Tie atšķiras no identify() pazīmēm, kas raksturo identitāti; super-properties raksturo sesijas kontekstu — aktīvo A/B variantu, būvējuma veidu, ieslēgtos feature flags, affiliate ref. Tie tiek saglabāti localStorage arī pēc pārlādes un notīrīti ar reset(). Ja atslēgas sakrīt, vienmēr virsroku ņem notikuma līmeņa properties parametrā 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();

Siltumkartes

Siltumkaršu ierakstīšana pēc noklusējuma ir ieslēgta — klikšķi un ritināšanas dziļums, abi ar 100 % paraugošanu. Peles kustība ir jāieslēdz atsevišķi (liels apjoms; aktivizējiet pa lapām, ja tas ir noderīgi).

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

Sesiju ieraksts

Sesiju ieraksts saglabā rrweb DOM momentuzņēmumu un izmaiņu plūsmu, lai panelis varētu atjaunot lapu kā pārtinamu sesiju līdzās notikumu plūsmai. Tā ir DOM rekonstrukcija, nevis ekrāna videoieraksts. Replay ir pēc noklusējuma izslēgts. Ieslēdziet to projektam sadaļā Pārskats → Iestatījumi → Sesiju atkārtojums; lietotnes kodu mainīt nevajag. Kad funkcija ir ieslēgta, ierakstītājs tiek ielādēts no atsevišķa, versijai atbilstoša gabala.

Piezīme

Panelis ir vienīgais patiesības avots. Tur iestatiet Enable replay, Mask inputs, maksimālo ilgumu un papildu ierakstīšanas vadīklas. captureOnCellular tiek glabāts tajā pašā projekta politikā iOS un Android vajadzībām; pārlūki neļauj droši noteikt Wi‑Fi vai mobilo tīklu, tāpēc Web SDK ziņo par šo tikai native ierobežojumu un to ignorē.

Kas tiek maskēts

Replay ir veidots tā, lai to varētu droši ieslēgt. Sensitīvu saturu aizsargā trīs slāņi, un visi pēc noklusējuma ir ieslēgti:

Ievades maskēšanu nosaka projekts — kamēr Dashboard iestatījums Maskēt ievades laukus ir ieslēgts (pēc noklusējuma), ievadītās rakstzīmes pirms aiziešanas no pārlūka tiek aizstātas ar zvaigznītēm. Izslēdziet to tikai konkrētai vajadzībai ar zemu sensitivitāti; identitātes, autentifikācijas un maksājumu lauki paliek maskēti.
Atribūts data-kixo-mask bloķē elementu un visu tā apakškoku. Pievienojiet to jebkuram konteineram, kurā var būt personisks vai konfidenciāls saturs; atkārtojumā būs vietturis, nevis šī apakškoka teksts vai DOM saturs.
html
```
<div data-kixo-mask>
  
  
</div>
```
Sensitīvie lauki vienmēr tiek maskēti — ievades lauki, kas izskatās pēc paroles, kartes numura, CVV, SSN, noslēpuma vai tokena (pēc type, name, id vai autocomplete), tiek maskēti pat tad, ja projekta Maskēt ievades laukus iestatījums ir izslēgts. Redzamais teksts un serializētie DOM atribūti pirms augšupielādes iziet arī caur Kixo PII sanitizētāju.

Datu vākšana

SDK fiksē izsekotājus, kas ieslēgti jūsu integrācijas un projekta iestatījumos, kā arī notikumus un īpašības, ko nosūta jūsu lietotne.

Kur nonāk ieraksti

SDK gzip saspiež rrweb notikumus ierobežota izmēra segmentos, pieprasa no Kixo projektam piesaistītu parakstītu augšupielādes URL un augšupielādē šos segmentus tieši replay krātuvē. Atveriet atjaunoto sesiju sadaļā Atkārtojums → Sesijas; tā ir sasaistīta ar tās pašas sesijas analītikas notikumu plūsmu.

Piezīme

Replay pieejamība ir atkarīga no jūsu plāna. Tas, cik sesiju tiek ierakstīts un glabāts, ir atkarīgs no jūsu projekta plāna; zemākajos līmeņos Kixo joprojām saglabā vieglus sesijas metadati, lai sesija parādītos sarakstos un analītikā.

Funkciju karodziņi

Pārbaudiet karodziņu vērtības izpildes laikā ar Kixo.getFeatureFlag().

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

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

Piegāde un darbība bezsaistē

SDK lokāli saliek notikumus rindā, sūta tos paketēs un pārejošu kļūmju gadījumā mēģina atkārtoti ar pieaugošu pauzi. Ja datu vākšana ir apturēta projekta iestatījumos, jaunie notikumi netiek sūtīti, līdz vākšana atkal tiek ieslēgta.

Diagnostika

Tikai lasāms veselības stāvokļa momentuzņēmums — noderīgs dev tools atkļūdošanai, kad jānoskaidro: “kāpēc mani notikumi netiek sūtīti?”

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