---
title: Script Tag
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.
---

import { Step, Steps } from 'fumadocs-ui/components/steps';
import { PersonalDataWarning } from '@/components/personal-data-warning';
import CommonSdkConfig from '@/components/common-sdk-config.mdx';
import WebSdkConfig from '@/components/web-sdk-config.mdx';


## Installation

Just insert this snippet and replace `YOUR_CLIENT_ID` with your client id.

```html filename="index.html" /clientId: 'YOUR_CLIENT_ID'/
<script>
  window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
  window.op('init', {
    clientId: 'YOUR_CLIENT_ID',
    trackScreenViews: true,
    trackOutgoingLinks: true,
    trackAttributes: true,
  });
</script>
<script src="https://openpanel.dev/op1.js" defer async></script>
```

#### Options

<CommonSdkConfig />
<WebSdkConfig />

## Usage

### Tracking Events

You can track events with two different methods: by calling the `window.op('track')` directly or by adding `data-track` attributes to your HTML elements.

```html filename="index.html"
<button type="button" onclick="window.op('track', 'my_event', { foo: 'bar' })">
  Track event
</button>
```

```html filename="index.html"
<button type="button" data-track="my_event" data-foo="bar">Track event</button>
```

### Identifying Users

To identify a user, call the `window.op('identify')` method with a unique identifier.

```js filename="main.js"
window.op('identify', {
  profileId: '123', // Required
  firstName: 'Joe',
  lastName: 'Doe',
  email: 'joe@doe.com',
  properties: {
    tier: 'premium',
  },
});
```

### Setting Global Properties

To set properties that will be sent with every event:

```js filename="main.js"
window.op('setGlobalProperties', {
  app_version: '1.0.2',
  environment: 'production',
});
```

### Creating Aliases

To create an alias for a user:

```js filename="main.js"
window.op('alias', {
  alias: 'a1',
  profileId: '1'
});
```

### Incrementing Properties

To increment a numeric property on a user profile.

- `value` is the amount to increment the property by. If not provided, the property will be incremented by 1.

```js filename="main.js"
window.op('increment', {
  profileId: '1',
  property: 'visits',
  value: 1 // optional
});
```

### Decrementing Properties

To decrement a numeric property on a user profile.

- `value` is the amount to decrement the property by. If not provided, the property will be decremented by 1.

```js filename="main.js"
window.op('decrement', {
  profileId: '1',
  property: 'visits',
  value: 1 // optional
});
```

### Clearing User Data

To clear the current user's data:

```js filename="main.js"
window.op('clear');
```

## Advanced Usage

### Filtering events

You can filter out events by adding a `filter` property to the `init` method.

Below is an example of how to disable tracking for users who have a `disable_tracking` item in their local storage.

```js filename="main.js"
window.op('init', {
  clientId: 'YOUR_CLIENT_ID',
  trackScreenViews: true,
  trackOutgoingLinks: true,
  trackAttributes: true,
  filter: () => localStorage.getItem('disable_tracking') === undefined,
});
```

### Using the Web SDK with NPM

<Steps>
#### Step 1: Install the SDK

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

#### Step 2: Initialize the SDK

```js filename="op.js"
import { OpenPanel } from '@openpanel/web';

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

#### Step 3: Use the SDK

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

op.track('my_event', { foo: 'bar' });
```
</Steps>

### Typescript

Getting ts errors when using the SDK? You can add a custom type definition file to your project.

#### Simple

Just paste this code in any of your `.d.ts` files.

```ts filename="op.d.ts"
declare global {
  interface Window {
    op: {
      q?: string[][];
      (...args: [
        'init' | 'track' | 'identify' | 'setGlobalProperties' | 'alias' | 'increment' | 'decrement' | 'clear',
        ...any[]
      ]): void;
    };
  }
}
```

#### Strict typing (from sdk)

<Steps>
##### Step 1: Install the SDK

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

##### Step 2: Create a type definition file

Create a `op.d.ts`file and paste the following code:

```ts filename="op.d.ts"
/// <reference types="@openpanel/web" />
```
</Steps>