Web SDK

Kixo Web SDK bir qatorli ulash bilan kliklar, sahifa ko‘rishlar, sessiyalar, xatolar, skroll chuqurligi, web vitals, rage-click, dead-click va heatmap ma’lumotlarini avtomatik kuzatadi. Tarmoq so‘rovlarini monitoring qilish ixtiyoriy sozlama sifatida mavjud. Native ES module ko‘rinishida tarqatiladi va zamonaviy brauzerlarda ishlaydi.

O‘rnatish

Script tegi (CDN)

Snippet’ni yopuvchi </head> tegi oldidan qo‘shing. type="module"ga e’tibor bering — SDK ES module bo‘lgani uchun bu majburiy. Session replay koddan alohida ajratilgan: u versiyasi mos recorder chunk sifatida faqat replay yoqilgandan keyin yuklanadi. Shu sabab replay o‘chiq paytda asosiy bundle kichik qoladi.

html

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

Eslatma

SDK script URL’dan project_id va api_keyni o‘qiydi va ishga tushadi. Sozlamalarni ilova kodida bermoqchi bo‘lsangiz, URL parametrlarini olib tashlab, o‘rniga Kixo.init({...})ni chaqiring — modul yuklangach global Kixo obyekti mavjud bo‘ladi.

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

Sozlamalarni script URL orqali emas, ilova kodida bermoqchi bo‘lsangiz, shundan foydalaning. U CDN embed’dagi bilan bir xil Kixo API’ni taqdim etadi.

bash

npm install @kixo.io/web

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

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

No-Code platformalar

Agar Lovable, Bolt, v0 yoki Replit kabi AI asosidagi builderdan foydalanayotgan bo‘lsangiz, script tag snippet’ni builder chattingizga yoki code injection sozlamalariga to‘g‘ridan to‘g‘ri joylang. Ko‘p builderlar skriptlarni saytingizning <head> qismiga qo‘shishni qo‘llab-quvvatlaydi.

Konfiguratsiya

Ikki qatorli ulash quyidagi lokal analytics standartlaridan foydalanadi. Request monitoring ixtiyoriyligicha qoladi. Session replay ataylab Kixo.init()ga kiritilmagan: uni yoqish, sampling, maxfiylik, davomiylik va yozib olish sozlamalari faqat loyiha dashboardi orqali boshqariladi.

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

});

Eslatma

Loyiha boshqaradigan konfiguratsiya. Dashboard sozlamalari mahalliy analytics trekerlarini o‘chirib qo‘yishi mumkin. Replay uchun esa umuman mahalliy yoqish flagi yo‘q: uni Settings → Session replay ostida sozlaysiz, SDK esa konfiguratsiyaning navbatdagi yangilanishida loyihadagi eng so‘nggi siyosatga amal qiladi.

Avtomatik kuzatiladigan eventlar

Standart konfiguratsiyada Kixo quyidagi eventlarni qo‘shimcha kodsiz avtomatik yozib oladi:

page_view — har bir navigatsiya (dastlabki yuklanish + SPA route o‘zgarishlari)
session_start / session_end
click — element selektori bo‘yicha barcha bosishlar
scroll_depth — 25 / 50 / 75 / 100 % chegaralari
rage_click — bir xil elementga takroriy bosishlar
dead_click — interaktiv bo‘lmagan elementlarga bosishlar
error — ushlanmagan JavaScript istisnolari va promise rad etilishlari
performance — sahifa yuklanishi va Web Vitals metrikalari (LCP, FCP, FID, CLS, INP, TTFB)
network_request — network kuzatuvi yoqilganda so‘rov vaqt ko‘rsatkichlari ixtiyoriy ravishda yig‘iladi
heatmap_click / scroll — heatmap ma’lumotlari

To‘liq ro‘yxatni Hodisalar ma’lumotnomasida ko‘ring.

Custom eventlar

Kixo.track()

Ixtiyoriy propertylar bilan maxsus event yuboring.

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

Typed event helperlar

Kixo nomi bo‘yicha taniydigan eventlar (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite) uchun Kixo.track() ustidagi qulay qatlam. Typed wrapperlar propertylarni kompilyatsiya vaqtida tekshiradi va kalit nomlari uchun yagona manba bo‘lib xizmat qiladi — backend’dagi standard-event aniqlagichi nomlarni aynan o‘zgarmagan ko‘rinishda solishtiradi.

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

Joriy qurilmani tanilgan foydalanuvchi bilan bog‘lang. Rezervdagi standart property kalitlari $ prefiksi bilan keladi (Mixpanel konvensiyasi), shuning uchun ular sizning custom traitlaringizdan namespace bo‘yicha ajraladi va dashboard’dagi profil ustunlariga chiqadi — to‘liq 37 ta kalit ro‘yxati uchun quyidagi Standart property katalogiga qarang.

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() — foydalanuvchini segmentlash uchun belgilang

Joriy foydalanuvchiga ixtiyoriy key/value atributlar biriktiring. Qiymatlar string, number yoki booleanlar bo‘lishi mumkin — boolean ko‘rinishi foydalanuvchini keyinchalik segmentlar, email kampaniyalari yoki chat so‘rovlarida teg uchun belgilashning eng toza usuli.

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

Propertylar localStorage ichida qayta yuklashlar orasida saqlanadi va keyingi eventlarga avtomatik qo‘shiladi. Chatda "subscribe qiymati true bo‘lgan foydalanuvchilar uchun email kampaniya yarating" kabi promptlardan foydalaning — Kixo segmentni tuzadi va shablon qoralamasini avtomatik tayyorlaydi. Kixo.reset() paytida tozalanadi.

Kixo.group()

Foydalanuvchini kompaniya yoki tashkilot bilan bog‘lang.

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

Kixo.reset()

Identity, super-propertylar va saqlangan navbatni tozalang. Logout vaqtida shuni chaqiring, shunda keyingi eventlar oldingi foydalanuvchiga biriktirilmaydi.

Kixo.reset();

Standart property katalogi

Ajratilgan property kalitlari maxsus traitlaringiz bilan to‘qnashmasligi uchun $ prefiksi bilan keladi. Kixo katalogida 37 ta kalit bor: 3 ta universal to‘plam (identity, geo, lifecycle) va 5 ta B2B vertikal to‘plam (subscription, e-commerce, media, marketplace, loyalty). Mahsulotingizga moslarini belgilang — dashboard faqat to‘ldirilgan to‘plamlarni ko‘rsatishga moslashadi.

Identity

Har doim qo‘llanadi. Profil sarlavhasidagi ustunlarni belgilaydi.

Kalit	Turi	Tavsif
`$email`	satr	Asosiy email; ko‘pincha identifikatorlarni bog‘lashda merge key sifatida ishlatiladi.
`$phone`	satr	E.164 telefon raqami.
`$name`	satr	To‘liq ko‘rinadigan nom.
`$first_name`	satr	Ism.
`$last_name`	satr	Familiya.
`$avatar_url`	satr	Foydalanuvchi avatar rasmi uchun to‘liq URL.

Geo

Geografik kontekst.

Kalit	Turi	Tavsif
`$country`	satr	ISO 3166 mamlakat kodi.
`$city`	satr	Shahar nomi.
`$region`	satr	Shtat yoki viloyat.
`$timezone`	satr	`America/Los_Angeles` kabi IANA zona nomi.
`$language`	satr	`en` yoki `ru-RU` kabi IETF tegi.
`$locale`	satr	To‘liq locale identifikatori.

Hayot sikli

Ularni qachon ko‘rganmiz.

Kalit	Turi	Tavsif
`$created`	ISO8601	Ro‘yxatdan o‘tish yoki akkaunt yaratilgan vaqt.
`$last_seen`	ISO8601	Oxirgi faollik vaqti.

Obuna

Agar mahsulotingizda tariflar bo‘lsa, belgilang.

Kalit	Turi	Tavsif
`$plan`	satr	Tarif identifikatori — `free`, `pro`, `enterprise`.
`$subscription_status`	satr	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Joriy sinov muddati tugaydigan vaqt.
`$mrr`	raqam	Hisob valyutasidagi oylik takroriy tushum.
`$subscription_started`	ISO8601	Joriy obuna boshlangan vaqt.

Elektron tijorat

Agar mahsulot sotsangiz, belgilang.

Kalit	Turi	Tavsif
`$lifetime_orders`	raqam	Yakunlangan buyurtmalar soni.
`$lifetime_revenue`	raqam	Jami xarajat.
`$aov`	raqam	O‘rtacha buyurtma qiymati.
`$last_purchase`	ISO8601	Eng so‘nggi muvaffaqiyatli xarid.
`$first_purchase`	ISO8601	Birinchi muvaffaqiyatli xarid.
`$cart_abandoned_count`	raqam	Savatchani tashlab ketishlar soni, butun davr bo‘yicha.

Media

Agar kontent nashr qilsangiz, belgilang.

Kalit	Turi	Tavsif
`$content_tier`	satr	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV satri yoki massiv	Foydalanuvchi kuzatadigan kategoriyalar.
`$watch_time_total`	raqam	Jami ko‘rish vaqti, soniyalarda.
`$last_played`	ISO8601	Oxirgi ijro boshlanishi.

Marketpleys

Agar ikki tomonlama platforma bo‘lsangiz, belgilang.

Kalit	Turi	Tavsif
`$seller_tier`	satr	Sotuvchi tomonidagi tier slug.
`$buyer_tier`	satr	Xaridor tomoni tier slugi.
`$listings_count`	raqam	Foydalanuvchiga tegishli faol e’lonlar.
`$reviews_count`	raqam	Foydalanuvchi olgan sharhlar.
`$verified`	boolean	KYC holati.

Sodiqlik

Faollik va mukofot dasturlari uchun qo‘llanadi.

Kalit	Turi	Tavsif
`$loyalty_points`	raqam	Ayni paytda ishlatish mumkin bo‘lgan ballar balansi.
`$vip_level`	satr	VIP tarif identifikatori.
`$referral_count`	raqam	Ushbu foydalanuvchiga biriktirilgan muvaffaqiyatli referallar.

Maslahat

Mos andaza topilmadimi? Custom traitlar uchun oddiy kalitlardan foydalaning. Ular dashboard’dagi Custom Traits panelida ko‘rinadi va profil ustunlarini keraksiz to‘ldirmaydi. Yuqoridagi 5 ta vertikal to‘plam B2B’da eng ko‘p uchraydigan shakllar bo‘yicha taxminiy tavsiyalar xolos — mijozga xos atamalar (masalan, shipping_plan) oddiy kalit bo‘lib qoladi.

Super-properties

Har bir yuboriladigan eventga avtomatik qo‘shiladigan, sessiya darajasidagi kalit-qiymat juftlari. identify() traitlaridan farqli ravishda (ular identifikatsiyani ifodalaydi), super-properties sessiya kontekstini bildiradi — faol A/B varianti, build turi, yoqilgan feature flaglar, affiliate ref. Ular localStorage ichida qayta yuklashlar orasida saqlanadi; reset() paytida tozalanadi. Kalitlar to‘qnashsa, track() dagi event uchun berilgan properties har doim ustun keladi.

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

Issiqlik xaritalari

Heatmap yozuvi standart bo‘yicha yoqilgan — bosishlar va scroll chuqurligi, ikkalasi ham 100 % namuna bilan olinadi. Sichqoncha harakati esa ixtiyoriy (hajmi katta; foydali bo‘lsa, sahifa bo‘yicha yoqing).

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

Sessiyani qayta ko‘rish

Session replay rrweb DOM snapshoti va o‘zgarishlar oqimini yozib oladi, shunda dashboard sahifani eventlar izi bilan birga varaqlab ko‘rish mumkin bo‘lgan sessiya sifatida tiklay oladi. Bu ekran videosi emas, balki DOM rekonstruksiyasi. Replay standart bo‘yicha o‘chiq. Uni loyiha uchun Boshqaruv paneli → Sozlamalar → Sessiya qayta ko‘rishi bo‘limida yoqing; buning uchun ilova kodini o‘zgartirish shart emas. Yoqilgach, recorder replay faollashtirilganidan keyin versiyasi mos alohida chunk sifatida yuklab olinadi.

Eslatma

Asosiy manba — dashboard. Enable replay, Mask inputs, maksimal davomiylik va kengaytirilgan capture boshqaruvlarini shu yerda sozlang. captureOnCellular ham iOS va Android uchun shu loyiha siyosatida saqlanadi; brauzerlar Wi‑Fi va mobil tarmoqni ishonchli farqlay olmaydi, shuning uchun Web SDK bu native-only cheklovni bildiradi va e’tiborsiz qoldiradi.

Nimalar maskalanadi

Replay xavfsiz yoqish uchun ishlab chiqilgan. Maxfiy kontentni himoya qiladigan uch qatlam bor va ularning barchasi standart bo‘yicha yoqilgan:

Kiritish maydonlarini maskalash loyiha darajasida boshqariladi — Dashboard’dagi Kiritish maydonlarini maskalash sozlamasi yoqilganida (standart holat), kiritilgan belgilar brauzerdan chiqishidan oldin yulduzchalarga almashtiriladi. Uni faqat aniq va past sezgirlikdagi ehtiyoj uchun o‘chiring; identifikatsiya, autentifikatsiya va to‘lov maydonlari baribir maskalanadi.
data-kixo-mask atributi elementni va uning butun pastki daraxtini bloklaydi. Uni shaxsiy yoki maxfiy kontent bo‘lishi mumkin bo‘lgan istalgan konteynerga qo‘ying; replay’da o‘sha pastki daraxtning matni yoki DOM tarkibi emas, placeholder ko‘rinadi.
html
```
<div data-kixo-mask>
  
  
</div>
```
Maxfiy maydonlar har doim maskalanadi — parol, karta raqami, CVV, SSN, secret yoki tokenga o‘xshash inputlar (type, name, id yoki autocomplete bo‘yicha) loyiha Kiritish maydonlarini maskalash sozlamasi o‘chiq bo‘lsa ham maskalanadi. Ko‘rinadigan matn va seriyalashtirilgan DOM atributlari ham yuklashdan oldin Kixo PII sanitayzeridan o‘tadi.

Ma’lumot yig‘ish

SDK integratsiya va loyiha sozlamalarida yoqilgan trackerlarni, shuningdek ilovangiz yuborgan eventlar va propertylarni yozib oladi.

Yozuvlar qayerga yuboriladi

SDK rrweb eventlarini hajmi cheklangan segmentlarga gzip qiladi, Kixo’dan loyiha doirasidagi signed upload URL oladi va shu segmentlarni to‘g‘ridan to‘g‘ri replay storage’ga yuklaydi. Qayta tiklangan sessiyani Replay → Sessiyalar ichida oching; u ayni sessiyaning analytics izi bilan bog‘langan bo‘ladi.

Eslatma

Replay tarifingizga bog‘liq. Qancha sessiya yozib olinishi va saqlanishi loyiha tarifingizga bog‘liq; past tariflarda ham Kixo yengil session metama’lumot yozadi, shunda sessiya ro‘yxatlar va analytics’da ko‘rinadi.

Feature flaglar

Flag qiymatlarini runtime’da Kixo.getFeatureFlag() orqali tekshiring.

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

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

Yetkazish va offline holatda ishlash

SDK eventlarni lokal navbatga qo‘yadi, paketlab yuboradi va vaqtinchalik xatolarda backoff bilan qayta urinadi. Agar yig‘ish loyiha sozlamalaridan to‘xtatilgan bo‘lsa, u qayta yoqilmaguncha yangi eventlar yuborilmaydi.

Diagnostika

Faqat o‘qish uchun health snapshot — devtools’da “eventlarim nega kelmayapti?” degan holatlarni tahlil qilishda foydali.

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