Skip to main content
This guide will help you integrate Composite Analytics into your application and start capturing session recordings immediately.

​
Installation

Install the Composite Analytics SDK using your preferred package manager: 
npm install @composite-inc/composite-js

​
Basic Setup

​
1. Import and Initialize

Initialize the SDK with your API key from the Analytics Dashboard: 
import composite from '@composite-inc/composite-js';

// Initialize the SDK
await composite.init({
  apiKey: 'pk_your_api_key', // Replace with your actual API key
});
You can find your API key in the Dashboard Settings

​
2. Enable Session Recording

Enable session recording to capture user interactions: 
await composite.init({
  apiKey: 'pk_your_api_key',
  sessionRecording: true  // Enable session recordings
});

​
3. Track Events

Capture custom events to understand user behavior: 
// Track a custom event
composite.capture('button_clicked', { button_id: 'signup' });

// Track with person properties
composite.capture('purchase_completed',
  { product_id: 'sku_123', amount: 99.99 },
  { $set: { customer_tier: 'premium' } }
);

​
4. Identify Users

Connect sessions to specific users for better insights: 
// Identify a user after they log in
await composite.identify('user_123', {
  email: 'john@example.com',
  name: 'John Doe',
  plan: 'pro',
  created_at: '2024-01-15'
});

​
Complete Example

Here’s a full example for a typical web application: 
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <button id="signup">Sign Up</button>

  <script type="module">
    import composite from 'https://cdn.jsdelivr.net/npm/@composite-inc/composite-js@latest/+esm';

    // Initialize Composite Analytics with session recording
    await composite.init({
      apiKey: 'pk_your_api_key',
      sessionRecording: true,  // Enable session recordings
      debug: true              // Enable debug logging in console
    });

    // Track events
    composite.capture('page_viewed', { page: window.location.pathname });

    // Identify the user when they log in
    await composite.identify('user_123', {
      email: 'user@example.com',
      plan: 'pro'
    });
  </script>
</body>
</html>

​
Framework Examples

  • React
  • Vue
  • Next.js
import { useEffect } from 'react';
import composite from '@composite-inc/composite-js';

function App() {
  useEffect(() => {
    // Initialize once when app loads
    composite.init({
      apiKey: 'pk_your_api_key',
      sessionRecording: true
    });
  }, []);

  return (
    <div>
      <h1>My App</h1>
    </div>
  );
}

​
Configuration Options

Here are the most commonly used configuration options: 
await composite.init({
  // Required
  apiKey: 'pk_your_api_key',

  // Optional features
  sessionRecording: true,      // Enable session recordings
  debug: false,                // Enable console logging

  // API configuration
  apiHost: 'https://prod.alb.us.api.composite.com',  // Default API endpoint

  // Transport (for special environments)
  transport: 'default',        // or 'chrome-extension' for extensions

  // Callbacks
  loaded: (client) => {
    console.log('Composite Analytics loaded!');
  }
});
For Chrome Extensions, use transport: 'chrome-extension' for optimized message passing. See our Chrome Extension Guide.

​
Verify Your Integration

After setting up, you can verify session recording is working:
  1. Open your browser’s Developer Console
  2. Look for Composite Analytics debug logs (if debug: true)
  3. Check the Network tab for requests to prod.alb.us.api.composite.com
  4. Visit your Analytics Dashboard to see session recordings

​
Best Practices

Initialize Early

Initialize the SDK as early as possible in your app lifecycle to capture all sessions

Identify Users

Always identify logged-in users to connect their sessions across visits

​
What’s Next?

Event Tracking

Capture custom events and user properties

Session Recording

Set up and configure session recordings

Chrome Extension

Special setup for Chrome Extensions

API Reference

Complete API documentation

​
Need Help?

If you run into issues: