zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

chore(public): update docs

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-12-03 20:27:53 +01:00
parent 152216f64b
commit 2e3e7037bd
6 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/public/content/docs/index.mdx
View File

@@ -23,7 +23,7 @@ Tracks a custom event with the given name and optional properties.
You can identify the user directly with this method.
```js filename="Example shown in JavaScript"
```js title="Example shown in JavaScript"
track('your_event_name', {
foo: 'bar',
baz: 'qux',

18
apps/public/content/docs/sdks/javascript.mdx
View File

@@ -19,7 +19,7 @@ npm install @openpanel/sdk
### Step 2: Initialize
```js filename="op.ts"
```js title="op.ts"
import { OpenPanel } from '@openpanel/sdk';
const op = new OpenPanel({
@@ -34,7 +34,7 @@ const op = new OpenPanel({
### Step 3: Usage
```js filename="main.ts"
```js title="main.ts"
import { op } from './op.js';
op.track('my_event', { foo: 'bar' });
@@ -47,7 +47,7 @@ op.track('my_event', { foo: 'bar' });
You can track events with two different methods: by calling the `op.track( directly or by adding `data-track` attributes to your HTML elements.
```ts filename="index.ts"
```ts title="index.ts"
import { op } from './op.ts';
op.track('my_event', { foo: 'bar' });
@@ -57,7 +57,7 @@ op.track('my_event', { foo: 'bar' });
To identify a user, call the `op.identify( method with a unique identifier.
```js filename="index.js"
```js title="index.js"
import { op } from './op.ts';
op.identify({
@@ -75,7 +75,7 @@ op.identify({
To set properties that will be sent with every event:
```js filename="index.js"
```js title="index.js"
import { op } from './op.ts'
op.setGlobalProperties({
@@ -88,7 +88,7 @@ op.setGlobalProperties({
To create an alias for a user:
```js filename="index.js"
```js title="index.js"
import { op } from './op.ts'
op.alias({
@@ -103,7 +103,7 @@ 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.
```js filename="index.js"
```js title="index.js"
import { op } from './op.ts'
op.increment({
@@ -119,7 +119,7 @@ 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.
```js filename="index.js"
```js title="index.js"
import { op } from './op.ts'
op.decrement({
@@ -133,7 +133,7 @@ op.decrement({
To clear the current user's data:
```js filename="index.js"
```js title="index.js"
import { op } from './op.ts'
op.clear()

24
apps/public/content/docs/sdks/nextjs.mdx
View File

@@ -114,7 +114,7 @@ Since you can't use hooks in server components, you need to create an instance o
<Callout>Remember, your client secret is exposed here so do not use this on client side.</Callout>
```tsx filename="utils/op.ts"
```tsx title="utils/op.ts"
import { OpenPanel } from '@openpanel/nextjs';
export const op = new OpenPanel({
@@ -132,7 +132,7 @@ Refer to the [Javascript SDK](/docs/sdks/javascript#usage) for usage instruction
You can track events with two different methods: by calling the `op.track( directly or by adding `data-track` attributes to your HTML elements.
```ts filename="index.ts"
```ts title="index.ts"
useOpenPanel().track('my_event', { foo: 'bar' });
```
@@ -140,7 +140,7 @@ useOpenPanel().track('my_event', { foo: 'bar' });
To identify a user, call the `op.identify( method with a unique identifier.
```js filename="index.js"
```js title="index.js"
useOpenPanel().identify({
profileId: '123', // Required
firstName: 'Joe',
@@ -158,7 +158,7 @@ For server components you can use the `IdentifyComponent` component which is exp
> This component is great if you have the user data available on the server side.
```tsx filename="app/nested/layout.tsx"
```tsx title="app/nested/layout.tsx"
import { IdentifyComponent } from '@openpanel/nextjs';
export default function Layout({ children }) {
@@ -186,7 +186,7 @@ export default function Layout({ children }) {
To set properties that will be sent with every event:
```js filename="index.js"
```js title="index.js"
useOpenPanel().setGlobalProperties({
app_version: '1.0.2',
environment: 'production',
@@ -197,7 +197,7 @@ useOpenPanel().setGlobalProperties({
To create an alias for a user:
```js filename="index.js"
```js title="index.js"
useOpenPanel().alias({
alias: 'a1',
profileId: '1'
@@ -210,7 +210,7 @@ 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.
```js filename="index.js"
```js title="index.js"
useOpenPanel().increment({
profileId: '1',
property: 'visits',
@@ -224,7 +224,7 @@ 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.
```js filename="index.js"
```js title="index.js"
useOpenPanel().decrement({
profileId: '1',
property: 'visits',
@@ -236,7 +236,7 @@ useOpenPanel().decrement({
To clear the current user's data:
```js filename="index.js"
```js title="index.js"
useOpenPanel().clear()
```
@@ -286,7 +286,7 @@ export function GET() {
With `createNextRouteHandler` you can proxy your events through your server, this will ensure all events are tracked since there is a lot of adblockers that block requests to third party domains.
```typescript filename="/app/api/op/route.ts"
```typescript title="/app/api/[...op]/route.ts"
import { createNextRouteHandler } from '@openpanel/nextjs/server';
export const POST = createNextRouteHandler();
@@ -294,9 +294,9 @@ export const POST = createNextRouteHandler();
Remember to change the `apiUrl` in the `OpenPanelComponent` to your own server.
```tsx {2}
```tsx
<OpenPanelComponent
apiUrl="/api/op"
apiUrl="/api/op" // [!code highlight]
clientId="your-client-id"
trackScreenViews={true}
/>

28
apps/public/content/docs/sdks/script.mdx
View File

@@ -13,7 +13,7 @@ import WebSdkConfig from '@/components/web-sdk-config.mdx';
Just insert this snippet and replace `YOUR_CLIENT_ID` with your client id.
```html filename="index.html" /clientId: 'YOUR_CLIENT_ID'/
```html title="index.html" /clientId: 'YOUR_CLIENT_ID'/
<script>
window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
window.op('init', {
@@ -37,13 +37,13 @@ Just insert this snippet and replace `YOUR_CLIENT_ID` with your client id.
You can track events with two different methods: by calling the `window.op('track')` directly or by adding `data-track` attributes to your HTML elements.
```html filename="index.html"
```html title="index.html"
<button type="button" onclick="window.op('track', 'my_event', { foo: 'bar' })">
Track event
</button>
```
```html filename="index.html"
```html title="index.html"
<button type="button" data-track="my_event" data-foo="bar">Track event</button>
```
@@ -51,7 +51,7 @@ You can track events with two different methods: by calling the `window.op('trac
To identify a user, call the `window.op('identify')` method with a unique identifier.
```js filename="main.js"
```js title="main.js"
window.op('identify', {
profileId: '123', // Required
firstName: 'Joe',
@@ -67,7 +67,7 @@ window.op('identify', {
To set properties that will be sent with every event:
```js filename="main.js"
```js title="main.js"
window.op('setGlobalProperties', {
app_version: '1.0.2',
environment: 'production',
@@ -78,7 +78,7 @@ window.op('setGlobalProperties', {
To create an alias for a user:
```js filename="main.js"
```js title="main.js"
window.op('alias', {
alias: 'a1',
profileId: '1'
@@ -91,7 +91,7 @@ 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.
```js filename="main.js"
```js title="main.js"
window.op('increment', {
profileId: '1',
property: 'visits',
@@ -105,7 +105,7 @@ 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.
```js filename="main.js"
```js title="main.js"
window.op('decrement', {
profileId: '1',
property: 'visits',
@@ -117,7 +117,7 @@ window.op('decrement', {
To clear the current user's data:
```js filename="main.js"
```js title="main.js"
window.op('clear');
```
@@ -129,7 +129,7 @@ You can filter out events by adding a `filter` property to the `init` method.
Below is an example of how to disable tracking for users who have a `disable_tracking` item in their local storage.
```js filename="main.js"
```js title="main.js"
window.op('init', {
clientId: 'YOUR_CLIENT_ID',
trackScreenViews: true,
@@ -150,7 +150,7 @@ npm install @openpanel/web
#### Step 2: Initialize the SDK
```js filename="op.js"
```js title="op.js"
import { OpenPanel } from '@openpanel/web';
const op = new OpenPanel({
@@ -163,7 +163,7 @@ const op = new OpenPanel({
#### Step 3: Use the SDK
```js filename="main.js"
```js title="main.js"
import { op } from './op.js';
op.track('my_event', { foo: 'bar' });
@@ -178,7 +178,7 @@ Getting ts errors when using the SDK? You can add a custom type definition file
Just paste this code in any of your `.d.ts` files.
```ts filename="op.d.ts"
```ts title="op.d.ts"
declare global {
interface Window {
op: {
@@ -205,7 +205,7 @@ npm install @openpanel/web
Create a `op.d.ts`file and paste the following code:
```ts filename="op.d.ts"
```ts title="op.d.ts"
/// <reference types="@openpanel/web" />
```
</Steps>

4
apps/public/content/docs/sdks/web.mdx
View File

@@ -19,7 +19,7 @@ npm install @openpanel/web
### Step 2: Initialize
```js filename="op.ts"
```js title="op.ts"
import { OpenPanel } from '@openpanel/web';
const op = new OpenPanel({
@@ -37,7 +37,7 @@ const op = new OpenPanel({
### Step 3: Usage
```js filename="main.ts"
```js title="main.ts"
import { op } from './op.js';
op.track('my_event', { foo: 'bar' });

8
apps/public/content/docs/self-hosting/self-hosting.mdx
View File

@@ -107,11 +107,11 @@ When self-hosting you'll need to provide your api url when initializing the SDK.
The path should be `/api` and the domain should be your domain.
```html filename="index.html" {4}
```html title="index.html"
<script>
window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
window.op('init', {
apiUrl: 'https://your-domain.com/api',
apiUrl: 'https://your-domain.com/api', // [!code highlight]
clientId: 'YOUR_CLIENT_ID',
trackScreenViews: true,
trackOutgoingLinks: true,
@@ -121,11 +121,11 @@ The path should be `/api` and the domain should be your domain.
<script src="https://openpanel.dev/op1.js" defer async></script>
```
```js filename="op.ts" {4}
```js title="op.ts"
import { OpenPanel } from '@openpanel/sdk';
const op = new OpenPanel({
apiUrl: 'https://your-domain.com/api',
apiUrl: 'https://your-domain.com/api', // [!code highlight]
clientId: 'YOUR_CLIENT_ID',
trackScreenViews: true,
trackOutgoingLinks: true,