Astro

Looking for a step-by-step tutorial? Check out the Astro analytics guide.

Installation

Install dependencies

pnpm install @openpanel/astro

Initialize

Add OpenPanelComponent to your root layout component.

---
import { OpenPanelComponent } from '@openpanel/astro';
---

<html>
  <head>
    <OpenPanelComponent
      clientId="your-client-id"
      trackScreenViews={true}
      // trackAttributes={true}
      // trackOutgoingLinks={true}
      // If you have a user id, you can pass it here to identify the user
      // profileId={'123'}
    />
  </head>
  <body>
    <slot />
  </body>
</html>

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

Web options

trackScreenViews - If true, the library will automatically track screen views (default: false)
trackOutgoingLinks - If true, the library will automatically track outgoing links (default: false)
trackAttributes - If true, you can trigger events by using html attributes (<button type="button" data-track="your_event" />) (default: false)

Astro options

profileId - If you have a user id, you can pass it here to identify the user
cdnUrl - The url to the OpenPanel SDK (default: https://openpanel.dev/op1.js)
filter - This is a function that will be called before tracking an event. If it returns false the event will not be tracked. Read more
globalProperties - This is an object of properties that will be sent with every event.

`filter`

This options needs to be a stringified function and cannot access any variables outside of the function.

<OpenPanelComponent
  clientId="your-client-id"
  filter={`
    function filter(event) {
      return event.name !== 'my_event';
    }
  `}
/>

To take advantage of typescript you can do the following. Note toString

import { type TrackHandlerPayload } from '@openpanel/astro';

const opFilter = ((event: TrackHandlerPayload) => {
  return event.type === 'track' && event.payload.name === 'my_event';
}).toString();

<OpenPanelComponent
  clientId="your-client-id"
  filter={opFilter}
/>

Usage

Client-side Tracking

You can track events with the global op function or you can use data attributes.

<button onclick="window.op('track', 'clicky')">Click me</button>
<button data-track="clicky" data-prop1="prop1" data-prop2="prop2">Click me</button>

Identifying Users

To identify a user, you can use either the identify function or the IdentifyComponent.

---
import { IdentifyComponent } from '@openpanel/astro';
---

<IdentifyComponent
  profileId="123"
  firstName="Joe"
  lastName="Doe"
  email="joe@doe.com"
  properties={{
    tier: 'premium',
  }}
/>

Setting Global Properties

You can set global properties that will be sent with every event using either the setGlobalProperties function or the SetGlobalPropertiesComponent.

---
import { SetGlobalPropertiesComponent } from '@openpanel/astro';
---

<SetGlobalPropertiesComponent
  properties={{
    app_version: '1.0.2',
    environment: 'production',
  }}
/>

Common options

Web options

On this page