Javascript SDK

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.

Installation

Step 1: Install

npm install @openpanel/sdk

Step 2: Initialize

op.ts

import { OpenPanel } from '@openpanel/sdk';
 
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
waitForProfile - If true, the library will wait for the profile to be set before sending events

Step 3: Usage

main.ts

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.

index.ts

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.

index.js

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:

index.js

import { op } from './op.ts'
 
op.setGlobalProperties({
  app_version: '1.0.2',
  environment: 'production',
});

Creating Aliases

To create an alias for a user:

index.js

import { op } from './op.ts'
 
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.

index.js

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.

index.js

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

Clearing User Data

To clear the current user's data:

index.js

import { op } from './op.ts'
 
op.clear()

Express (backend)API