Web SDK

De Kixo Web SDK registreert met één regel embedcode automatisch klikken, paginaweergaven, sessies, fouten, scroldiepte, web vitals, rage-clicks, dead-clicks en heatmapgegevens. Monitoring van netwerkverzoeken is beschikbaar als opt-in. Geleverd als native ES-module en werkt in moderne browsers.

Installatie

Script-tag (CDN)

Voeg de snippet toe vlak voor de afsluitende tag </head>. Let op type="module" — verplicht omdat de SDK een ES-module is. Session replay is opgesplitst in een recorder-chunk met dezelfde versie, die pas wordt geladen nadat replay is ingeschakeld. Zo blijft de basisbundle klein zolang replay uitstaat.

html

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

Opmerking

De SDK leest project_id en api_key uit de script-URL en initialiseert zichzelf. Wil je opties in je applicatiecode configureren, laat die URL-parameters dan weg en roep in plaats daarvan Kixo.init({...}) aan — het globale object Kixo is beschikbaar zodra de module is geladen.

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

Gebruik dit als je opties in je applicatiecode wilt configureren in plaats van via de script-URL. Het biedt dezelfde Kixo API als de CDN-embed.

bash

npm install @kixo.io/web

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

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

No-codeplatforms

Gebruik je een AI-builder zoals Lovable, Bolt, v0 of Replit, plak de script-tag-snippet dan rechtstreeks in de chat of code-injectie-instellingen van je builder. De meeste builders ondersteunen het toevoegen van scripts aan de <head> van je site.

Configuratie

De embed van twee regels gebruikt de lokale analytics-standaardwaarden hieronder. Monitoring van verzoeken blijft opt-in. Session replay ontbreekt bewust in Kixo.init(): inschakelen, sampling, privacy, duur en instellingen voor vastlegging komen uitsluitend uit het projectdashboard.

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

});

Opmerking

Configuratie die op projectniveau wordt beheerd. In Dashboard kun je lokale analytics-trackers uitschakelen. Voor Replay bestaat lokaal juist geen expliciete inschakelvlag: je configureert het onder Settings → Session replay, waarna de SDK bij de volgende configuratieverversing het actuele projectbeleid volgt.

Automatisch getrackte events

Met de standaardconfiguratie legt Kixo deze events automatisch vast, zonder extra code:

page_view — elke navigatie (eerste laadmoment + wijzigingen in SPA-routes)
session_start / session_end
click — alle klikinteracties met de elementselector
scroll_depth — drempels van 25 / 50 / 75 / 100%
rage_click — herhaalde klikken op hetzelfde element
dead_click — klikken op niet-interactieve elementen
error — niet-afgevangen JavaScript-excepties en afgewezen promises
performance — paginalaad- en Web Vitals-metrics (LCP, FCP, FID, CLS, INP, TTFB)
network_request — optionele requesttiming wanneer netwerktracking is ingeschakeld
heatmap_click / scroll — heatmapgegevens

Zie de volledige lijst in de Eventreferentie.

Aangepaste events

Kixo.track()

Verstuur een aangepast event met optionele properties.

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

Getypeerde eventhelpers

Syntactische suiker boven op Kixo.track() voor events die Kixo op naam herkent (purchase, signup, subscribe_start, trial_start, cancel, upgrade, activation, share, invite). Getypeerde wrappers geven property-validatie tijdens compile time en één centrale bron voor sleutelnamen — de detector voor standaardevents in de backend vergelijkt letterlijk.

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

Koppel het huidige apparaat aan een bekende gebruiker. Gereserveerde standaardproperties krijgen het voorvoegsel $ (Mixpanel-conventie), zodat ze gescheiden blijven van je eigen custom traits en doorstromen naar de profielkolommen in het dashboard — zie de Catalogus met standaardeigenschappen hieronder voor de volledige lijst met 37 sleutels.

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() — geef een gebruiker een tag voor segmentatie

Voeg willekeurige sleutel/waarde-attributen toe aan de huidige gebruiker. Waarden kunnen strings, getallen of booleans zijn — de boolean-vorm is de duidelijkste manier om een gebruiker te tag voor latere targeting in segmenten, e-mailcampagnes of chatquery’s.

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

Properties blijven in localStorage bewaard na herladen en worden automatisch toegevoegd aan volgende events. Gebruik ze in chat met prompts zoals "bouw een e-mailcampagne voor gebruikers waarbij subscribe true is" — Kixo stelt dan automatisch een segment samen en maakt een eerste versie van de template. Gewist bij Kixo.reset().

Kixo.group()

Koppel de gebruiker aan een bedrijf of organisatie.

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

Kixo.reset()

Wis de identity, super-properties en de bewaarde wachtrij. Roep dit aan bij uitloggen, zodat volgende events niet aan de vorige gebruiker worden toegeschreven.

Kixo.reset();

Catalogus met standaardeigenschappen

Gereserveerde property-sleutels krijgen het voorvoegsel $, zodat ze gescheiden blijven van je eigen traits. De catalogus van Kixo bevat 37 sleutels in 3 universele packs (identity, geo, lifecycle) en 5 B2B-specifieke packs (subscription, e-commerce, media, marketplace, loyalty). Stel alleen in wat voor jouw product relevant is — het dashboard past zich aan en toont alleen de packs die je gebruikt.

Identiteit

Altijd relevant. Bepaalt de kolommen in de profielkop.

Sleutel	Type	Beschrijving
`$email`	tekenreeks	Primair e-mailadres, vaak de samenvoegsleutel voor identiteitskoppeling.
`$phone`	tekenreeks	E.164-telefoonnummer.
`$name`	tekenreeks	Volledige weergavenaam.
`$first_name`	tekenreeks	Voornaam.
`$last_name`	tekenreeks	Achternaam.
`$avatar_url`	tekenreeks	Volledige URL van de avatarafbeelding van de gebruiker.

Geo

Geografische context.

Sleutel	Type	Beschrijving
`$country`	tekenreeks	ISO 3166-landcode.
`$city`	tekenreeks	Plaatsnaam.
`$region`	tekenreeks	Staat of provincie.
`$timezone`	tekenreeks	IANA-zone zoals `America/Los_Angeles`.
`$language`	tekenreeks	IETF-tag zoals `en` of `ru-RU`.
`$locale`	tekenreeks	Volledige locale-id.

Levenscyclus

Wanneer hebben we deze gebruiker gezien?

Sleutel	Type	Beschrijving
`$created`	ISO8601	Moment van registratie of accountaanmaak.
`$last_seen`	ISO8601	Tijdstip van de laatste interactie.

Abonnement

Stel dit in als je product abonnementen heeft.

Sleutel	Type	Beschrijving
`$plan`	tekenreeks	Niveauslug — `free`, `pro`, `enterprise`.
`$subscription_status`	tekenreeks	`active` / `trial` / `cancelled` / `past_due`.
`$trial_ends`	ISO8601	Wanneer de huidige proefperiode afloopt.
`$mrr`	getal	Maandelijks terugkerende omzet in de accountvaluta.
`$subscription_started`	ISO8601	Wanneer het huidige abonnement is gestart.

E-commerce

Stel dit in als je producten verkoopt.

Sleutel	Type	Beschrijving
`$lifetime_orders`	getal	Aantal voltooide bestellingen.
`$lifetime_revenue`	getal	Totale bestedingen.
`$aov`	getal	Gemiddelde bestelwaarde.
`$last_purchase`	ISO8601	Meest recente succesvolle aankoop.
`$first_purchase`	ISO8601	Eerste succesvolle aankoop.
`$cart_abandoned_count`	getal	Totaal aantal achtergelaten winkelwagens.

Media

Stel dit in als je content publiceert.

Sleutel	Type	Beschrijving
`$content_tier`	tekenreeks	`free` / `premium` / `paid`.
`$subscribed_categories`	CSV-string of array	Categorieën die de gebruiker volgt.
`$watch_time_total`	getal	Totale kijktijd in seconden.
`$last_played`	ISO8601	Meest recente start van afspelen.

Marktplaats

Stel dit in als je een tweezijdig platform hebt.

Sleutel	Type	Beschrijving
`$seller_tier`	tekenreeks	Slug van het verkopersniveau.
`$buyer_tier`	tekenreeks	Tier-slug aan de koperskant.
`$listings_count`	getal	Actieve aanbiedingen van de gebruiker.
`$reviews_count`	getal	Reviews die deze gebruiker heeft ontvangen.
`$verified`	boolean	KYC-status.

Loyaliteit

Stel dit in voor engagement- en beloningsprogramma’s.

Sleutel	Type	Beschrijving
`$loyalty_points`	getal	Huidig saldo aan inwisselbare punten.
`$vip_level`	tekenreeks	Slug van het VIP-niveau.
`$referral_count`	getal	Succesvolle doorverwijzingen die aan deze gebruiker zijn toegeschreven.

Tip

Staat je patroon er niet tussen? Gebruik dan losse sleutels voor custom traits. Die verschijnen in het dashboardpaneel Custom Traits zonder de profielkolommen te vervuilen. De 5 verticale pakketten hierboven zijn gerichte aannames voor de meest voorkomende B2B-vormen — klantspecifieke termen (zoals shipping_plan) blijven zonder voorvoegsel.

Super-properties

Sleutel-waardeparen per sessie die automatisch aan elk uitgaand event worden toegevoegd. Anders dan identify()-traits, die de identiteit beschrijven, leggen super-properties de sessiecontext vast — actieve A/B-variant, buildvariant, ingeschakelde feature flags, affiliate-verwijzing. Ze blijven in localStorage bewaard na herladen en worden gewist bij reset(). Bij een botsing op dezelfde sleutel krijgen eventspecifieke properties op track() altijd voorrang.

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-opname staat standaard aan: klikken en scrolldiepte, beide met 100% sampling. Muisbewegingen zijn opt-in (hoog volume; schakel dit alleen per pagina in als het nuttig is).

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

Sessie-replay

Session replay legt een rrweb-DOM-snapshot en mutatiestroom vast, zodat het dashboard de pagina kan reconstrueren als een doorspoelbare sessie naast de eventreeks. Het is dus een DOM-reconstructie, geen schermvideo-opname. Replay is standaard uit. Schakel het voor het project in via Dashboard → Instellingen → Sessiereplay; je hoeft daarvoor niets in je applicatiecode aan te passen. Zodra replay is ingeschakeld, wordt de recorder geladen uit een apart chunk met dezelfde versie.

Opmerking

Het dashboard is de bron van waarheid. Stel daar Enable replay, Mask inputs, de maximale duur en de geavanceerde opnameopties in. captureOnCellular wordt in hetzelfde projectbeleid opgeslagen voor iOS en Android; browsers bieden geen betrouwbaar onderscheid tussen wifi en mobiel netwerk, dus de SDK meldt die native-only beperking wel, maar negeert die op het web.

Wat wordt afgeschermd

Replay is ontworpen om veilig in te schakelen. Drie lagen beschermen gevoelige inhoud, allemaal standaard ingeschakeld:

Invoermaskering wordt op projectniveau beheerd — zolang de Dashboard-instelling Invoervelden afschermen aanstaat (standaard), worden getypte tekens al in de browser vervangen door sterretjes. Schakel dit alleen uit voor een specifieke toepassing met lage gevoeligheid; velden voor identiteit, authenticatie en betalingen blijven gemaskeerd.
Het attribuut data-kixo-mask blokkeert een element en de volledige onderliggende structuur. Zet dit op elke container die persoonlijke of vertrouwelijke inhoud kan bevatten; in de replay zie je een placeholder, niet de tekst of DOM-inhoud van die subtree.
html
```
<div data-kixo-mask>
  
  
</div>
```
Gevoelige velden worden altijd afgeschermd — invoervelden die lijken op een wachtwoord, kaartnummer, CVV, SSN, geheim of token (op basis van type, name, id of autocomplete) worden gemaskeerd, ook als de projectinstelling Invoervelden afschermen uitstaat. Zichtbare tekst en geserialiseerde DOM-attributen gaan vóór het uploaden ook door de PII-sanitizer van Kixo.

Gegevensverzameling

De SDK legt vast welke trackers in je integratie- en projectinstellingen zijn ingeschakeld, plus de events en properties die je applicatie verstuurt.

Waar opnamen worden opgeslagen

De SDK comprimeert rrweb-events met gzip in afgebakende segmenten, vraagt Kixo om een projectspecifieke ondertekende upload-URL en uploadt die segmenten rechtstreeks naar de replay-opslag. Open de gereconstrueerde sessie via Replay → Sessies; daar vind je ook het analyticsspoor van diezelfde sessie.

Opmerking

Replay is afhankelijk van je abonnement. Hoeveel sessies worden vastgelegd en bewaard, hangt af van je projectabonnement; in lagere tiers registreert Kixo nog steeds lichte sessie-metadata, zodat de sessie wel in je lijsten en analyses verschijnt.

Feature flags

Controleer flagwaarden tijdens runtime via Kixo.getFeatureFlag().

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

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

Verzending en gedrag bij offline gebruik

De SDK zet events lokaal in de wachtrij, verstuurt ze in batches en probeert tijdelijke fouten opnieuw met backoff. Als dataverzameling vanuit de projectinstellingen is gepauzeerd, worden nieuwe events pas weer verstuurd zodra die opnieuw is ingeschakeld.

Diagnostiek

Alleen-lezen statussnapshot — handig in devtools bij vragen als "waarom stromen mijn events niet door?"

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