Web SDK

Kixo Web SDK sporer automatisk klikk, sidevisninger, økter, feil, skrolledybde, web vitals, rage-clicks, dead-clicks og heatmap-data med én linjes innbygging. Overvåking av nettverksforespørsler kan slås på som en valgfri innstilling. Leveres som en ES-modul og fungerer i moderne nettlesere.

Installasjon

Script-tag (CDN)

Legg inn kodebiten før den avsluttende </head>-taggen. Merk type="module" — dette er påkrevd fordi SDK er en ES-modul. Session replay er delt ut i en egen opptakerchunk med matchende versjon, som bare lastes når replay er aktivert. Dermed holder grunnpakken seg liten når replay er av.

html

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

Merknad

SDK-en leser project_id og api_key fra script-URL-en og initialiserer seg selv. Hvis du vil konfigurere alternativer i applikasjonskoden, fjerner du URL-parametrene og kaller Kixo.init({...}) i stedet — det globale objektet Kixo er tilgjengelig når modulen er lastet inn.

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

Bruk denne når du vil konfigurere alternativer i applikasjonskoden i stedet for via script-URL-en. Den eksponerer det samme Kixo-API-et som CDN-innbyggingen.

bash

npm install @kixo.io/web

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

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

No-code-plattformer

Hvis du bygger med en AI-drevet plattform som Lovable, Bolt, v0 eller Replit, kan du lime script-tag-kodebiten rett inn i chatten eller innstillingene for kodeinjeksjon. De fleste slike plattformer støtter å legge til skript i <head> på nettstedet ditt.

Konfigurasjon

Innbyggingskoden på to linjer bruker de lokale standardinnstillingene for analyse nedenfor. Overvåking av forespørsler må fortsatt slås på separat. Session Replay er bevisst utelatt fra Kixo.init(): aktivering, sampling, personvern, varighet og opptaksinnstillinger styres kun fra prosjektdashbordet.

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

});

Merknad

Konfigurasjon styrt på prosjektnivå. I Dashboard-innstillingene kan du slå av lokale analysetrackere. Replay har ikke noe lokalt flagg for å slå det på: konfigurer det under Settings → Session replay, så følger SDK den nyeste prosjektpolicyen ved neste oppdatering av konfigurasjonen.

Automatisk registrerte hendelser

Med standardoppsettet registrerer Kixo automatisk disse hendelsene uten ekstra kode:

page_view — all navigasjon (første innlasting + endringer i SPA-ruter)
session_start / session_end
click — alle klikkinteraksjoner med elementvelger
scroll_depth — terskler på 25 / 50 / 75 / 100 %
rage_click — gjentatte klikk på samme element
dead_click — klikk på ikke-interaktive elementer
error — uhåndterte JavaScript-unntak + promise-avvisninger
performance — sideinnlasting og Web Vitals-måltall (LCP, FCP, FID, CLS, INP, TTFB)
network_request — valgfri tidspunktmåling for forespørsler når nettverkssporing er aktivert
heatmap_click / scroll — varmekartdata

Se hele listen i Hendelsesreferanse.

Egendefinerte hendelser

Kixo.track()

Send en egendefinert hendelse med valgfrie egenskaper.

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

Typede hjelpefunksjoner for hendelser

Et enklere lag over Kixo.track() for hendelser Kixo kjenner igjen på navn (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Typede wrappere gir validering av egenskaper ved kompilering og én felles fasit for nøkkelnavn — backendens standardhendelsesdetektor matcher ordrett.

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

Knytt den nåværende enheten til en kjent bruker. Reserverte standardnøkler for egenskaper har prefikset $ (Mixpanel-konvensjon), så de holdes adskilt fra egne egendefinerte traits og løftes opp til profilkolonnene i Dashboard. Se Standardkatalog for egenskaper nedenfor for hele listen med 37 nøkler.

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() — merk en bruker for segmentering

Legg til valgfrie nøkkel-/verdiattributter på den gjeldende brukeren. Verdier kan være strenger, tall eller boolske verdier — boolske verdier er den ryddigste måten å tagg en bruker på for senere målretting i segmenter, e-postkampanjer eller chatspørringer.

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

Egenskapene lagres i localStorage på tvers av sideinnlastinger og legges automatisk ved senere hendelser. Bruk dem i chat med spørsmål som "lag en e-postkampanje for brukere der subscribe er true" — Kixo oppretter segmentet og lager et utkast til malen automatisk. Slettes ved Kixo.reset().

Kixo.group()

Knytt brukeren til et selskap eller en organisasjon.

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

Kixo.reset()

Nullstill identitet, superegenskaper og den lagrede køen. Kall dette ved utlogging, så senere hendelser ikke tilskrives forrige bruker.

Kixo.reset();

Standardkatalog for egenskaper

Reserverte egenskapsnøkler har prefikset $, så de holdes adskilt fra dine egendefinerte traits. Kixo-katalogen dekker 37 nøkler fordelt på 3 universelle pakker (identitet, geo, livssyklus) og 5 B2B-vertikalpakker (abonnement, e-handel, medier, markedsplass, lojalitet). Sett bare de som gjelder for produktet ditt — dashbordet tilpasser seg og viser bare pakkene du fyller ut.

Identitet

Alltid relevant. Angir kolonnene i profiloverskriften.

Nøkkel	Type	Beskrivelse
`$email`	streng	Primær e-postadresse, ofte brukt som flettenøkkel ved identitetssammenslåing.
`$phone`	streng	Telefonnummer i E.164-format.
`$name`	streng	Fullt visningsnavn.
`$first_name`	streng	Fornavn.
`$last_name`	streng	Etternavn.
`$avatar_url`	streng	Full URL til brukerens avatarbilde.

Geo

Geografisk kontekst.

Nøkkel	Type	Beskrivelse
`$country`	streng	Landskode etter ISO 3166.
`$city`	streng	Bynavn.
`$region`	streng	Delstat eller provins.
`$timezone`	streng	IANA-sone som `America/Los_Angeles`.
`$language`	streng	IETF-tag som `en` eller `ru-RU`.
`$locale`	streng	Full språk- og regionidentifikator.

Livssyklus

Når så vi dem.

Nøkkel	Type	Beskrivelse
`$created`	ISO8601	Tidspunkt for registrering eller kontoopprettelse.
`$last_seen`	ISO8601	Tidspunkt for siste aktivitet.

Abonnement

Brukes hvis produktet ditt har abonnementer.

Nøkkel	Type	Beskrivelse
`$plan`	streng	Slug for nivå — `free`, `pro`, `enterprise`.
`$subscription_status`	streng	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Når den nåværende prøveperioden utløper.
`$mrr`	tall	Månedlig gjentakende inntekt i kontoens valuta.
`$subscription_started`	ISO8601	Når det nåværende abonnementet startet.

E-handel

Brukes hvis du selger produkter.

Nøkkel	Type	Beskrivelse
`$lifetime_orders`	tall	Antall fullførte bestillinger.
`$lifetime_revenue`	tall	Totalt forbruk.
`$aov`	tall	Gjennomsnittlig ordreverdi.
`$last_purchase`	ISO8601	Siste vellykkede kjøp.
`$first_purchase`	ISO8601	Første vellykkede kjøp.
`$cart_abandoned_count`	tall	Totalt antall forlatte handlekurver.

Medier

Brukes hvis du publiserer innhold.

Nøkkel	Type	Beskrivelse
`$content_tier`	streng	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV-streng eller array	Kategorier brukeren følger.
`$watch_time_total`	tall	Samlet seertid i sekunder.
`$last_played`	ISO8601	Siste avspillingsstart.

Markedsplass

Brukes hvis du driver en tosidig plattform.

Nøkkel	Type	Beskrivelse
`$seller_tier`	streng	Slug for nivå på selgersiden.
`$buyer_tier`	streng	Slug for kjøpers nivå.
`$listings_count`	tall	Aktive oppføringer brukeren eier.
`$reviews_count`	tall	Anmeldelser brukeren har mottatt.
`$verified`	boolsk verdi	KYC-status.

Lojalitet

Brukes for engasjements- og belønningsprogrammer.

Nøkkel	Type	Beskrivelse
`$loyalty_points`	tall	Gjeldende saldo for innløselige poeng.
`$vip_level`	streng	Slug for VIP-nivå.
`$referral_count`	tall	Vellykkede vervinger tilskrevet denne brukeren.

Tips

Finner du ikke mønsteret ditt? Bruk enkle nøkler for egendefinerte traits. De vises i panelet Custom Traits i Dashboard uten å fylle opp profilkolonnene. De fem vertikalpakkene over er kvalifiserte forslag til de vanligste B2B-mønstrene — kundespesifikk terminologi, som shipping_plan, beholdes uten prefiks.

Superegenskaper

Nøkkel/verdi-par per økt som automatisk legges ved alle utgående hendelser. I motsetning til identify() traits, som beskriver identiteten, beskriver superegenskaper øktkonteksten — aktiv A/B-variant, build flavor, aktiverte funksjonsflagg og affiliate-ref. De lagres i localStorage på tvers av sideinnlastinger og slettes ved reset(). Ved nøkkelkollisjon vinner alltid properties på track() per hendelse.

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

Varmekart

Varmekartopptak er på som standard — klikk og skrolledybde, begge med 100 % sampling. Musebevegelser må slås på eksplisitt (høyt volum; aktiver per side hvis det er nyttig).

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

Øktopptak

Session replay registrerer et rrweb-øyeblikksbilde av DOM og en strøm av mutasjoner, slik at dashbordet kan rekonstruere siden som en spolbar økt ved siden av hendelsessporet. Dette er en rekonstruksjon av DOM, ikke et skjermopptak i videoformat. Replay er av som standard. Aktiver det for prosjektet under Oversikt → Innstillinger → Øktopptak; du trenger ikke å endre applikasjonskoden. Når replay er slått på, hentes opptakeren fra en egen chunk med samsvarende versjon.

Merknad

Dashbordet er fasiten. Der angir du Enable replay, Mask inputs, maksimal varighet og de avanserte opptakskontrollene. captureOnCellular lagres i samme prosjektpolicy for iOS og Android; nettlesere gir ikke et pålitelig signal for Wi‑Fi kontra mobilnett, så SDK rapporterer og ignorerer denne begrensningen, som bare gjelder native.

Dette maskeres

Replay er laget for å være trygt å slå på. Tre lag beskytter sensitivt innhold, og alle er aktivert som standard:

Maskering av inndata styres på prosjektnivå — når innstillingen Masker inndata er på i Dashboard (standard), erstattes tegn som skrives inn med stjerner før de forlater nettleseren. Slå den bare av ved et konkret behov med lav sensitivitet; felt for identitet, autentisering og betaling er fortsatt maskert.
Attributtet data-kixo-mask blokkerer et element og hele undertreet under det. Bruk det på beholdere som kan inneholde personopplysninger eller annet konfidensielt innhold; i replayen vises en plassholder i stedet for tekst eller DOM-innhold fra undertreet.
html
```
<div data-kixo-mask>
  
  
</div>
```
Sensitive felt maskeres alltid — inndata som ser ut som passord, kortnummer, CVV, SSN, hemmelighet eller token (ut fra type, name, id eller autocomplete), maskeres selv når prosjektets Masker inndata-innstilling er slått av. Synlig tekst og serialiserte DOM-attributter går også gjennom Kixo sin PII-rensing før opplasting.

Datainnsamling

SDK-en registrerer sporerne som er aktivert i integrasjonen og prosjektinnstillingene, i tillegg til hendelsene og egenskapene applikasjonen sender.

Hvor opptak lagres

SDK-en gzip-komprimerer rrweb-hendelser i avgrensede segmenter, ber Kixo om en prosjektavgrenset signert opplastings-URL og laster segmentene direkte opp til replay-lagringen. Åpne den rekonstruerte økten under Opptak → Økter; derfra kan du gå til analysesporet for samme økt.

Merknad

Replay avhenger av abonnementet ditt. Hvor mange økter som fanges opp og lagres, avhenger av prosjektplanen din. På lavere nivåer registrerer Kixo fortsatt lette øktdata metadata, slik at økten vises i lister og analyser.

Funksjonsflagg

Sjekk flaggverdier ved kjøring med Kixo.getFeatureFlag().

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

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

Levering og oppførsel uten nett

SDK-en legger hendelser i lokal kø, sender dem i batcher og prøver på nytt ved midlertidige feil med backoff. Hvis innsamling er satt på pause i prosjektinnstillingene, sendes ikke nye hendelser før innsamlingen aktiveres igjen.

Diagnostikk

Skrivebeskyttet helsesammendrag — nyttig når du feilsøker «hvorfor kommer ikke hendelsene mine frem?» i utviklerverktøyene.

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