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

add documentation

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-11 13:05:28 +01:00
parent faafb71d88
commit 1ca95442b9
27 changed files with 3236 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/docs/src/pages/_app.tsx Normal file
View File

@@ -0,0 +1,11 @@
import type { AppProps } from 'next/app';
import 'src/globals.css';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
</>
);
}

10
apps/docs/src/pages/_meta.json Normal file
View File

@@ -0,0 +1,10 @@
{
"index": {
"title": "Introduction",
"type": "page"
},
"docs": {
"title": "Documentation",
"type": "page"
}
}

14
apps/docs/src/pages/docs/_meta.json Normal file
View File

@@ -0,0 +1,14 @@
{
"index": "Get Started",
"-- Implementation": {
"type": "separator",
"title": "Implementation"
},
"script": "Script",
"javascript": "Javascript SDK",
"nextjs": "Next.js",
"react": "React",
"react-native": "React-Native",
"remix": "Remix",
"vue": "Vue"
}

80
apps/docs/src/pages/docs/index.mdx Normal file
View File

@@ -0,0 +1,80 @@
import { Card, Cards } from 'nextra/components';
# Get started
Create an account on [Openpanel](https://openpanel.dev) and setup your first project (takes 2 minutes). You will get a `clientId` that you will use to initialize Openpanel in your app.
<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"
/>
}
title="General / Script"
href="/docs/general"
>
{' '}
</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"
/>
}
title="React"
href="/docs/react"
>
{' '}
</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"
/>
}
title="React-Native"
href="/docs/react-native"
>
{' '}
</Card>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
src="https://static-00.iconduck.com/assets.00/nextjs-icon-512x512-y563b8iq.png"
/>
}
title="Next.js"
href="/docs/nextjs"
>
{' '}
</Card>
<Card
icon={
<img
style={{ width: 32, height: 32, objectFit: 'contain' }}
src="https://www.datocms-assets.com/205/1642515307-square-logo.svg"
/>
}
title="Remix"
href="/docs/remix"
>
{' '}
</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"
/>
}
title="Vue"
href="/docs/vue"
>
{' '}
</Card>
</Cards>

139
apps/docs/src/pages/docs/javascript.mdx Normal file
View File

@@ -0,0 +1,139 @@
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';
# Javascript SDK
This is the base SDK for Openpanel. All other SDKs are built on top of this one.
## Installation
<Steps>
### Install dependencies
```bash
pnpm install @openpanel/sdk
```
### Initialize
```tsx
import { Openpanel } from '@openpanel/sdk';
const op = new Openpanel({
url: 'https://api.openpanel.dev',
clientId: '{YOUR_CLIENT_ID}',
// mostly for backend and apps that can't rely on CORS
clientSecret: '{YOUR_CLIENT_SECRET}',
});
```
#### Config
- `url` - 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 (mostly for backend and apps that can't rely on CORS)
### 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
import { setProfileId } from '@openpanel/nextjs';
const profileId = '123';
setProfileId(profileId);
```
#### Additional data
This method does the same as `setProfileId` but also allows you to update the profile with additional data.
<PersonalDataWarning />
```typescript
import { setProfile } from '@openpanel/nextjs';
const profileId = '123';
setProfile({
profileId,
// firstName?: string;
// lastName?: string;
// email?: string;
// avatar?: string;
// properties?: Record<string, unknown>;
});
```
#### Increment property
Increment a property on the profile.
```typescript
import { increment } from '@openpanel/nextjs';
// Increment by 1
increment('app_opened');
// Increment by 5
increment('app_opened', 5);
```
#### Decrement property
Decrement a property on the profile.
```typescript
import { decrement } from '@openpanel/nextjs';
// Increment by 1
decrement('app_opened');
// Increment by 5
decrement('app_opened', 5);
```

172
apps/docs/src/pages/docs/nextjs.mdx Normal file
View File

@@ -0,0 +1,172 @@
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';
# 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> 👀.
## Installation
<Steps>
### Install dependencies
```bash
pnpm install @openpanel/nextjs
```
### Initialize
Add `OpenpanelProvider` to your root layout component.
```tsx
import { OpenpanelProvider } from '@openpanel/nextjs';
export default RootLayout({ children }) {
return (
<>
<OpenpanelProvider
url="https://api.openpanel.dev"
clientId="your-client-id"
trackScreenViews={true}
// trackAttributes={true}
// trackOutgoingLinks={true}
/>
{children}
</>
)
}
```
#### Config
<SdkConfig />
### Ready!
You're now ready to use the library.
```typescript
import {
decrement,
increment,
setProfile,
setProfileId,
trackEvent,
trackScreenView,
} from '@openpanel/nextjs';
// Sends an event with payload foo: bar
trackEvent('my_event', { foo: 'bar' });
// Identify with profile id
setProfileId('123');
// or with additional data
setProfile({
profileId: '123',
firstName: 'John',
lastName: 'Doe',
email: 'john.doe@openpanel.dev',
});
// Increment a property
increment('app_opened'); // increment by 1
increment('app_opened', 5); // increment by 5
// Decrement a property
decrement('app_opened'); // decrement by 1
decrement('app_opened', 5); // decrement by 5
```
</Steps>
## Usage
### Track event
<Tabs items={['JS', 'window', 'HTML']}>
<Tabs.Tab>
```typescript
import { trackEvent } from '@openpanel/nextjs';
trackEvent('my_event', { foo: 'bar' });
```
</Tabs.Tab>
<Tabs.Tab>
```javascript
window.op('event', 'my_event', { foo: 'bar' });
```
</Tabs.Tab>
<Tabs.Tab>
For this to work you need to enable `trackAttributes` in the config.
```html
<button data-event="my_event" data-foo="bar">Track event</button>
```
</Tabs.Tab>
</Tabs>
### 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
import { setProfileId } from '@openpanel/nextjs';
const profileId = '123';
setProfileId(profileId);
```
#### Additional data
This method does the same as `setProfileId` but also allows you to update the profile with additional data.
<PersonalDataWarning />
```typescript
import { setProfile } from '@openpanel/nextjs';
const profileId = '123';
setProfile({
profileId,
// firstName?: string;
// lastName?: string;
// email?: string;
// avatar?: string;
// properties?: Record<string, unknown>;
});
```
#### Increment property
Increment a property on the profile.
```typescript
import { increment } from '@openpanel/nextjs';
// Increment by 1
increment('app_opened');
// Increment by 5
increment('app_opened', 5);
```
#### Decrement property
Decrement a property on the profile.
```typescript
import { decrement } from '@openpanel/nextjs';
// Increment by 1
decrement('app_opened');
// Increment by 5
decrement('app_opened', 5);
```

196
apps/docs/src/pages/docs/react-native.mdx Normal file
View File

@@ -0,0 +1,196 @@
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';
# React-Native
## Installation
<Steps>
### Install dependencies
We're dependent on `expo-application` for `buildNumber`, `versionNumber` (and `referrer` on android) and `expo-constants` to get the `user-agent`.
```bash
pnpm install @openpanel/react-native
expo install --pnpm expo-application expo-constants
```
### Initialize
On native we use a clientSecret to authenticate the app.
```typescript
const op = new Openpanel({
url: 'https://api.openpanel.dev',
clientId: '{YOUR_CLIENT_ID}',
clientSecret: '{YOUR_CLIENT_SECRET}',
});
```
#### Config
- `url` - 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
### 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' });
```
### Navigation / Screen views
<Tabs items={['expo-router', 'react-navigation (simple)']}>
<Tabs.Tab>
```typescript
import { usePathname, useSegments } from 'expo-router';
function RootLayout() {
// ...
const pathname = usePathname()
// Segments is optional but can be nice to have if you
// want to group routes together
// pathname = /posts/123
// segements = ['posts', '[id]']
const segments = useSegments()
useEffect(() => {
// Simple
op.screenView(pathname)
// With extra data
op.screenView(pathname, {
// segments is optional but nice to have
segments: segments.join('/'),
// other optional data you want to send with the screen view
})
}, [pathname,segments])
// ...
}
```
</Tabs.Tab>
<Tabs.Tab>
```tsx
import { createNavigationContainerRef } from '@react-navigation/native'
import { Openpanel } from '@openpanel/react-native'
const op = new Openpanel({ /* ... */ })
const navigationRef = createNavigationContainerRef()
export function NavigationRoot() {
const handleNavigationStateChange = () => {
const current = navigationRef.getCurrentRoute()
if (current) {
op.screenView(current.name, {
params: current.params,
})
}
}
return (
<NavigationContainer
ref={navigationRef}
onReady={handleNavigationStateChange}
onStateChange={handleNavigationStateChange}
>
<Stack.Navigator />
</NavigationContainer>
)
}
```
</Tabs.Tab>
</Tabs>
### 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);
```

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

@@ -0,0 +1,5 @@
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.

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

@@ -0,0 +1,5 @@
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.

122
apps/docs/src/pages/docs/script.mdx Normal file
View File

@@ -0,0 +1,122 @@
import { Callout, Tabs } from 'nextra/components';
import { PersonalDataWarning } from 'src/components/personal-data-warning';
import SdkConfig from 'src/components/sdk-config.mdx';
# Script tag
Just insert this snippet and replace `{YOUR_CLIENT_ID}` with your client id.
```html
<script src="https://openpanel.dev/op.js"></script>
<script>
window.op =
window.op ||
function (...args) {
(window.op.q = window.op.q || []).push(args);
};
window.op('ctor', {
url: 'https://api.openpanel.dev',
clientId: '{YOUR_CLIENT_ID}',
trackScreenViews: true,
// trackOutgoingLinks: true,
// trackAttributes: true,
});
</script>
```
### Config
<SdkConfig />
## 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
<Tabs items={['JS', 'HTML']}>
<Tabs.Tab>
```javascript
window.op('event', 'my_event', { foo: 'bar' });
```
</Tabs.Tab>
<Tabs.Tab>
For this to work you need to enable `trackAttributes` in the config.
```html
<button data-event="my_event" data-foo="bar">Track event</button>
```
</Tabs.Tab>
</Tabs>
### 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 />
```javascript
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.
<PersonalDataWarning />
```javascript
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.
```javascript
// 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.
```javascript
// Increment by 1
window.op('decrement', 'app_opened');
// Increment by 5
window.op('decrement', 'app_opened', 5);
```
### 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.
```typescript
declare global {
interface Window {
op: {
q?: [string, ...any[]];
(method: string, ...args: any[]): void;
};
}
}
```

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

@@ -0,0 +1,5 @@
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.

14
apps/docs/src/pages/index.mdx Normal file
View File

@@ -0,0 +1,14 @@
# Introduction
Openpanel is an open-source alternative to Mixpanel. Combining the power of Mixpanel with the ease of Plausible, Openpanel is a privacy-focused analytics tool that gives you the insights you need to make data-driven decisions.
## Features
- ✅ **Privacy-focused**: Openpanel is built with privacy in mind. We don't track any personal data and we don't use cookies.
- ✅ **Open-source**: Openpanel is open-source and you can host it yourself.
- ✅ **Cloud-hosted**: You can choose our cloud hosting if you don't want to host it yourself. We take care of the infrastructure and you can focus on your business.
- ✅ **Real-time analytics**: Everything is updated in real-time, no delays to see your insights.
- ✅ **Event-based tracking**: You can track any event you want, and you can track as many events as you want.
- ✅ **Custom properties**: You can add custom properties to your events to track more data.
- ✅ **Funnel analysis**: You can create funnels to see how your users are interacting with your product.
- ✅ **Reports**: Create as many reports as you want to visualize the data you need.