Statsig Web Analytics Overview

Web analytics overview

With Web Analytics and Statsig Dashboards you can easily gather insights such as number of visitors, views, sessions, how long sessions last, error rates, usage journey, and more.

After you add web analytics to your application, events appear in your metrics page: https://console.statsig.com/metrics/events

Getting started

Option 1: HTML script installation

Add a single script tag to your website:

<script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@3/build/statsig-js-client+session-replay+web-analytics.min.js?apikey=[YOUR_CLIENT_KEY]"></script>

Get YOUR_CLIENT_KEY from Project Settings > Keys & Environments. Reveal the Client API Key, copy, and paste it over the [YOUR_CLIENT_KEY] in the snippet above.

Option 2: HTML script with advanced control

For more control over initialization and configuration, you can manually initialize the Statsig client:

<script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@3/build/statsig-js-client+session-replay+web-analytics.min.js"></script>
<script>
  const { StatsigClient, StatsigAutoCapturePlugin, StatsigSessionReplayPlugin } = window.Statsig;

  const client = new StatsigClient(
    'YOUR_CLIENT_KEY',       // put your client sdk key here - "client-XXXX"
    { userID: 'optional' },  // set a userID here if you have one
    { plugins: [
      new StatsigAutoCapturePlugin(),
      new StatsigSessionReplayPlugin()
    ]}
  ); 

  client.initializeAsync().catch((err) => console.error(err));
</script>

Option 3: JavaScript client SDK (React bindings)

If using the JavaScript client SDK or another framework, use the corresponding SDK with the autocapture plugin (JS, React, Angular, etc.):

import * as React from 'react';

import { StatsigProvider } from '@statsig/react-bindings';
import { StatsigAutoCapturePlugin } from '@statsig/web-analytics';

  return (
    <StatsigProvider
      sdkKey={YOUR_CLIENT_KEY}
      user={{ userID: 'a-user' }}
      loadingComponent={
        <div>Loading...</div>
      }
      options={{ plugins: [ new StatsigAutoCapturePlugin() ] }}>
      <div>Hello</div>
    </StatsigProvider>
  );

Autocaptured events

Statsig Web Analytics automatically captures the following events without any additional code:

Page navigation events

• auto_capture::page_view - Triggered when a user navigates to a new page. Includes page URL, query parameters, referrer information, and metadata.
• auto_capture::page_view_end - Triggered when a user leaves a page. Includes engagement metrics like scroll depth, time on page, and whether the exit was due to inactivity.

User interaction events

• auto_capture::click - Captures all click events with target element information, coordinates, and page context.
• auto_capture::rage_click - Detects rapid repeated clicks in the same area, often indicating user frustration.
• auto_capture::dead_click - Identifies clicks that don't result in any page changes or navigation, potentially indicating broken functionality.
• auto_capture::form_submit - Captures form submission events with form metadata.
• auto_capture::copy - Tracks when users copy text from your page, including the selected text content.

Technical performance events

• auto_capture::error - Automatically captures JavaScript errors with stack traces, error messages, and context.
• auto_capture::web_vitals - Captures Core Web Vitals metrics (refer to the Web vitals events section below).
• auto_capture::performance - Collects page load performance metrics including load times, DOM interactive time, and network transfer data. (deprecated, use auto_capture::web_vitals instead)

Session events

• auto_capture::session_start - Marks the beginning of a new user session.

Console logging (disabled by default)

• statsig::log_line - Captures console log output when explicitly enabled. This event is disabled by default and must be configured to activate.

Event filtering and console configuration

Disabling events through the console

You can disable specific autocapture events from the Statsig console under Project Settings > Analytics & Session Replay:

Programmatic event filtering

For more granular control, you can filter events programmatically using a custom filter function:

const client = new StatsigClient(
  'YOUR_CLIENT_KEY',
  { userID: 'optional' },
  { plugins: [
    new StatsigAutoCapturePlugin({
      eventFilterFunc: (event) => {
        // Filter out events from admin pages
        if (event.metadata.pageUrl && 
            event.metadata.pageUrl.includes('/admin/')) {
          return false;
        }
        return true;
      }
    })
  ]}
);

Console log capture configuration

Console log capture is disabled by default but you can enable it with the following configuration:

const client = new StatsigClient(
  'YOUR_CLIENT_KEY',
  { userID: 'optional' },
  { plugins: [
    new StatsigAutoCapturePlugin({
      consoleLogAutoCaptureSettings: {
        enabled: true,
      }
    })
  ]}
);

There are a few additional optional configuration settings available when capturing console logs:

• logLevel: minimum level to capture (debug | info | log | warn | error)
• sampleRate: fraction between 0 and 1 to sample captured logs
• maxKeys: maximum number of keys to serialize from logged objects
• maxDepth: maximum nesting depth when serializing objects
• maxStringLength: maximum number of characters for stringified values

const client = new StatsigClient(
  'YOUR_CLIENT_KEY',
  { userID: 'optional' },
  { plugins: [
    new StatsigAutoCapturePlugin({
      consoleLogAutoCaptureSettings: {
        enabled: true,
        logLevel: 'warn',         // capture warn and error
        sampleRate: 0.5,          // capture 50% of matched logs
        maxKeys: 50,              // limit number of keys per object
        maxDepth: 3,              // limit nested object depth
        maxStringLength: 2000,    // truncate long strings
      }
    })
  ]}
);

Web vitals events

Statsig automatically captures Core Web Vitals metrics that are essential for measuring user experience and SEO performance:

Core Web Vitals metrics

• CLS (Cumulative Layout Shift) - Measures visual stability by tracking unexpected layout shifts during page load. Lower scores indicate better user experience.

• FCP (First Contentful Paint) - Measures loading performance by tracking when the first text or image is painted on the screen. Faster FCP times indicate better perceived performance.

• LCP (Largest Contentful Paint) - Measures loading performance by tracking when the largest content element becomes visible. This metric correlates strongly with user-perceived load times.

• TTFB (Time to First Byte) - Measures server response time by tracking how long it takes to receive the first byte of response from the server. This indicates server and network performance.

• INP (Interaction to Next Paint) - Measures responsiveness by tracking the longest latency across user interactions. Lower values mean more consistent, responsive experiences.

Statsig automatically collects and sends these metrics as auto_capture::web_vitals events, providing insights into your website's performance and user experience quality.

Single page application (SPA) support

Statsig Web Analytics automatically supports single page applications without any additional configuration. Statsig intelligently detects route changes through:

Automatic route change detection

• Browser Navigation: Listens for popstate events to detect when users use browser back/forward buttons
• Programmatic Navigation: Automatically proxies history.pushState calls to detect when your application programmatically navigates to new routes
• Automatic Page Views: Triggers new auto_capture::page_view events whenever route changes are detected

Modern SPA frameworks like React Router, Vue Router, and Angular Router work with Statsig Web Analytics without requiring manual page view tracking.

Exploring events in Metrics explorer

Autocapture settings

The autocapture plugin or manual setup can take an optional options parameter to customize the autocapture settings.

• eventFilterFunc: Optional[Callable[[AutoCaptureEvent], bool]] - A function to filter events based on their metadata.
• consoleLogAutoCaptureSettings: Optional[ConsoleLogAutoCaptureSettings] - An object to configure console log capture.

consoleLogAutoCaptureSettings:

• enabled: Optional[bool] - A boolean to enable or disable console log capture.
• logLevel: Optional[str] - A string to set the minimum log level for console log capture.
• sampleRate: Optional[float] - A number to set the sample rate for console log capture. (0-1)
• maxKeys: Optional[number] - Maximum number of keys to serialize from logged objects.
• maxDepth: Optional[number] - Maximum nesting depth when serializing objects.
• maxStringLength: Optional[number] - Maximum number of characters for stringified values.

eventFilterFunc:

• event: AutoCaptureEvent - The event object Statsig is capturing.
• return: bool - A boolean to return true to capture the event or false to ignore it.