Web SDK

Kixo Web SDK jälgib ühe rea lisamisega automaatselt klikke, lehevaateid, seansse, vigu, kerimissügavust, Web Vitalsit, rage-click'e, dead-click'e ja kuumakaardi andmeid. Võrgupäringute jälgimine on valikuline. See on saadaval natiivse ES-moodulina ja töötab tänapäevastes brauserites.

Paigaldamine

Scripti silt (CDN)

Lisa snippet enne sulgevat märgendit </head>. Pane tähele atribuuti type="module" — see on vajalik, kuna SDK on ES-moodul. Seansikordus on koodist eraldatud versiooniga sobivasse salvestikomponenti, mis laaditakse alles siis, kui replay on sisse lülitatud, nii et baasbundle püsib väikese, kui replay on väljas.

html

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

Märkus

SDK loeb scripti URL-ist project_id ja api_key ning lähtestab end nende põhjal. Kui tahad suvandeid seadistada rakenduse koodis, jäta URL-i parameetrid ära ja kutsu selle asemel Kixo.init({...}) — globaalne objekt Kixo on saadaval kohe, kui moodul on laetud.

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

Kasuta seda siis, kui tahad suvandeid seadistada rakenduse koodis, mitte scripti URL-i kaudu. See pakub sama Kixo API-t nagu CDN-i lisus.

bash

npm install @kixo.io/web

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

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

Koodivabad platvormid

Kui kasutad AI-toega veebiehitajat nagu Lovable, Bolt, v0 või Replit, kleebi script-tag snippet otse ehitaja vestlusesse või koodi lisamise seadetesse. Enamik ehitajaid lubab lisada skripte sinu saidi <head>-ossa.

Seadistus

Kahe rea lisus kasutab allolevaid kohalikke analüütika vaikeväärtusi. Päringute jälgimine jääb valikuliseks. Seansikordus on Kixo.init()-st teadlikult välja jäetud: selle sisselülitamine, valim, privaatsus, kestus ja salvestusseaded tulevad ainult projekti töölaualt.

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

});

Märkus

Projekti juhitav konfiguratsioon. Armatuurlaua seadetega saab kohalikud analüütikajälgijad välja lülitada. Replay'l puudub kohalik positiivne lubamislipp täielikult: seadista see asukohas Settings → Session replay ja SDK järgib järgmisel konfiguratsioonivärskendusel projekti uusimat poliitikat.

Automaatselt jälgitavad sündmused

Vaikimisi seadistusega kogub Kixo need sündmused automaatselt ilma lisakoodita:

page_view — iga navigeerimine (esmane laadimine + SPA route'i vahetused)
session_start / session_end
click — kõik klikisuhtlused koos elemendi selektoriga
scroll_depth — läved 25 / 50 / 75 / 100 %
rage_click — korduvad klikid samal elemendil
dead_click — klikid mitteinteraktiivsetel elementidel
error — püüdmata JavaScript erandid + promise rejection'id
performance — lehelaadimise ja Web Vitals mõõdikud (LCP, FCP, FID, CLS, INP, TTFB)
network_request — valikuline päringu ajastus, kui võrguliikluse jälgimine on sisse lülitatud
heatmap_click / scroll — kuumakaardi andmed

Täieliku loendi leiad jaotisest Sündmuste viide.

Kohandatud sündmused

Kixo.track()

Saada kohandatud sündmus koos valikuliste omadustega.

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

Tüübitud sündmuseabilised

Mugavuskiht Kixo.track() peale sündmustele, mille Kixo tunneb ära nime järgi (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Tüübitud ümbrised annavad omadustele compile-time valideerimise ja ühe tõeallika võtmenimede jaoks — backendi standardsete sündmuste tuvastaja võrdleb neid üks-ühele.

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

Seo praegune seade teadaoleva kasutajaga. Reserveeritud standardomaduste võtmed kasutavad $-prefiksit (Mixpaneli tava), et need püsiksid sinu kohandatud tunnustest eraldi ja jõuaksid armatuurlaua profiiliveergudesse — kõigi 37 võtme täielik loend on all jaotises Standardomaduste kataloog.

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() — märgista kasutaja segmenteerimiseks

Lisa praegusele kasutajale vabalt valitud võtme-väärtus atribuudid. Väärtused võivad olla stringid, arvud või boolean-väärtused — boolean-kuju on kõige puhtam viis kasutajat silt, et teda hiljem segmentides, e-kirjakampaaniates või vestluspäringutes sihtida.

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

Omadused püsivad localStorage-is ka pärast lehe uuesti laadimist ja lisatakse automaatselt järgmistele sündmustele. Kasuta neid vestluses näiteks käsuga "koosta e-posti kampaania kasutajatele, kellel subscribe on true" — Kixo koostab segmendi ja malli automaatselt. Tühjendatakse Kixo.reset() korral.

Kixo.group()

Seo kasutaja ettevõtte või organisatsiooniga.

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

Kixo.reset()

Tühjenda identiteet, super-property'd ja püsiv järjekord. Kutsu see välja väljalogimisel, et järgmisi sündmusi ei omistataks eelmisele kasutajale.

Kixo.reset();

Standardomaduste kataloog

Reserveeritud omaduste võtmetel on eesliide $, et need ei läheks segi sinu kohandatud tunnustega. Kixo kataloogis on 37 võtit: 3 universaalset pakki (identiteet, geo, elutsükkel) ja 5 B2B vertikaalpakki (tellimus, e-kaubandus, meedia, turg, lojaalsus). Määra need, mis sinu toote puhul kehtivad — töölaud kohandub ja kuvab ainult täidetud pakid.

Identiteet

Alati asjakohane. Määrab profiilipäise veerud.

Võti	Tüüp	Kirjeldus
`$email`	string	Peamine e-posti aadress, sageli ühendatud identiteetide sidumise võti.
`$phone`	string	E.164 telefoninumber.
`$name`	string	Täielik kuvatav nimi.
`$first_name`	string	Eesnimi.
`$last_name`	string	Perekonnanimi.
`$avatar_url`	string	Kasutaja avatari pildi täielik URL.

Geo

Geograafiline kontekst.

Võti	Tüüp	Kirjeldus
`$country`	string	ISO 3166 riigikood.
`$city`	string	Linna nimi.
`$region`	string	Osariik või provints.
`$timezone`	string	IANA tsoon, näiteks `America/Los_Angeles`.
`$language`	string	IETF märgend, näiteks `en` või `ru-RU`.
`$locale`	string	Täielik lokaadi identifikaator.

Elutsükkel

Millal me neid nägime.

Võti	Tüüp	Kirjeldus
`$created`	ISO8601	Registreerumise või konto loomise aeg.
`$last_seen`	ISO8601	Viimase kaasatuse aeg.

Tellimus

Määra see, kui sinu tootel on paketid.

Võti	Tüüp	Kirjeldus
`$plan`	string	Taseme slug — `free`, `pro`, `enterprise`.
`$subscription_status`	string	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Praeguse prooviperioodi lõppaeg.
`$mrr`	number	Igakuine korduvtulu konto valuutas.
`$subscription_started`	ISO8601	Praeguse tellimuse algusaeg.

E-kaubandus

Määra see, kui müüd tooteid.

Võti	Tüüp	Kirjeldus
`$lifetime_orders`	number	Lõpetatud tellimuste arv.
`$lifetime_revenue`	number	Kogukulu.
`$aov`	number	Keskmine tellimuse väärtus.
`$last_purchase`	ISO8601	Viimane edukas ost.
`$first_purchase`	ISO8601	Esimene edukas ost.
`$cart_abandoned_count`	number	Ostukorvist loobumiste koguarv.

Meedia

Määra see, kui avaldad sisu.

Võti	Tüüp	Kirjeldus
`$content_tier`	string	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV-string või massiiv	Kategooriad, mida kasutaja jälgib.
`$watch_time_total`	number	Vaatamisaeg kokku sekundites.
`$last_played`	ISO8601	Viimane taasesituse algus.

Turg

Määra see, kui sinu toode on kahepoolne platvorm.

Võti	Tüüp	Kirjeldus
`$seller_tier`	string	Müüjapoole taseme slug.
`$buyer_tier`	string	Ostjapoole taseme slug.
`$listings_count`	number	Kasutajale kuuluvad aktiivsed kuulutused.
`$reviews_count`	number	Arvustused, mille kasutaja on saanud.
`$verified`	boolean	KYC olek.

Lojaalsus

Määra see kaasatus- ja preemiaprogrammide puhul.

Võti	Tüüp	Kirjeldus
`$loyalty_points`	number	Praegune lunastatav punktijääk.
`$vip_level`	string	VIP-taseme slug.
`$referral_count`	number	Sellele kasutajale omistatud edukad soovitused.

Nipp

Kas sinu mustrit ei ole? Kasuta kohandatud tunnuste jaoks lihtvõtmeid. Need kuvatakse armatuurlaua paneelis Custom Traits ega risusta profiiliveerge. Ülal toodud 5 valdkonnapaketti on teadlikud oletused kõige levinumate B2B-kujude kohta — kliendispetsiifiline terminoloogia (nt shipping_plan) jääb prefiksita.

Super-properties

Seansipõhised võtme-väärtuse paarid, mis lisatakse automaatselt igale väljaminevale sündmusele. Need erinevad identify() tunnustest, mis kirjeldavad identiteeti; super-properties kirjeldavad seansi konteksti, näiteks aktiivset A/B varianti, build flavor'it, lubatud feature flag'e ja affiliate ref'i. Need püsivad localStorage-is ka pärast lehe uuesti laadimist ja tühjendatakse reset() korral. Kui võti kattub, jäävad alati peale sündmusepõhised properties väärtused track()-s.

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

Kuumuskaardid

Kuumakaardi salvestamine on vaikimisi sees — klikid ja kerimissügavus, mõlemad 100% valimiga. Hiireliikumise salvestamine on valikuline (mahukas; lülita see vajadusel sisse lehepõhiselt).

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

Seansi taasesitus

Seansikordus salvestab rrweb-i DOM-i hetkeseisu ja muudatuste voo, et töölaud saaks lehe koos sündmuste rajaga taastada keritava seansina. See on DOM-i rekonstruktsioon, mitte ekraanivideo salvestus. Replay on vaikimisi väljas. Luba see projektile asukohas Töölaud → Seaded → Sessiooni taasesitus; rakenduse koodi ei pea muutma. Kui replay on sisse lülitatud, laaditakse salvestaja eraldi versiooniga sobivast chunk'ist.

Märkus

Töölaud on tõeallikas. Seal saad määrata valikud Enable replay, Mask inputs, maksimaalse kestuse ja täpsemad salvestusjuhtelemendid. captureOnCellular talletatakse samas projektipoliitikas iOS ja Androidi jaoks; brauserid ei paku usaldusväärset signaali, mis eristaks Wi-Fi ja mobiilside, seega Web SDK raporteerib selle ainult natiivse piirangu, kuid eirab seda.

Mida maskeeritakse

Replay on tehtud nii, et selle saab turvaliselt sisse lülitada. Tundlikku sisu kaitsevad kolm kihti, kõik vaikimisi sisse lülitatud:

Sisendi maskeerimist juhib projekt — kui armatuurlaua Maskeeri sisendid seade on sees (vaikimisi), asendatakse sisestatud märgid enne brauserist lahkumist tärnidega. Lülita see välja ainult konkreetse vähese tundlikkusega vajaduse korral; identiteedi-, autentimis- ja makseväljad jäävad siiski maskeerituks.
Atribuut data-kixo-mask blokeerib elemendi ja kogu selle alampuu. Lisa see igale konteinerile, mis võib sisaldada isiklikku või konfidentsiaalset sisu; korduses kuvatakse placeholder, mitte selle alampuu tekst ega DOM sisu.
html
```
<div data-kixo-mask>
  
  
</div>
```
Tundlikud väljad maskeeritakse alati — sisestusväljad, mis paistavad olevat parooli, kaardinumbri, CVV, SSN, saladuse või tokeni jaoks (type, name, id või autocomplete'i järgi), maskeeritakse ka siis, kui projekti Maskeeri sisendid seade on väljas. Enne üleslaadimist läbivad Kixo PII puhastuse ka nähtav tekst ja serialiseeritud DOM atribuudid.

Andmete kogumine

SDK kogub jälitajad, mis on sinu integratsioonis ja projekti seadetes lubatud, ning sündmused ja omadused, mida rakendus saadab.

Kuhu salvestised lähevad

SDK pakib rrweb-i sündmused gzip'iga piiratud segmentideks, küsib Kixo käest projektipõhise allkirjastatud üleslaadimise URL-i ja laadib need segmendid otse replay salvestusruumi. Ava taastatud seanss asukohas Taasesitus → Sessioonid; sealt viid samale seansile vastava analüütikarajani.

Märkus

Replay sõltub sinu paketist. Salvestatavate ja säilitatavate seansside hulk sõltub sinu projektipaketist; madalamatel tasemetel talletab Kixo siiski kergekaalulise seansi metaandmed, et seanss oleks nimekirjades ja analüütikas nähtav.

Feature flag'id

Kontrolli lippude väärtusi töö käigus kaudu Kixo.getFeatureFlag().

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

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

Edastamine ja käitumine võrguühenduseta olekus

SDK paneb sündmused kohalikku järjekorda, saadab need pakkidena ja proovib ajutiste tõrgete korral kasvava viitega uuesti. Kui kogumine on projekti seadetest peatatud, uusi sündmusi ei saadeta enne, kui kogumine uuesti lubatakse.

Diagnostika

Kirjutuskaitstud tervise hetkeseis — kasulik arendustööriistades veaotsinguks, kui tekib küsimus „miks mu sündmused ei liigu?”

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