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

Step 1: Install

npm install @openpanel/sdk

Step 2: Initialize

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

Step 3: Usage

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

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

Usage

Tracking Events

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

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

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

Identifying Users

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

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

op.identify({
  profileId: '123', // Required
  firstName: 'Joe',
  lastName: 'Doe',
  email: '[email protected]',
  properties: {
    tier: 'premium',
  },
});

Setting Global Properties

To set properties that will be sent with every event:

import { op } from './op.ts'

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

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.

import { op } from './op.ts'

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.

import { op } from './op.ts'

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

Clearing User Data

To clear the current user's data:

import { op } from './op.ts'

op.clear()