Quickstart

Get SignalSplash tracking events in your app in under 5 minutes. No cookies, no complex config — just install, wrap, and ship.

Last updated: 2026-04-12

Prerequisites

A SignalSplash account — sign up free
A React or Next.js project (any bundler works)
Node 18+ or Bun 1.0+

1. Install the SDK

npm install @summoniq/analytics

Or with your preferred package manager:

yarn add @summoniq/analytics
# or
bun add @summoniq/analytics

2. Add the provider

Wrap your app with AnalyticsProvider in your root layout. This initializes the SDK and starts tracking page views automatically.

// app/layout.tsx
import { AnalyticsProvider, WebVitals } from '@summoniq/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnalyticsProvider config={{
          appId: 'your-app-id',
          endpoint: 'https://api.signalsplash.com/api/events',
        }}>
          <WebVitals />
          {children}
        </AnalyticsProvider>
      </body>
    </html>
  );
}

Replace your-app-id with the app ID from your project settings.

3. Track your first custom event

Page views are tracked automatically. To track something custom:

import { useAnalytics } from '@summoniq/analytics/react';

function SignUpButton() {
  const { track } = useAnalytics();

  return (
    <button onClick={() => track('signup_clicked', { plan: 'free' })}>
      Sign up
    </button>
  );
}

4. Verify it works

Open your app in a browser and navigate to a page. Then head to your dashboard. You should see your first page view within seconds.

The Events tab shows every event in real time
The Overview tab shows aggregate stats and charts
The Sessions tab shows individual user journeys

Real-time data

Events appear in your dashboard within seconds of occurring. There is no batching delay on the server side — when the SDK flushes an event (every 5 seconds or when the queue hits 10 events), it shows up immediately.

The SDK also flushes automatically when the user navigates away or switches tabs, so you won't lose events to abandoned sessions.

Configuration options

The config prop accepts these options:

Option	Default	Description
`appId`	—	Required. Your project identifier.
`endpoint`	`/api/events`	Event ingestion URL.
`enabled`	`true`	Toggle analytics on/off.
`trackPageViews`	`true`	Auto-track page navigations.
`trackWebVitals`	`true`	Track Core Web Vitals.
`trackClicks`	`true`	Auto-track link and button clicks.
`respectDoNotTrack`	`true`	Honor the browser DNT setting.
`sessionTimeout`	`30`	Minutes of inactivity before a new session starts.
`debug`	`false`	Log events to the console.

Next steps

SDK reference — full API for track, identify, hooks, and components
Dashboard guide — understand every tab and metric
App IDs & projects — managing multiple apps