Web SDK

Kixo Web SDK spårar automatiskt klick, sidvisningar, sessioner, fel, skrolldjup, Web Vitals, rage clicks, dead clicks och heatmap-data med en inbäddning på en rad. Övervakning av nätverksanrop finns som en valfri inställning. Distribueras som en inbyggd ES-modul och fungerar i moderna webbläsare.

Installation

Script-tagg (CDN)

Lägg in kodsnutten före den avslutande taggen </head>. Observera type="module" — det krävs eftersom SDK är en ES-modul. Session replay är koddelat i ett versionsmatchat inspelningschunk som bara laddas när replay har aktiverats, så grundbundlen förblir liten när replay är avstängt.

html

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

Obs!

SDK:t läser project_id och api_key från skriptets URL och initierar sig själv. Om du vill konfigurera alternativ i applikationskoden tar du bort URL-parametrarna och anropar Kixo.init({...}) i stället — det globala objektet Kixo finns tillgängligt när modulen har lästs in.

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

Använd detta när du vill konfigurera alternativ i applikationskoden i stället för via skriptets URL. Det exponerar samma Kixo API som CDN-inbäddningen.

bash

npm install @kixo.io/web

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

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

No-code-plattformar

Om du bygger med en AI-driven webbplatsbyggare som Lovable, Bolt, v0 eller Replit klistrar du in kodsnutten med script-taggen direkt i byggarens chatt eller inställningar för kodinjektion. De flesta byggare stöder att lägga till script i webbplatsens <head>.

Konfiguration

Inbäddningen på två rader använder de lokala standardinställningarna för analys nedan. Övervakning av nätverksanrop är fortfarande valfri. Session replay finns medvetet inte i Kixo.init(): aktivering, sampling, integritet, längd och inspelningsinställningar styrs enbart från projektets dashboard.

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

});

Obs!

Konfiguration som styrs på projektnivå. I dashboardens inställningar kan du stänga av lokala analysspårare. Replay har ingen lokal flagga för att uttryckligen aktiveras. Konfigurera det under Settings → Session replay, så följer SDK den senaste projektpolicyn vid nästa konfigurationsuppdatering.

Automatiskt spårade händelser

Med standardkonfigurationen samlar Kixo automatiskt in de här händelserna utan extra kod:

page_view — varje navigering (första sidladdningen + ändringar av SPA-rutter)
session_start / session_end
click — alla klickinteraktioner med elementväljare
scroll_depth — tröskelvärden vid 25 / 50 / 75 / 100 %
rage_click — upprepade klick på samma element
dead_click — klick på icke-interaktiva element
error — ohanterade JavaScript-undantag + avvisade promises
performance — mätvärden för sidladdning och Web Vitals (LCP, FCP, FID, CLS, INP, TTFB)
network_request — valfri tidsmätning för förfrågningar när nätverksspårning är aktiverad
heatmap_click / scroll — heatmapdata

Se hela listan i Händelsereferens.

Anpassade händelser

Kixo.track()

Skicka en anpassad händelse med valfria egenskaper.

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

Typade hjälpfunktioner för händelser

Ett smidigt lager ovanpå Kixo.track() för händelser som Kixo känner igen på namn (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). De typade hjälpfunktionerna ger validering av egenskaper vid kompilering och en enda källa till sanning för nyckelnamn — backendens detektor för standardhändelser matchar ordagrant.

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

Koppla den aktuella enheten till en känd användare. Reserverade standardnycklar för egenskaper har prefixet $ (Mixpanel-konvention), så att de hålls åtskilda från dina egna anpassade egenskaper och lyfts upp till dashboardens profilkolumner. Se Standardkatalog för egenskaper nedan för hela listan med 37 nycklar.

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ärk upp en användare för segmentering

Lägg till valfria nyckel/värde-attribut för den aktuella användaren. Värden kan vara strängar, tal eller booleska värden — booleska värden är det renaste sättet att tagg en användare för senare målgruppsstyrning i segment, e-postkampanjer eller chattfrågor.

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

Egenskaper sparas i localStorage mellan omladdningar och läggs automatiskt till på efterföljande händelser. Använd dem i chatten med promptar som "skapa en e-postkampanj för användare där subscribe är true" — Kixo bygger då automatiskt ett segment och skapar ett mallutkast. Rensas vid Kixo.reset().

Kixo.group()

Koppla användaren till ett företag eller en organisation.

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

Kixo.reset()

Rensa identitet, super-properties och den sparade kön. Anropa detta vid utloggning så att efterföljande händelser inte tillskrivs föregående användare.

Kixo.reset();

Standardkatalog för egenskaper

Reserverade egenskapsnycklar har prefixet $, så att de hålls åtskilda från dina egna traits. Kixo har en katalog med 37 nycklar i 3 universella paket (identitet, geografi, livscykel) och 5 B2B-paket för olika produktområden (prenumeration, e-handel, media, marknadsplats, lojalitet). Ange de som passar din produkt — dashboarden anpassar sig och visar bara de paket du faktiskt fyller med data.

Identitet

Alltid relevant. Anger kolumnerna i profilhuvudet.

Nyckel	Typ	Beskrivning
`$email`	sträng	Primär e-postadress, ofta nyckeln som används för att slå ihop identiteter.
`$phone`	sträng	Telefonnummer i E.164-format.
`$name`	sträng	Fullständigt visningsnamn.
`$first_name`	sträng	Förnamn.
`$last_name`	sträng	Efternamn.
`$avatar_url`	sträng	Fullständig URL till användarens avatarbild.

Geografi

Geografisk kontext.

Nyckel	Typ	Beskrivning
`$country`	sträng	Landskod enligt ISO 3166.
`$city`	sträng	Stadsnamn.
`$region`	sträng	Delstat eller provins.
`$timezone`	sträng	IANA-zon som `America/Los_Angeles`.
`$language`	sträng	IETF-tagg som `en` eller `ru-RU`.
`$locale`	sträng	Fullständig språkversionsidentifierare.

Livscykel

När vi senast såg dem.

Nyckel	Typ	Beskrivning
`$created`	ISO8601	Tidpunkt för registrering eller kontoskapande.
`$last_seen`	ISO8601	Tidpunkt för senaste aktivitet.

Prenumeration

Ange om produkten har abonnemang.

Nyckel	Typ	Beskrivning
`$plan`	sträng	Slug för nivå — `free`, `pro`, `enterprise`.
`$subscription_status`	sträng	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	När den nuvarande provperioden löper ut.
`$mrr`	tal	Månatlig återkommande intäkt i kontots valuta.
`$subscription_started`	ISO8601	När den nuvarande prenumerationen började.

E-handel

Ange om ni säljer produkter.

Nyckel	Typ	Beskrivning
`$lifetime_orders`	tal	Antal slutförda beställningar.
`$lifetime_revenue`	tal	Total kostnad.
`$aov`	tal	Genomsnittligt ordervärde.
`$last_purchase`	ISO8601	Senaste genomförda köp.
`$first_purchase`	ISO8601	Första genomförda köp.
`$cart_abandoned_count`	tal	Totalt antal övergivna varukorgar.

Media

Ange om ni publicerar innehåll.

Nyckel	Typ	Beskrivning
`$content_tier`	sträng	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV-sträng eller array	Kategorier som användaren följer.
`$watch_time_total`	tal	Total visningstid i sekunder.
`$last_played`	ISO8601	Senaste uppspelningsstart.

Marknadsplats

Ange om ni är en plattform med två sidor.

Nyckel	Typ	Beskrivning
`$seller_tier`	sträng	Slug för säljarens nivå.
`$buyer_tier`	sträng	Slug för köparsidan.
`$listings_count`	tal	Aktiva annonser som användaren äger.
`$reviews_count`	tal	Omdömen som användaren har fått.
`$verified`	boolesk	KYC-status.

Lojalitet

Används för engagemangs- och belöningsprogram.

Nyckel	Typ	Beskrivning
`$loyalty_points`	tal	Aktuellt saldo för inlösbara poäng.
`$vip_level`	sträng	Slug för VIP-nivå.
`$referral_count`	tal	Lyckade rekommendationer som tillskrivits den här användaren.

Tips

Saknas ditt mönster? Använd vanliga nycklar för anpassade egenskaper. De visas i dashboardens panel för Custom Traits utan att ta plats i profilkolumnerna. De fem vertikalpaketen ovan är genomtänkta gissningar om de vanligaste B2B-uppläggen — kundspecifik terminologi, till exempel shipping_plan, lämnas utan prefix.

Superegenskaper

Nyckel/värde-par per session som automatiskt läggs till på varje utgående händelse. Till skillnad från identify() traits, som beskriver identiteten, beskriver super-properties sessionskontexten — aktiv A/B-variant, build flavor, aktiverade feature flags och affiliate-referens. De sparas i localStorage mellan omladdningar och rensas vid reset(). properties per händelse på track() har alltid företräde vid nyckelkrock.

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

Värmekartor

Heatmap-inspelning är på som standard — klick och skrolldjup, båda samplas till 100 %. Musrörelser är valfria (hög volym; aktivera per sida om det behövs).

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

Sessionsåterspelning

Session replay spelar in en rrweb-ögonblicksbild av DOM och en mutationsström så att dashboarden kan återskapa sidan som en spolbar session bredvid händelseflödet. Det är en DOM-rekonstruktion, inte en skärminspelning som video. Replay är avstängt som standard. Aktivera det för projektet under Översikt → Inställningar → Sessionsrepris; ingen ändring i applikationskoden krävs. När replay är aktiverat hämtas inspelaren från ett separat versionsmatchat kodpaket.

Obs!

Dashboarden är källan till sanning. Där ställer du in Enable replay, Mask inputs, maximal längd och de avancerade inspelningskontrollerna. captureOnCellular lagras i samma projektpolicy för iOS och Android; webbläsare exponerar ingen tillförlitlig signal för Wi‑Fi jämfört med mobilnät, så SDK rapporterar och ignorerar den begränsningen, som bara gäller native.

Det här maskeras

Replay är utformat för att vara säkert att slå på. Tre lager skyddar känsligt innehåll, alla aktiverade som standard:

Maskering av inmatning styrs per projekt — när dashboardens inställning Maskera inmatningsfält är på, vilket är standard, ersätts skrivna tecken med asterisker innan de lämnar webbläsaren. Stäng bara av den för ett specifikt behov med låg känslighet. Fält för identitet, autentisering och betalning maskeras alltid.
Attributet data-kixo-mask blockerar ett element och hela dess underträd. Sätt den på valfri behållare som kan innehålla personuppgifter eller annat känsligt innehåll; i replayen visas en platshållare i stället för underträdets text eller DOM-innehåll.
html
```
<div data-kixo-mask>
  
  
</div>
```
Känsliga fält maskeras alltid — inmatningar som ser ut som lösenord, kortnummer, CVV, SSN, hemlighet eller token (utifrån type, name, id eller autocomplete) maskeras även när projektets inställning Maskera inmatningsfält är av. Synlig text och serialiserade DOM-attribut passerar också Kixo PII-sanitizer innan uppladdning.

Datainsamling

SDK:t samlar in de spårare som är aktiverade i integrations- och projektinställningarna, plus de händelser och egenskaper som applikationen skickar.

Var inspelningar lagras

SDK:t komprimerar rrweb-händelser med gzip till avgränsade segment, begär en projektspecifik signerad uppladdnings-URL från Kixo och laddar sedan upp segmenten direkt till lagringen för replay. Öppna den återskapade sessionen under Repriser → Sessioner; där finns en länk till samma sessions analysspår.

Obs!

Replay omfattas av din plan. Hur många sessioner som spelas in och sparas beror på projektets abonnemang. På lägre nivåer registrerar Kixo fortfarande lätta sessions-metadata, så att sessionen ändå visas i listor och analys.

Funktionsflaggor

Kontrollera flaggornas värden vid körning via Kixo.getFeatureFlag().

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

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

Leverans och offlinebeteende

SDK:t köar händelser lokalt, skickar dem i batcher och försöker igen vid tillfälliga fel med backoff. Om insamlingen pausas i projektinställningarna skickas inga nya händelser förrän insamlingen aktiveras igen.

Diagnostik

Skrivskyddad hälsobild — praktisk för felsökning i utvecklarverktyg när du undrar "varför kommer inte mina händelser fram?"

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