Web SDK

Kixo Web SDK sporer automatisk klik, sidevisninger, sessioner, fejl, scroll-dybde, web vitals, rage clicks, dead clicks og heatmap-data med en indlejring på én linje. Overvågning af netværksforespørgsler er en valgfri indstilling. Distribueres som et native ES module og virker i moderne browsere.

Installation

Script-tag (CDN)

Tilføj snippetet før det afsluttende </head>-tag. Bemærk type="module" — det er nødvendigt, fordi SDK'et er et ES-modul. Session replay er delt op i en versionsmatchet recorder-chunk, som først indlæses, når replay er slået til, så basisbundlen forbliver lille, mens replay er slået fra.

html

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

Bemærk

SDK'et læser project_id og api_key fra script-URL'en og initialiserer sig selv. Hvis du vil konfigurere indstillinger i applikationskoden, skal du fjerne URL-parametrene og kalde Kixo.init({...}) i stedet — det globale objekt Kixo er tilgængeligt, når modulet er indlæst.

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

Brug dette, når du vil konfigurere indstillinger i applikationskoden i stedet for via script-URL'en. Det eksponerer det samme Kixo API som CDN-indlejringen.

bash

npm install @kixo.io/web

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

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

No-code-platforme

Hvis du bygger med en AI-drevet builder som Lovable, Bolt, v0 eller Replit, kan du indsætte script-tag-snippetet direkte i builderens chat eller indstillinger for kodeindsprøjtning. De fleste builders understøtter, at du tilføjer scripts i <head> på dit site.

Konfiguration

Indlejringen på to linjer bruger de lokale standardindstillinger for analytics nedenfor. Overvågning af forespørgsler er stadig valgfri. Session replay er bevidst udeladt fra Kixo.init(): aktivering, sampling, privatliv, varighed og optagelsesindstillinger styres udelukkende fra 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,
  },

});

Bemærk

Konfiguration styret af projektet. I dashboardets indstillinger kan du slå lokale analysetrackere fra. Replay har slet ikke noget lokalt flag til eksplicit aktivering: Konfigurer det under Settings → Session replay, så følger SDK den nyeste projektpolitik ved næste opdatering af konfigurationen.

Automatisk registrerede events

Med standardkonfigurationen indsamler Kixo automatisk disse events uden ekstra kode:

page_view — al navigation (første indlæsning + ændringer i SPA-ruter)
session_start / session_end
click — alle klikinteraktioner med elementvælger
scroll_depth — tærskler på 25 / 50 / 75 / 100 %
rage_click — gentagne klik på det samme element
dead_click — klik på ikke-interaktive elementer
error — ufangede JavaScript-undtagelser + afviste promises
performance — målinger for sideindlæsning og Web Vitals (LCP, FCP, FID, CLS, INP, TTFB)
network_request — valgfri timing for requests, når netværkssporing er aktiveret
heatmap_click / scroll — heatmapdata

Se hele listen i Eventreference.

Brugerdefinerede events

Kixo.track()

Send et brugerdefineret event med valgfrie egenskaber.

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

Typede eventhjælpere

Et bekvemt lag oven på Kixo.track() til de events, Kixo genkender på navn (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Typede wrappers giver validering af egenskaber ved kompileringstid og ét samlet sted for nøglenavne — backendens standardevent-detektor matcher ordret.

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

Knyt den aktuelle enhed til en kendt bruger. Reserverede standardnøgler for egenskaber har præfikset $ (Mixpanel-konvention), så de holdes adskilt fra jeres egne brugerdefinerede traits og løftes op i dashboardets profilkolonner — se Standardkatalog over egenskaber nedenfor for den fulde liste med 37 nøgler.

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() — tag en bruger til segmentering

Tilføj vilkårlige nøgle/værdi-attributter til den aktuelle bruger. Værdier kan være strenge, tal eller boolske værdier — boolske værdier er den enkleste måde at tag en bruger på til senere målretning i segmenter, e-mailkampagner eller chatforespørgsler.

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

Egenskaber gemmes i localStorage på tværs af genindlæsninger og knyttes automatisk til efterfølgende events. Brug dem i chatten med prompts som "opret en e-mailkampagne til brugere, hvor subscribe er true" — Kixo opretter automatisk et segment og laver et første udkast til skabelonen. Ryddes ved Kixo.reset().

Kixo.group()

Knyt brugeren til en virksomhed eller organisation.

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

Kixo.reset()

Ryd identitet, super-properties og den gemte kø. Kald dette ved logout, så efterfølgende events ikke tilskrives den forrige bruger.

Kixo.reset();

Standardkatalog over egenskaber

Reserverede property keys har præfikset $, så de holdes adskilt fra jeres egne traits. Kixo's katalog dækker 37 nøgler fordelt på 3 universelle pakker (identitet, geo, livscyklus) og 5 B2B-pakker (abonnement, e-handel, medier, markedsplads, loyalitet). Angiv de nøgler, der passer til jeres produkt — dashboardet tilpasser sig og viser kun de pakker, I faktisk bruger.

Identitet

Altid relevant. Angiver kolonnerne i profiloverskriften.

Nøgle	Type	Beskrivelse
`$email`	streng	Primær e-mailadresse, ofte brugt som merge key til identity stitching.
`$phone`	streng	E.164-telefonnummer.
`$name`	streng	Fuldt visningsnavn.
`$first_name`	streng	Fornavn.
`$last_name`	streng	Efternavn.
`$avatar_url`	streng	Fuld URL til brugerens avatarbillede.

Geografi

Geografisk kontekst.

Nøgle	Type	Beskrivelse
`$country`	streng	ISO-landekode efter 3166-standarden.
`$city`	streng	Bynavn.
`$region`	streng	Delstat eller provins.
`$timezone`	streng	IANA-zone som `America/Los_Angeles`.
`$language`	streng	IETF-tag som `en` eller `ru-RU`.
`$locale`	streng	Fuldt locale-id.

Livscyklus

Hvornår vi sidst så dem.

Nøgle	Type	Beskrivelse
`$created`	ISO8601	Tidspunkt for tilmelding eller kontooprettelse.
`$last_seen`	ISO8601	Tidspunkt for seneste aktivitet.

Abonnement

Angiv denne, hvis dit produkt har abonnementer.

Nøgle	Type	Beskrivelse
`$plan`	streng	Slug for niveau — `free`, `pro`, `enterprise`.
`$subscription_status`	streng	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Hvornår den nuværende prøveperiode udløber.
`$mrr`	tal	Månedlig tilbagevendende omsætning i kontoens valuta.
`$subscription_started`	ISO8601	Hvornår det nuværende abonnement startede.

E-handel

Angiv denne, hvis I sælger produkter.

Nøgle	Type	Beskrivelse
`$lifetime_orders`	tal	Antal gennemførte ordrer.
`$lifetime_revenue`	tal	Samlet forbrug.
`$aov`	tal	Gennemsnitlig ordreværdi.
`$last_purchase`	ISO8601	Seneste gennemførte køb.
`$first_purchase`	ISO8601	Første gennemførte køb.
`$cart_abandoned_count`	tal	Samlet antal forladte indkøbskurve.

Medier

Angiv denne, hvis I udgiver indhold.

Nøgle	Type	Beskrivelse
`$content_tier`	streng	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV-streng eller array	Kategorier, som brugeren følger.
`$watch_time_total`	tal	Samlet afspilningstid i sekunder.
`$last_played`	ISO8601	Seneste afspilningsstart.

Markedsplads

Angiv denne, hvis I driver en platform med to sider.

Nøgle	Type	Beskrivelse
`$seller_tier`	streng	Slug for sælgers niveau.
`$buyer_tier`	streng	Slug for købers niveau.
`$listings_count`	tal	Aktive annoncer, som brugeren ejer.
`$reviews_count`	tal	Anmeldelser, brugeren har modtaget.
`$verified`	boolsk	KYC-status.

Loyalitet

Bruges til engagements- og belønningsprogrammer.

Nøgle	Type	Beskrivelse
`$loyalty_points`	tal	Aktuel saldo af indløselige point.
`$vip_level`	streng	Slug for VIP-niveau.
`$referral_count`	tal	Vellykkede henvisninger tilskrevet denne bruger.

Tip

Kan du ikke se dit mønster? Brug nøgler uden præfiks til brugerdefinerede traits. De vises i dashboardets panel for Custom Traits uden at rode profilkolonnerne til. De fem vertikale pakker ovenfor er kvalificerede bud på de mest almindelige B2B-mønstre — kundespecifik terminologi (fx shipping_plan) forbliver uden præfiks.

Super-properties

Nøgle/værdi-par pr. session, som automatisk knyttes til alle udgående events. I modsætning til identify() traits, som beskriver identiteten, beskriver super-properties sessionens kontekst — aktiv A/B-variant, build-variant, tilvalgte feature flags og affiliate-reference. De gemmes i localStorage på tværs af genindlæsninger og ryddes ved reset(). Ved nøglekollision har properties på track() altid forrang.

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

Heatmaps

Heatmap-optagelse er slået til som standard — klik og scrolldybde, begge samplet ved 100 %. Musebevægelser kræver aktivt tilvalg (store datamængder; slå det til pr. side, hvis det er nyttigt).

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

Sessionsafspilning

Session replay optager et rrweb-DOM-snapshot og en mutationsstrøm, så dashboardet kan genskabe siden som en gennemseelig session sammen med eventsporet. Det er en DOM-rekonstruktion, ikke en skærmoptagelse. Replay er slået fra som standard. Slå det til for projektet under Dashboard → Indstillinger → Sessionsafspilning; det kræver ingen ændringer i applikationskoden. Når replay er aktiveret, hentes optageren som en separat, versionsmatchet chunk.

Bemærk

Dashboardet er den autoritative kilde. Her angiver du Enable replay, Mask inputs, maksimal varighed og de avancerede optagelseskontroller. captureOnCellular gemmes i den samme projektpolitik for iOS og Android; browsere giver ikke et pålideligt signal for Wi‑Fi kontra mobilnet, så SDK rapporterer begrænsningen og ignorerer den, fordi den kun gælder native apps.

Hvad bliver maskeret

Replay er designet til at være sikkert at slå til. Tre lag beskytter følsomt indhold, og de er alle slået til som standard:

Maskering af input styres af projektet — når dashboardets Masker inputfelter-indstilling er slået til (standard), erstattes indtastede tegn med stjerner, før de forlader browseren. Slå den kun fra ved et konkret behov med lav følsomhed; felter til identitet, login og betaling forbliver maskerede.
Attributten data-kixo-mask blokerer et element og hele dets undertræ. Sæt det på enhver container, der kan indeholde personlige eller fortrolige oplysninger; i replayet vises en pladsholder, ikke tekst eller DOM-indhold fra undertræet.
html
```
<div data-kixo-mask>
  
  
</div>
```
Følsomme felter maskeres altid — inputfelter, der ligner adgangskoder, kortnumre, CVV, SSN, hemmeligheder eller tokens (ud fra type, name, id eller autocomplete), maskeres, også når projektets Masker inputfelter-indstilling er slået fra. Synlig tekst og serialiserede DOM-attributter går også gennem Kixo's PII-sanitizer før upload.

Dataindsamling

SDK'et indsamler de trackere, der er slået til i din integration og dine projektindstillinger, samt de events og egenskaber, som applikationen sender.

Hvor optagelserne gemmes

SDK'et komprimerer rrweb-events med gzip i afgrænsede segmenter, beder Kixo om en projektafgrænset signed upload URL og uploader derefter segmenterne direkte til replay-lageret. Åbn den genskabte session under Afspilning → Sessioner; derfra kan du gå videre til den samme sessions analysetidslinje.

Bemærk

Replay afhænger af jeres abonnement. Hvor mange sessioner der optages og gemmes, afhænger af jeres projektplan. På de lavere planer registrerer Kixo stadig letvægts-metadata for sessionen, så den vises i lister og analyser.

Funktionsflag

Kontrollér flagværdier ved kørsel via Kixo.getFeatureFlag().

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

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

Levering og offlineadfærd

SDK'et lægger events i lokal kø, sender dem i batches og prøver igen ved midlertidige fejl med backoff. Hvis indsamling er sat på pause i projektindstillingerne, bliver nye events ikke sendt, før den slås til igen.

Diagnostik

Skrivebeskyttet statussnapshot — nyttigt til fejlsøgning i udviklerværktøjer, når du vil finde ud af: "Hvorfor kommer mine events ikke igennem?"

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