Javascript (Node / Generic)

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/sdk

---

Installation

$3

``npm
npm install @openpanel/sdk
`

$3

`js title="op.ts"
import { OpenPanel } from '@openpanel/sdk';

const op = new OpenPanel({
clientId: 'YOUR_CLIENT_ID',
clientSecret: 'YOUR_CLIENT_SECRET',
});
`

#### 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

$3

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

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

Usage

$3

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

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

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

$3

To identify a user, call the op.identify( method with a unique identifier.

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

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

$3

To set properties that will be sent with every event:

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

op.setGlobalProperties({
app_version: '1.0.2',
environment: 'production',
});
`

$3

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 title="index.js"
import { op } from './op.ts'

op.increment({
profileId: '1',
property: 'visits',
value: 1 // optional
});
`

$3

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 title="index.js"
import { op } from './op.ts'

op.decrement({
profileId: '1',
property: 'visits',
value: 1 // optional
});
`

$3

To clear the current user's data:

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

op.clear()
``