Script tag

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

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

Config

• url - The url of the openpanel API or your self-hosted instance
• clientId - The client id of your application
• trackScreenViews - If true, the library will automatically track screen views
• trackOutgoingLinks - If true, the library will automatically track outgoing links
• trackAttributes - If true, the library will automatically track attributes

Usage

You can let the library track screen views, outgoing links and attributes tracking by setting the trackScreenViews, trackOutgoingLinks and trackAttributes options to true.

Track event

window.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.

const profileId = '123';
window.op('setProfileId', profileId);

Additional data

This method does the same as setProfileId but also allows you to update the profile with additional data.

const profileId = '123';
window.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
window.op('increment', 'app_opened');
 
// Increment by 5
window.op('increment', 'app_opened', 5);

Decrement property

Decrement a property on the profile.

// Increment by 1
window.op('decrement', 'app_opened');
 
// Increment by 5
window.op('decrement', 'app_opened', 5);

Clear / Logout

Clear the profile id and all the data.

window.op('clear');

Typescript

Is your IDE mad at you for not using typescript? We got you covered.

Add this and it will stop complain about window.op not being defined.

declare global {
  interface Window {
    op: {
      q?: [string, ...any[]];
      (method: string, ...args: any[]): void;
    };
  }
}