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

docs: prepping for beta release

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-11 21:10:37 +01:00
parent 7c816d2511
commit 52a8195ad1
13 changed files with 265 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/docs/src/pages/docs/_meta.json
View File

@@ -1,14 +1,21 @@
{
"index": "Get Started",
"-- Implementation": {
"-- Frameworks": {
"type": "separator",
"title": "Implementation"
"title": "Frameworks"
},
"script": "Script",
"javascript": "Javascript SDK",
"nextjs": "Next.js",
"react": "React",
"react-native": "React-Native",
"remix": "Remix",
"vue": "Vue"
"vue": "Vue",
"astro": "Astro",
"node": "Node (backend)",
"-- Others": {
"type": "separator",
"title": "Others"
},
"javascript": "Javascript SDK",
"web": "Web SDK"
}

5
apps/docs/src/pages/docs/astro.mdx Normal file
View File

@@ -0,0 +1,5 @@
import Link from 'next/link';
# Astro
You can use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> to track events in Astro.

45
apps/docs/src/pages/docs/index.mdx
View File

@@ -1,4 +1,5 @@
import { Card, Cards } from 'nextra/components';
import { BrandLogo } from 'src/components/brand-logo';
# Get started
@@ -7,22 +8,16 @@ Create an account on [Openpanel](https://openpanel.dev) and setup your first pro
<Cards>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png"
/>
<BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" />
}
title="General / Script"
href="/docs/general"
title="HTML / Script"
href="/docs/script"
>
{' '}
</Card>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png"
/>
<BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
}
title="React"
href="/docs/react"
@@ -31,10 +26,7 @@ Create an account on [Openpanel](https://openpanel.dev) and setup your first pro
</Card>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png"
/>
<BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
}
title="React-Native"
href="/docs/react-native"
@@ -43,8 +35,8 @@ Create an account on [Openpanel](https://openpanel.dev) and setup your first pro
</Card>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
<BrandLogo
isDark
src="https://static-00.iconduck.com/assets.00/nextjs-icon-512x512-y563b8iq.png"
/>
}
@@ -55,8 +47,8 @@ Create an account on [Openpanel](https://openpanel.dev) and setup your first pro
</Card>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
<BrandLogo
isDark
src="https://www.datocms-assets.com/205/1642515307-square-logo.svg"
/>
}
@@ -67,14 +59,23 @@ Create an account on [Openpanel](https://openpanel.dev) and setup your first pro
</Card>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1024px-Vue.js_Logo_2.svg.png"
/>
<BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1024px-Vue.js_Logo_2.svg.png" />
}
title="Vue"
href="/docs/vue"
>
{' '}
</Card>
<Card
icon={
<BrandLogo
isDark
src="https://astro.build/assets/press/astro-icon-dark.png"
/>
}
title="Astro"
href="/docs/vue"
>
{' '}
</Card>
</Cards>

34
apps/docs/src/pages/docs/javascript.mdx
View File

@@ -7,7 +7,7 @@ import SdkConfig from 'src/components/sdk-config.mdx';
# Javascript SDK
This is the base SDK for Openpanel. All other SDKs are built on top of this one.
This is the base SDK for Openpanel. All other SDKs/frameworks are built on top of this one.
## Installation
@@ -21,9 +21,9 @@ pnpm install @openpanel/sdk
### Initialize
```tsx
import { Openpanel } from '@openpanel/sdk';
import { OpenpanelSdk } from '@openpanel/sdk';
const op = new Openpanel({
const op = new OpenpanelSdk({
url: 'https://api.openpanel.dev',
clientId: '{YOUR_CLIENT_ID}',
// mostly for backend and apps that can't rely on CORS
@@ -84,10 +84,8 @@ Keep track of your users by identifying them with a unique id. This is a good fe
<PersonalDataWarning />
```typescript
import { setProfileId } from '@openpanel/nextjs';
const profileId = '123';
setProfileId(profileId);
op.setProfileId(profileId);
```
#### Additional data
@@ -97,10 +95,8 @@ This method does the same as `setProfileId` but also allows you to update the pr
<PersonalDataWarning />
```typescript
import { setProfile } from '@openpanel/nextjs';
const profileId = '123';
setProfile({
op.setProfile({
profileId,
// firstName?: string;
// lastName?: string;
@@ -115,13 +111,11 @@ setProfile({
Increment a property on the profile.
```typescript
import { increment } from '@openpanel/nextjs';
// Increment by 1
increment('app_opened');
op.increment('app_opened');
// Increment by 5
increment('app_opened', 5);
op.increment('app_opened', 5);
```
#### Decrement property
@@ -129,11 +123,17 @@ increment('app_opened', 5);
Decrement a property on the profile.
```typescript
import { decrement } from '@openpanel/nextjs';
// Increment by 1
decrement('app_opened');
op.decrement('app_opened');
// Increment by 5
decrement('app_opened', 5);
op.decrement('app_opened', 5);
```
#### Clear / Logout
Clear the profile id and all the data.
```typescript
op.clear();
```

33
apps/docs/src/pages/docs/nextjs.mdx
View File

@@ -7,7 +7,9 @@ import SdkConfig from 'src/components/sdk-config.mdx';
# Next.js
Keep in mind that all tracking here happens on the client! If you want to track server-side events, you should use the <Link href="/docs/node">node SDK</Link> 👀.
Keep in mind that all tracking here happens on the client!
Read more about server side tracking in the [Server Side Tracking](#track-server-events) section.
## Installation
@@ -170,3 +172,32 @@ decrement('app_opened');
// Increment by 5
decrement('app_opened', 5);
```
#### Clear / Logout
Clear the profile id and all the data.
```typescript
import { clear } from '@openpanel/nextjs';
clear();
```
### Track server events
If you want to track server-side events, you should create an instance of our Javascript SDK. It's exported from `@openpanel/nextjs`
```typescript
import { OpenpanelSdk } from '@openpanel/nextjs';
const opServer = new OpenpanelSdk({
url: 'https://api.openpanel.dev',
clientId: '{YOUR_CLIENT_ID}',
clientSecret: '{YOUR_CLIENT_SECRET}',
});
opServer.event('my_server_event', { ok: '✅' });
// Pass `profileId` to track events for a specific user
opServer.event('my_server_event', { profileId: '123', ok: '✅' });
```

5
apps/docs/src/pages/docs/node.mdx Normal file
View File

@@ -0,0 +1,5 @@
import Link from 'next/link';
# Node
Use <Link href="/docs/javascript">Javascript SDK</Link> to track events in Node.

8
apps/docs/src/pages/docs/react-native.mdx
View File

@@ -194,3 +194,11 @@ op.decrement('app_opened');
// Increment by 5
op.decrement('app_opened', 5);
```
#### Clear / Logout
Clear the profile id and all the data.
```typescript
op.clear();
```

2
apps/docs/src/pages/docs/react.mdx
View File

@@ -2,4 +2,4 @@ import Link from 'next/link';
# React
Use <Link href="/docs/general">script tag</Link> or <Link href="/docs/general">Javascript SDK</Link> for now. We'll add a dedicated react sdk soon.
Use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> for now. We'll add a dedicated react sdk soon.

2
apps/docs/src/pages/docs/remix.mdx
View File

@@ -2,4 +2,4 @@ import Link from 'next/link';
# Remix
Use <Link href="/docs/general">script tag</Link> or <Link href="/docs/general">Javascript SDK</Link> for now. We'll add a dedicated react sdk soon.
Use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> for now. We'll add a dedicated remix sdk soon.

8
apps/docs/src/pages/docs/script.mdx
View File

@@ -104,6 +104,14 @@ window.op('decrement', 'app_opened');
window.op('decrement', 'app_opened', 5);
```
#### Clear / Logout
Clear the profile id and all the data.
```typescript
window.op('clear');
```
### Typescript
Is your IDE mad at you for not using typescript? We got you covered.

2
apps/docs/src/pages/docs/vue.mdx
View File

@@ -2,4 +2,4 @@ import Link from 'next/link';
# Vue
Use <Link href="/docs/general">script tag</Link> or <Link href="/docs/general">Javascript SDK</Link> for now. We'll add a dedicated react sdk soon.
Use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> for now. We'll add a dedicated react sdk soon.

138
apps/docs/src/pages/docs/web.mdx Normal file
View File

@@ -0,0 +1,138 @@
import Link from 'next/link';
import { Callout, Steps, Tabs } from 'nextra/components';
import { DeviceIdWarning } from 'src/components/device-id-warning';
import { PersonalDataWarning } from 'src/components/personal-data-warning';
import SdkConfig from 'src/components/sdk-config.mdx';
# Web SDK
This is a wrapper of <Link href="/docs/javascript">Javascript SDK</Link>. It's a simple way to use the Openpanel SDK in your web application.
## Installation
<Steps>
### Install dependencies
```bash
pnpm install @openpanel/web
```
### Initialize
```tsx
import { Openpanel } from '@openpanel/web';
const op = new Openpanel({
url: 'https://api.openpanel.dev',
clientId: '{YOUR_CLIENT_ID}',
trackScreenViews: true,
// trackAttributes: true,
// trackOutgoingLinks: true,
});
```
#### Config
<SdkConfig />
### Ready!
You're now ready to use the library.
```typescript
// 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: 'john.doe@openpanel.dev',
});
// 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
```
</Steps>
## Usage
### Track event
```typescript
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.
<PersonalDataWarning />
```typescript
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.
<PersonalDataWarning />
```typescript
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.
```typescript
// Increment by 1
op.increment('app_opened');
// Increment by 5
op.increment('app_opened', 5);
```
#### Decrement property
Decrement a property on the profile.
```typescript
// 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.
```typescript
op.clear();
```