Installation

import type { ExperimentAssignment } from '@stringboot/web-sdk';

// Initialize Google Analytics
export function initializeGA4(measurementId: string) {
  // Load gtag.js
  const script = document.createElement('script');
  script.async = true;
  script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
  document.head.appendChild(script);

  // Configure gtag
  window.dataLayer = window.dataLayer || [];
  function gtag(...args: any[]) {
    window.dataLayer.push(args);
  }
  gtag('js', new Date());
  gtag('config', measurementId);
}

// Analytics handler for Stringboot
export const googleAnalyticsHandler = (
  experiments: Record<string, ExperimentAssignment>
) => {
  Object.entries(experiments).forEach(([key, assignment]) => {
    // Track experiment assignment as custom dimension
    if (window.gtag) {
      window.gtag('event', 'stringboot_experiment_assigned', {
        experiment_key: key,
        variant_id: assignment.variantId,
        variant_name: assignment.variantName,
        experiment_name: assignment.experimentName,
      });

      // Set user property for segmentation
      window.gtag('set', 'user_properties', {
        [`stringboot_exp_${key}`]: assignment.variantName,
      });
    }
  });
};

interface Window {
  dataLayer: any[];
  gtag: (...args: any[]) => void;
}

import StringBoot from '@stringboot/web-sdk';
import { initializeGA4, googleAnalyticsHandler } from './analytics/googleAnalytics';

// Initialize GA4 first
initializeGA4('G-XXXXXXXXXX');

// Initialize Stringboot with analytics
await StringBoot.initialize({
  apiToken: 'YOUR_API_TOKEN',
  baseUrl: 'https://api.stringboot.com',
  defaultLanguage: 'en',
  analyticsHandler: googleAnalyticsHandler,
});

import StringBoot from '@stringboot/web-sdk';

await StringBoot.initialize({
  apiToken: 'YOUR_API_TOKEN',
  baseUrl: 'https://api.stringboot.com',
  defaultLanguage: 'en',
  analyticsHandler: yourAnalyticsHandler,
  // providedDeviceId: undefined  // Auto-generate (default)
});

// Retrieve the generated device ID
const deviceId = await StringBoot.getDeviceId();
console.log('Device ID:', deviceId);
// Output: "550e8400-e29b-41d4-a716-446655440000"

import StringBoot from '@stringboot/web-sdk';
import type { StringBootConfig } from '@stringboot/web-sdk';
import { initializeGA4, googleAnalyticsHandler } from './analytics/googleAnalytics';

async function initializeApp() {
  try {
    // 1. Initialize analytics first
    initializeGA4('G-XXXXXXXXXX');

    // 2. Configure Stringboot
    const config: StringBootConfig = {
      apiToken: import.meta.env.VITE_STRINGBOOT_API_TOKEN,
      baseUrl: 'https://api.stringboot.com',
      defaultLanguage: 'en',
      cacheSize: 1000,
      debug: import.meta.env.DEV,
      // REQUIRED for A/B testing
      analyticsHandler: googleAnalyticsHandler,
      // Optional: Use custom device ID
      // providedDeviceId: await getCustomDeviceId(),
    };

    // 3. Initialize Stringboot
    await StringBoot.initialize(config);

    console.log('✅ Stringboot initialized successfully');
    console.log('Device ID:', await StringBoot.getDeviceId());
    console.log('Current language:', StringBoot.getCurrentLanguage());

  } catch (error) {
    console.error('❌ Stringboot initialization failed:', error);
    throw error;
  }
}

// Initialize on app load
initializeApp();

import { useEffect } from 'react';
import { useStringBoot } from '@stringboot/web-sdk/react';
import { initializeGA4, googleAnalyticsHandler } from './analytics/googleAnalytics';

function App() {
  // Initialize GA4 before Stringboot
  useEffect(() => {
    initializeGA4('G-XXXXXXXXXX');
  }, []);

  // Initialize Stringboot with analytics
  const { initialized, error } = useStringBoot({
    apiToken: import.meta.env.VITE_STRINGBOOT_API_TOKEN,
    baseUrl: 'https://api.stringboot.com',
    defaultLanguage: 'en',
    cacheSize: 1000,
    debug: import.meta.env.DEV,
    // REQUIRED for A/B testing
    analyticsHandler: googleAnalyticsHandler,
  });

  if (error) {
    return (
      <div className="error">
        <h1>Initialization Error</h1>
        <p>{error}</p>
      </div>
    );
  }

  if (!initialized) {
    return (
      <div className="loading">
        <p>Loading Stringboot...</p>
      </div>
    );
  }

  return <YourApp />;
}

export default App;

'use client';

import { useEffect } from 'react';
import { useStringBoot } from '@stringboot/web-sdk/react';
import { initializeGA4, googleAnalyticsHandler } from '@/lib/analytics/googleAnalytics';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Initialize GA4
  useEffect(() => {
    initializeGA4(process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID!);
  }, []);

  // Initialize Stringboot
  const { initialized, error } = useStringBoot({
    apiToken: process.env.NEXT_PUBLIC_STRINGBOOT_API_TOKEN!,
    baseUrl: 'https://api.stringboot.com',
    defaultLanguage: 'en',
    analyticsHandler: googleAnalyticsHandler,
  });

  if (error) {
    return <html><body>Error: {error}</body></html>;
  }

  if (!initialized) {
    return <html><body>Loading...</body></html>;
  }

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

VITE_STRINGBOOT_API_TOKEN=your_token_here
VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
VITE_STRINGBOOT_BASE_URL=https://api.stringboot.com