Enterprise-grade A/B testing and analytics platform with comprehensive tracking, performance monitoring, and conversion optimization tools.
The Xaiku SDK is a modern, performant solution for running sophisticated A/B tests and capturing detailed user analytics. Built for high-traffic applications, it provides real-time variant serving, comprehensive event tracking, and advanced performance monitoring.
- Deterministic Variant Selection - Consistent user experiences across sessions
- Weighted Distribution - Flexible traffic allocation with custom weights
- Multi-Experiment Support - Run multiple tests simultaneously
- Real-time Variant Updates - Change test configurations without deployments
- Impression Tracking - Deduplication prevents duplicate events on re-renders
- Conversion Funnels - Multi-step attribution with time-based analysis
- Engagement Metrics - Scroll depth, dwell time, interaction patterns
- Performance Impact - Monitor how variants affect Core Web Vitals
- Core Web Vitals - CLS, FCP, FID, LCP, TTFB, INP monitoring
- Adaptive Tracking - Reduces resource usage on low-end devices
- Event Batching - Efficient network usage with configurable batching
- Memory Management - LRU caching prevents memory leaks
- Error Boundaries - Graceful fallbacks when variants fail
- Type Safety - Comprehensive TypeScript definitions
- Framework Support - React, Next.js, vanilla JavaScript
- Browser Compatibility - Modern browsers with graceful degradation
npm install @xaiku/reactimport React from 'react'
import { XaikuProvider, Text } from '@xaiku/react'
function App() {
return (
<XaikuProvider
apiUrl="https://api.xaiku.com"
pkey="your-public-key"
>
<Text
experimentId="homepage-hero"
id="headline"
fallback="Welcome to our platform!"
>
{(text) => <h1>{text}</h1>}
</Text>
</XaikuProvider>
)
}npm install @xaiku/browserimport xaiku from '@xaiku/browser'
const sdk = xaiku({
apiUrl: 'https://api.xaiku.com',
pkey: 'your-public-key',
experimentIds: ['homepage-test']
})
// Get variant text
const headline = sdk.getVariantText('homepage-test', 'headline', {
fallback: 'Default headline'
})
// Track conversion
sdk.track.events.trackConversion({
experimentId: 'homepage-test',
value: 29.99,
currency: 'USD'
})npm install @xaiku/nextjs// middleware.js
import { xaikuMiddleware } from '@xaiku/nextjs'
export default xaikuMiddleware({
apiUrl: 'https://api.xaiku.com',
pkey: 'your-public-key'
})
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
}xaiku-sdk/
├── packages/
│ ├── core/ # Core SDK functionality
│ ├── shared/ # Shared utilities and types
│ ├── browser/ # Browser-specific features
│ ├── react/ # React components & hooks
│ ├── nextjs/ # Next.js middleware & utilities
│ ├── node/ # Node.js server utilities
│ └── config/ # Build & lint configurations
graph TD
A[shared] --> B[core]
A --> C[browser]
A --> D[nextjs]
A --> E[node]
B --> C
C --> F[react]
React components and hooks for A/B testing with advanced tracking capabilities.
Key Features:
<Text>component with automatic impression tracking- Advanced hooks for engagement, scroll depth, and conversion tracking
- Error boundaries with variant-specific fallbacks
- Performance optimization utilities
Browser-focused SDK with DOM interaction tracking and performance monitoring.
Key Features:
- Core Web Vitals monitoring (CLS, FCP, FID, LCP, TTFB, INP)
- DOM proxying for fetch, history, and timer tracking
- Intersection Observer integration for visibility tracking
- Resource timing and performance analysis
Core utilities and shared functionality used across all packages.
Key Features:
- Pluggable storage system (localStorage, sessionStorage, cookie, memory)
- Event system with automatic cleanup
- Performance metrics collection
- Variant selection algorithms
Core SDK factory and client implementation.
Next.js middleware and server-side utilities.
Node.js server implementation for server-side tracking.
import {
XaikuProvider,
Text,
useTrackConversion,
useTrackScrollDepth,
useTrackEngagement
} from '@xaiku/react'
function ProductPage({ productId }) {
// Conversion tracking with funnel analysis
const { trackFunnelStep, trackConversion } = useTrackConversion({
experimentId: 'product-conversion',
partId: `product-${productId}`
})
// Engagement monitoring
const { isTracking } = useTrackEngagement({
experimentId: 'product-engagement',
partId: 'product-details'
})
// Scroll depth analysis
useTrackScrollDepth({
experimentId: 'content-engagement',
milestones: [25, 50, 75, 100]
})
const handleAddToCart = () => {
trackFunnelStep('add_to_cart', { productId, price: 49.99 })
}
const handlePurchase = (orderData) => {
trackConversion({
revenue: orderData.total,
items: orderData.items,
currency: 'USD'
})
}
return (
<div>
<Text experimentId="product-title" id="name" fallback="Product Name">
{(title) => <h1>{title}</h1>}
</Text>
<div className={`engagement ${isTracking ? 'active' : 'idle'}`}>
<Text experimentId="product-description" id="desc"
fallback="Product description" />
</div>
<button onClick={handleAddToCart}>
<Text experimentId="cta-buttons" id="add-to-cart"
fallback="Add to Cart" />
</button>
</div>
)
}import {
useAdaptiveTracking,
useBatchedTracking,
usePerformanceOptimization
} from '@xaiku/react'
function OptimizedApp() {
// Adaptive tracking based on device capabilities
const { shouldTrackEvent, getTrackingStrategy } = useAdaptiveTracking()
// Batched event processing
const addToBatch = useBatchedTracking(sdk, 25, 3000)
// Performance monitoring with recommendations
const {
getOptimizationRecommendations,
recordRenderTime
} = usePerformanceOptimization()
const trackEvent = (eventType, data) => {
if (shouldTrackEvent(eventType)) {
addToBatch({ type: eventType, data, timestamp: Date.now() })
}
}
useEffect(() => {
const recommendations = getOptimizationRecommendations()
if (recommendations.length > 0) {
console.log('Performance recommendations:', recommendations)
}
})
return (
<div>
<p>Tracking Strategy: {getTrackingStrategy()}</p>
{/* Your app content */}
</div>
)
}# Install all dependencies
pnpm install
# Build all packages
pnpm build
# Run tests across all packages
pnpm test
# Lint all packages
pnpm lint
# Clean all build artifacts
pnpm clean
# Format code with Prettier
pnpm format# Work with specific packages
cd packages/react
# Build single package
pnpm build
# Run tests for package
pnpm test
# Start Storybook (react/browser packages)
pnpm storybook# Create changesets for versioning
pnpm changes
# Version packages based on changesets
pnpm version
# Publish packages to npm
pnpm releaseComprehensive TypeScript definitions included:
import type {
XaikuSDK,
TrackingEvent,
VariantConfig,
PerformanceMetric
} from '@xaiku/core'
interface CustomTrackingData {
userId: string
experimentId: string
variantId: string
}
const sdk: XaikuSDK = xaiku({ /* config */ })- Modern Browsers: Full support
- Chrome 60+, Firefox 60+, Safari 12+, Edge 79+
- Legacy Support: Core functionality with polyfills
- IE 11, Chrome 50+, Safari 10+
- Mobile: iOS Safari 12+, Chrome Mobile 60+
- Bundle Size: 8-12KB gzipped per package
- Runtime Overhead: <1ms per tracked event
- Memory Usage: ~2MB baseline, scales linearly
- Network Efficiency: Batched requests, ~1 request/5 seconds
- CPU Usage: Passive listeners, requestIdleCallback optimization
- Getting Started Guide
- React Components & Hooks
- Advanced Tracking
- Performance Optimization
- Error Handling
- API Reference
We welcome contributions! Please see our Contributing Guide for details.
# Clone repository
git clone https://github.com/your-org/xaiku-sdk.git
cd xaiku-sdk
# Install dependencies
pnpm install
# Build packages
pnpm build
# Run tests
pnpm test
# Start development
pnpm devMIT License - see LICENSE for details.
Built with ❤️ for modern web applications