open-index/open-npm huggingface dataset:
npm package: @openpanel/web
Description: 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.
Latest version: 1.3.0

# 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](https://openpanel.dev/docs/sdks/web)

---

## Installation

### Step 1: Install

```npm
npm install @openpanel/web
```

### Step 2: Initialize

```js title="op.ts"
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](https://openpanel.dev/docs/session-replay) 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

```js title="main.ts"
import { op } from './op.js';

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

## Usage

Refer to the [Javascript SDK](https://openpanel.dev/docs/sdks/javascript#usage) for usage instructions.