--- title: Astro --- import { Step, Steps } from 'fumadocs-ui/components/steps'; import { Callout } from 'fumadocs-ui/components/callout'; import CommonSdkConfig from '@/components/common-sdk-config.mdx'; import WebSdkConfig from '@/components/web-sdk-config.mdx'; Looking for a step-by-step tutorial? Check out the [Astro analytics guide](/guides/astro-analytics). ## Installation ### Install dependencies ```bash pnpm install @openpanel/astro ``` ### Initialize Add `OpenPanelComponent` to your root layout component. ```astro --- import { OpenPanelComponent } from '@openpanel/astro'; --- ``` #### Options ##### Astro options - `profileId` - If you have a user id, you can pass it here to identify the user - `cdnUrl` (deprecated) - The url to the OpenPanel SDK (default: `https://openpanel.dev/op1.js`) - `scriptUrl` - 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](#filter) - `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. ```astro ``` To take advantage of typescript you can do the following. _Note `toString`_ ```ts import { type TrackHandlerPayload } from '@openpanel/astro'; const opFilter = ((event: TrackHandlerPayload) => { return event.type === 'track' && event.payload.name === 'my_event'; }).toString(); ``` ## Usage ### Client-side Tracking You can track events with the global op function or you can use data attributes. ```astro ``` ### Identifying Users To identify a user, you can use either the `identify` function or the `IdentifyComponent`. ```astro --- import { IdentifyComponent } from '@openpanel/astro'; --- ``` ### Setting Global Properties You can set global properties that will be sent with every event using either the `setGlobalProperties` function or the `SetGlobalPropertiesComponent`. ```astro --- import { SetGlobalPropertiesComponent } from '@openpanel/astro'; --- ```