Javascript (Web)

The OpenPanel Web SDK allows you to track user behavior on your website using a simple script tag. This guide provides instructions for installing and using the Web SDK in your project.

📖 Full documentation: https://openpanel.dev/docs/sdks/web

Installation

Step 1: Install

npm install @openpanel/web

Step 2: Initialize

import { OpenPanel } from '@openpanel/web';

const op = new OpenPanel({
  clientId: 'YOUR_CLIENT_ID',
  trackScreenViews: true,
  trackOutgoingLinks: true,
  trackAttributes: true,
});

Options

Common options

• apiUrl - The url of the openpanel API or your self-hosted instance
• clientId - The client id of your application
• clientSecret - The client secret of your application (only required for server-side events)
• filter - A function that will be called before sending an event. If it returns false, the event will not be sent
• disabled - If true, the library will not send any events

Web options

• trackScreenViews - If true, the library will automatically track screen views (default: false)
• trackOutgoingLinks - If true, the library will automatically track outgoing links (default: false)
• trackAttributes - If true, you can trigger events by using html attributes (<button type="button" data-track="your_event" />) (default: false)
• sessionReplay - Session replay configuration object (default: disabled). See session replay docs for full options.
  • enabled - Enable session replay recording (default: false)
  • maskAllInputs - Mask all input field values (default: true)
  • maskTextSelector - CSS selector for text elements to mask (default: [data-openpanel-replay-mask])
  • blockSelector - CSS selector for elements to replace with a placeholder (default: [data-openpanel-replay-block])
  • blockClass - Class name that blocks elements from being recorded
  • ignoreSelector - CSS selector for elements excluded from interaction tracking
  • flushIntervalMs - How often (ms) recorded events are sent to the server (default: 10000)
  • maxEventsPerChunk - Maximum events per payload chunk (default: 200)
  • maxPayloadBytes - Maximum payload size in bytes (default: 1048576)
  • scriptUrl - Custom URL for the replay script (script-tag builds only)

Step 3: Usage

import { op } from './op.js';

op.track('my_event', { foo: 'bar' });

Usage

Refer to the Javascript SDK for usage instructions.