Web SDK
This is a wrapper of Javascript SDK. It's a simple way to use the Openpanel SDK in your web application.
Installation
Install dependencies
pnpm install @openpanel/web
Initialize
import { Openpanel } from '@openpanel/web';
const op = new Openpanel({
clientId: '{YOUR_CLIENT_ID}',
trackScreenViews: true,
// trackAttributes: true,
// trackOutgoingLinks: true,
});
Config
url
- The url of the openpanel API or your self-hosted instanceclientId
- The client id of your applicationtrackScreenViews
- If true, the library will automatically track screen viewstrackOutgoingLinks
- If true, the library will automatically track outgoing linkstrackAttributes
- If true, the library will automatically track attributes
Ready!
You're now ready to use the library.
// Sends an event with payload foo: bar
op.event('my_event', { foo: 'bar' });
// Identify with profile id
op.setProfileId('123');
// or with additional data
op.setProfile({
profileId: '123',
firstName: 'John',
lastName: 'Doe',
email: '[email protected]',
});
// Increment a property
op.increment('app_opened'); // increment by 1
op.increment('app_opened', 5); // increment by 5
// Decrement a property
op.decrement('app_opened'); // decrement by 1
op.decrement('app_opened', 5); // decrement by 5
Usage
Track event
op.event('my_event', { foo: 'bar' });
Identify
Set Profile Id
Keep track of your users by identifying them with a unique id. This is a good features if you have things behind a login and want to track user behavior.
⚠️
Keep in mind that this is considered personal data. Make sure you have the users consent before calling this!
const profileId = '123';
op.setProfileId(profileId);
Additional data
This method does the same as setProfileId
but also allows you to update the profile with additional data.
⚠️
Keep in mind that this is considered personal data. Make sure you have the users consent before calling this!
const profileId = '123';
op.setProfile({
profileId,
// firstName?: string;
// lastName?: string;
// email?: string;
// avatar?: string;
// properties?: Record<string, unknown>;
});
Increment property
Increment a property on the profile.
// Increment by 1
op.increment('app_opened');
// Increment by 5
op.increment('app_opened', 5);
Decrement property
Decrement a property on the profile.
// Increment by 1
op.decrement('app_opened');
// Increment by 5
op.decrement('app_opened', 5);
Clear / Logout
Clear the profile id and all the data.
op.clear();