Web SDK

Kixo Web SDK-k klikak, orri-ikustaldiak, saioak, erroreak, scroll sakonera, web vitals, rage-click, dead-click eta heatmap datuak automatikoki erregistratzen ditu, lerro bakarreko txertaketa batekin. Sare-eskaeren monitorizazioa aukeraz gaitu daiteke. ES modulu natibo gisa banatzen da, eta nabigatzaile modernoetan funtzionatzen du.

Instalazioa

Script etiketa (CDN)

Gehitu snippet-a </head> itxiera-etiketaren aurretik. Kontuan hartu type="module": beharrezkoa da, SDKa ES modulu bat delako. Session replay version-matched recorder chunk bereizi batean kargatzen da, eta replay gaituta dagoenean bakarrik; horri esker, oinarrizko bundle-a txiki mantentzen da replay itzalita dagoenean.

html

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

Oharra

SDK-k script-aren URLetik project_id eta api_key irakurtzen ditu, eta bere burua hasieratzen du. Aukerak aplikazio-kodean konfiguratu nahi badituzu, kendu URL parametroak eta deitu Kixo.init({...}); modulua kargatu ondoren Kixo objektu globala erabilgarri egongo da.

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

Erabili hau aukerak script URLaren bidez beharrean aplikazio-kodean konfiguratu nahi dituzunean. CDN txertaketaren Kixo API bera eskaintzen du.

bash

npm install @kixo.io/web

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

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

No-Code plataformak

Lovable, Bolt, v0 edo Replit bezalako AI bidezko builder batekin ari bazara, itsatsi script-tag snippet-a zuzenean builderraren txatean edo code-injection ezarpenetan. Builder gehienek script-ak zure guneko <head> atalean gehitzea onartzen dute.

Konfigurazioa

Bi lerroko txertaketak beheko tokiko analitika-ezarpen lehenetsiak erabiltzen ditu. Eskaeren monitorizazioa aukerakoa izaten jarraitzen du. Saioen erreprodukzioa nahita ez da Kixo.init()-n konfiguratzen: aktibazioa, laginketa, pribatutasuna, iraupena eta kaptura-ezarpenak proiektuaren aginte-paneletik soilik datoz.

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

});

Oharra

Proiektuak kontrolatutako konfigurazioa. Dashboard ezarpenek analytics tracker lokalak desgaitu ditzakete. Replay-k ez du tokiko gaitze-bandera positiborik: konfiguratu Settings → Session replay atalean, eta SDKak proiektuaren azken politika aplikatuko du hurrengo config refresh-ean.

Automatikoki jarraitutako gertaerak

Lehenetsitako konfigurazioarekin, Kixo-k automatikoki jasotzen ditu gertaera hauek, kode gehigarririk gabe:

page_view — nabigazio guztiak (hasierako karga + SPA route aldaketak)
session_start / session_end
click — klik-interakzio guztiak, elementu-hautatzailearekin
scroll_depth — %25 / %50 / %75 / %100 atalaseak
rage_click — elementu bereko klik errepikatuak
dead_click — elementu ez-interaktiboetako klikak
error — harrapatu gabeko JavaScript salbuespenak + promise rejection-ak
performance — page-load eta Web Vitals metrikak (LCP, FCP, FID, CLS, INP, TTFB)
network_request — request timing aukerazkoa, network tracking gaituta dagoenean
heatmap_click / scroll — heatmap datuak

Ikusi zerrenda osoa hemen: Gertaeren erreferentzia.

Gertaera pertsonalizatuak

Kixo.track()

Bidali gertaera pertsonalizatu bat, nahi izanez gero propietateekin.

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

Typed event helper-ak

Kixo.track() gaineko erosotasun-geruza bat da, Kixo-k izenaren arabera ezagutzen dituen gertaeretarako (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Typed wrapper-ek propietateen balidazioa compile-time-an ematen dute, eta gako-izenetarako iturri bakarra eskaintzen dute; backend-eko standard-event detector-ak hitzez hitz egiten du parekatzea.

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

Lotu uneko gailua erabiltzaile ezagun batekin. Erreserbatutako standard property key-ek $ aurrizkia daramate (Mixpanel konbentzioa), zure custom trait-etatik bereizteko eta dashboardeko profile zutabeetara igotzeko; beheko Propietate estandarren katalogoa-n duzu 37 key-en zerrenda osoa.

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() — etiketatu erabiltzailea segmentatzeko

Erantsi gako/balio atributu arbitrarioak uneko erabiltzaileari. Balioak string, number edo boolean balioak izan daitezke; boolean formatua da modurik garbiena erabiltzaile bat etiketa egiteko, gero segmentu, email kanpaina edo chat query-etan erabili ahal izateko.

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

Propietateak localStorage barruan gordetzen dira berriz kargatzeen artean, eta ondorengo gertaerei automatikoki eransten zaizkie. Erabili txatean honelako aginduekin: "sortu email kanpaina bat subscribe true duten erabiltzaileentzat" — Kixo-k segmentua sortu eta txantiloia automatikoki prestatzen du. Kixo.reset() egitean garbitzen dira.

Kixo.group()

Lotu erabiltzailea enpresa edo erakunde batekin.

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

Kixo.reset()

Garbitu identitatea, super-properties eta gordetako ilara. Deitu logout egitean, ondorengo gertaerak aurreko erabiltzaileari ez esleitzeko.

Kixo.reset();

Propietate estandarren katalogoa

Erreserbatutako property key-ek $ aurrizkia daramate, zure trait pertsonalizatuetatik bereizteko. Kixo-ren katalogoak 37 gako biltzen ditu: 3 pakete unibertsaletan (identity, geo, lifecycle) eta 5 B2B pakete bertikaletan (subscription, e-commerce, media, marketplace, loyalty). Ezarri zure produktuari dagozkionak; dashboardak automatikoki egokitzen du ikuspegia, eta bete dituzun paketeak bakarrik erakusten ditu.

Identitatea

Beti da garrantzitsua. Profile header-eko zutabeak ezartzen ditu.

Gakoa	Mota	Deskribapena
`$email`	katea	Helbide elektroniko nagusia; askotan identitateak bateratzeko merge key gisa erabiltzen da.
`$phone`	katea	E.164 telefono-zenbakia.
`$name`	katea	Bistaratzeko izen osoa.
`$first_name`	katea	Izena.
`$last_name`	katea	Abizena.
`$avatar_url`	katea	Erabiltzailearen avatar-irudiaren URL osoa.

Geo

Testuinguru geografikoa.

Gakoa	Mota	Deskribapena
`$country`	katea	ISO 3166 herrialde-kodea.
`$city`	katea	Hiriaren izena.
`$region`	katea	Estatua edo probintzia.
`$timezone`	katea	`America/Los_Angeles` bezalako IANA zona.
`$language`	katea	`en` edo `ru-RU` bezalako IETF etiketa.
`$locale`	katea	Locale identifikatzaile osoa.

Bizi-zikloa

Noiz ikusi genuen.

Gakoa	Mota	Deskribapena
`$created`	ISO8601	Erregistroaren edo kontu-sorkuntzaren unea.
`$last_seen`	ISO8601	Azken interakzioaren ordua.

Subscription

Ezarri zure produktuak planak baditu.

Gakoa	Mota	Deskribapena
`$plan`	katea	Tier slug-a — `free`, `pro`, `enterprise`.
`$subscription_status`	katea	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Noiz amaitzen den uneko trial-a.
`$mrr`	zenbakia	Hileko diru-sarrera errepikakorra, kontuaren monetan.
`$subscription_started`	ISO8601	Noiz hasi zen uneko harpidetza.

E-commerce

Ezarri produktuak saltzen badituzu.

Gakoa	Mota	Deskribapena
`$lifetime_orders`	zenbakia	Amaitutako eskaeren kopurua.
`$lifetime_revenue`	zenbakia	Gastu osoa.
`$aov`	zenbakia	Eskaeraren batez besteko balioa.
`$last_purchase`	ISO8601	Azken erosketa arrakastatsua.
`$first_purchase`	ISO8601	Lehen erosketa arrakastatsua.
`$cart_abandoned_count`	zenbakia	Saskia uzteko ekintzen kopuru metatua.

Media

Ezarri edukia argitaratzen baduzu.

Gakoa	Mota	Deskribapena
`$content_tier`	katea	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV string edo array	Erabiltzaileak jarraitzen dituen kategoriak.
`$watch_time_total`	zenbakia	Ikusitako denbora metatua, segundotan.
`$last_played`	ISO8601	Erreprodukzioaren azken hasiera.

Marketplace

Ezarri bi aldeko plataforma bazara.

Gakoa	Mota	Deskribapena
`$seller_tier`	katea	Saltzailearen aldeko tier slug-a.
`$buyer_tier`	katea	Buyer aldeko tier slug-a.
`$listings_count`	zenbakia	Erabiltzailearen zerrenda aktiboak.
`$reviews_count`	zenbakia	Erabiltzaileak jasotako iritziak.
`$verified`	boolean	KYC egoera.

Leialtasuna

Engagement eta sari programetarako.

Gakoa	Mota	Deskribapena
`$loyalty_points`	zenbakia	Uneko puntu trukagarrien saldoa.
`$vip_level`	katea	VIP tier slug-a.
`$referral_count`	zenbakia	Erabiltzaile honi egotzitako gomendio arrakastatsuak.

Aholkua

Ez duzu zure eredua ikusten? Erabili gako soilak custom trait-etarako. Dashboardeko Custom Traits panelean agertzen dira, profile zutabeak zikindu gabe. Goiko 5 pakete bertikalak B2B eredurik ohikoenen inguruko proposamen praktikoak dira; bezeroaren terminologia espezifikoa (shipping_plan, adibidez) gako soil gisa uzten da.

Super-properties

Saioko gako/balio bikoteak, bidaltzen den gertaera bakoitzari automatikoki eransten zaizkionak. identify() traitek identitatea deskribatzen dute; super-properties-ek, berriz, saioaren testuingurua: A/B aldaera aktiboa, build aldaera, gaitutako feature flag-ak, affiliate ref. localStorage barruan gordetzen dira berriz kargatzeen artean, eta reset() egitean garbitzen dira. Gako berean talka eginez gero, track() deiko gertaera-mailako properties balioek dute beti lehentasuna.

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

Bero-mapak

Heatmap grabazioa lehenetsita gaituta dago: klikak eta scroll sakonera, biak %100ean laginduta. Mouse movement aukerakoa da (bolumen handikoa; gaitu orriz orri benetan erabilgarria denean).

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

Saioen erreprodukzioa

Session replay-k rrweb-en DOM argazkia eta mutazio-fluxua grabatzen ditu, dashboardak orria berreraiki eta gertaeren arrastoaren ondoan aurrera eta atzera mugitu daitekeen saio gisa erakutsi dezan. DOM berreraikuntza da, ez pantailaren bideo-grabaketa. Replay lehenespenez desgaituta da. Gaitu proiektuan Aginte-panela → Ezarpenak → Saioaren berrerreprodukzioa atalean; ez da aplikazio-kodea aldatu behar. Gaituta dagoenean, grabagailua replay aktibatu ondoren eskuratzen da, bertsio bereko chunk bereizi batetik.

Oharra

Dashboarda da iturri ofiziala. Ezarri han Enable replay, Mask inputs, gehieneko iraupena eta kaptura-kontrol aurreratuak. captureOnCellular iOS eta Android-erako proiektu-politika berean gordetzen da; nabigatzaileek ez dute Wi‑Fi eta datu mugikorren arteko bereizketa fidagarririk ematen, beraz Web SDKak murrizketa hori jakinarazi baina ez du aplikatzen, natiboa baino ez delako.

Zer maskaratzen den

Replay segurtasunez gaitu ahal izateko diseinatuta dago. Eduki sentikorra babesteko hiru geruza daude, denak lehenespenez gaituta:

Sarreretako maskaratzea proiektuak kontrolatzen du — Dashboard-eko Maskaratu sarrerak ezarpena gaituta dagoenean (lehenetsia), idatzitako karaktereak izartxoz ordezkatzen dira nabigatzailetik atera aurretik. Itzali bakarrik sentikortasun txikiko behar zehatz baterako; identitate-, autentifikazio- eta ordainketa-eremuak maskaratuta geratzen dira hala ere.
data-kixo-mask atributuak elementu bat eta haren azpizuhaitz osoa blokeatzen ditu. Jarri eduki pertsonal edo konfidentziala har dezakeen edozein edukiontzitan; replay-an ordezko bat ikusiko da, ez azpizuhaitz horren testua edo DOM edukia.
html
```
<div data-kixo-mask>
  
  
</div>
```
Eremu sentikorrak beti maskaratzen dira — password, card number, CVV, SSN, secret edo token itxura duten input-ak (type, name, id edo autocomplete arabera) maskaratu egiten dira, proiektuaren Maskaratu sarrerak ezarpena itzalita egon arren. Ikusgai dagoen testua eta serializatutako DOM atributuak ere Kixo-ren PII sanitizer-etik pasatzen dira kargatu aurretik.

Datu-bilketa

SDK-k zure integrazioan eta proiektuaren ezarpenetan gaituta dauden tracker-ak jasotzen ditu, baita zure aplikazioak bidaltzen dituen gertaerak eta propietateak ere.

Nora doazen grabazioak

SDK-k rrweb gertaerak gzip bidez konprimitzen ditu tamaina mugatuko segmentuetan, Kixo-ri proiektuari lotutako signed upload URL bat eskatzen dio, eta segmentu horiek zuzenean replay biltegira igotzen ditu. Ireki berreraikitako saioa hemen: Berrerreprodukzioa → Saioak; saio bereko analytics arrastora eramaten du.

Oharra

Replay zure planaren araberakoa da. Zenbat saio kapturatu eta gordetzen diren zure proiektu-planaren araberakoa da; maila apalagoetan, Kixok session metadatuak arina grabatzen jarraitzen du, saioa zerrendetan eta analitikan ager dadin.

Feature flag-ak

Egiaztatu flag balioak exekuzioan Kixo.getFeatureFlag() erabilita.

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

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

Bidalketa eta offline jokabidea

SDK-k gertaerak lokalean ilaran gordetzen ditu, multzoka bidaltzen ditu, eta aldi baterako hutsegiteak backoff bidez berriz saiatzen ditu. Bilketa proiektuaren ezarpenetatik pausatzen bada, ez da gertaera berririk bidaliko berriro gaitu arte.

Diagnostika

Irakurtzeko soilik den osasun-argazkia; erabilgarria da dev tools-etan "zergatik ez dira nire gertaerak iristen?" galdera argitzeko.

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