Analytics & A/B Testing Pro

Privacy-first analytics and deterministic A/B testing. No cookies, no third-party scripts — data is sent via navigator.sendBeacon for zero impact on page performance.

Analytics Pro

Setup

Initialize with your collection endpoint. Page views are tracked automatically by default — works for both MPA and SPA navigation:

import { init, track, flush } from 'weblisk/pro/analytics.js';

init('/api/events', {
  pageViews: true,       // Auto-track page views (default)
  flushInterval: 5000,  // Batch flush every 5s
});

Custom Events

Track any user action with track(name, props):

// Track a signup
track('signup', { plan: 'pro', source: 'landing-page' });

// Track a purchase
track('purchase', { sku: 'WL-PRO', amount: 49 });

// Track a feature interaction
track('feature_used', { name: 'dark-mode' });

How It Works

Events are batched in memory and flushed on an interval (default 5s) and on visibilitychange (page hide). Data is sent via navigator.sendBeacon — which is non-blocking and survives page unload.

Each event includes:

Field	Description
`type`	`'pageview'` or `'event'`
`url`	Current `pathname + search`
`session`	Random session ID (sessionStorage, no cookies)
`ts`	Timestamp (`Date.now()`)
`referrer`	Document referrer (page views only)
`screen`	Screen dimensions (page views only)
`props`	Custom properties (events only)

API Reference

Export	Description
`init(endpoint, opts?)`	Initialize analytics with collection endpoint
`track(name, props?)`	Track a custom event
`trackPageView()`	Manually track a page view
`flush()`	Force-flush the event queue
`identify(traits)`	Attach user traits to subsequent events

A/B Testing Pro

Deterministic variant assignment using hash-based bucketing. Persists assignments in localStorage for a consistent user experience across sessions.

Define an Experiment

import { experiment, convert, assignments } from 'weblisk/pro/ab.js';

const { variant, choose } = experiment('cta-color', ['control', 'blue-cta', 'green-cta']);

console.log(variant()); // → 'blue-cta' (deterministic per user)

Show/Hide Variants in HTML

Use data-variant attributes on elements and call choose() to show only the assigned variant:

html

<button class="cta" data-variant="control">Sign Up</button>
<button class="cta cta--blue" data-variant="blue-cta">Get Started</button>
<button class="cta cta--green" data-variant="green-cta">Try Free</button>

// Shows only the element matching the user's assigned variant
choose('.cta');

Track Conversions

Fire a conversion event to measure which variant performs best:

// Track when the user completes the target action
convert('cta-color', 'signup');

// Dispatches a 'wl:conversion' CustomEvent your analytics can pick up

Integration with Analytics

Conversions dispatch a wl:conversion CustomEvent. Combine with the analytics module to automatically capture experiment data:

import { track } from 'weblisk/pro/analytics.js';

window.addEventListener('wl:conversion', (e) => {
  track('ab_conversion', e.detail);
});

API Reference

Export	Description
`experiment(name, variants, opts?)`	Define an experiment — returns `{ variant, choose }`
`convert(name, goal?, props?)`	Track a conversion for an experiment
`assignments()`	Get all active experiment → variant assignments