added docs for react
This commit is contained in:
goenning
parent
b1062af145
commit
971e423e42
5 changed files with 123 additions and 1 deletions
|
|
@ -0,0 +1,3 @@
|
|||
## 0.1.0
|
||||
|
||||
- Initial version of the React SDK for Aptabase
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
|
||||
# React SDK for Aptabase
|
||||
|
||||
A tiny SDK (1 kB) to instrument your React apps with Aptabase, an Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps.
|
||||
|
||||
## Setup
|
||||
|
||||
1. Install the SDK using your preferred JavaScript package manager
|
||||
|
||||
```bash
|
||||
npm add @aptabase/react
|
||||
```
|
||||
|
||||
2. Get your `App Key` from Aptabase, you can find it in the `Instructions` menu on the left side menu.
|
||||
|
||||
3. Initialize the `AptabaseProvider` component to your app based on your framework.
|
||||
|
||||
<details>
|
||||
<summary>Setup for Next.js (App Router)</summary>
|
||||
|
||||
Add `AptabaseProvider` to your RootLayout component:
|
||||
|
||||
```tsx
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<AptabaseProvider appKey="A-US-5431775171">{children}</AptabaseProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Setup for Next.js (Pages Router)</summary>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Setup for Remix</summary>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Setup for Create React App or Vite</summary>
|
||||
|
||||
Add `AptabaseProvider` to your root component:
|
||||
|
||||
```tsx
|
||||
import { AptabaseProvider } from '@aptabase/react';
|
||||
|
||||
ReactDOM.createRoot(root).render(
|
||||
<React.StrictMode>
|
||||
<AptabaseProvider appKey="<YOUR_APP_KEY>">
|
||||
<YourApp />
|
||||
</AptabaseProvider>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## Advanced setup
|
||||
|
||||
The `AptabaseProvider` also supports an optional second parameter, which is an object with the `appVersion` property.
|
||||
|
||||
It's up to you to decide what to get the version of your app, but it's generally recommended to use your bundler (like Webpack, Vite, Rollup, etc.) to inject the values at build time.
|
||||
|
||||
## Tracking Events with Aptabase
|
||||
|
||||
After setting up the `AptabaseProvider`, you can then start tracking events using the `useAptabase` hook.
|
||||
|
||||
Here's an example of a simple counter component that tracks the `increment` and `decrement` events:
|
||||
|
||||
```js
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useAptabase } from '@aptabase/react';
|
||||
|
||||
export function Counter() {
|
||||
const { trackEvent } = useAptabase();
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
function increment() {
|
||||
setCount((c) => c + 1);
|
||||
trackEvent('increment', { count });
|
||||
}
|
||||
|
||||
function decrement() {
|
||||
setCount((c) => c - 1);
|
||||
trackEvent('decrement', { count });
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Count: {count}</p>
|
||||
<button onClick={increment}>Increment</button>
|
||||
<button onClick={decrement}>Decrement</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
A few important notes:
|
||||
|
||||
1. The SDK will automatically enhance the event with some useful information, like the OS, the app version, and other things.
|
||||
2. You're in control of what gets sent to Aptabase. This SDK does not automatically track any events, you need to call `trackEvent` manually.
|
||||
- Because of this, it's generally recommended to at least track an event at startup
|
||||
3. You do not need to await the `trackEvent` function, it'll run in the background.
|
||||
4. Only strings and numbers values are allowed on custom properties
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
## 0.2.0
|
||||
|
||||
- Some internal refactor to support the new `@aptabase/react` package
|
||||
|
||||
## 0.1.3
|
||||
|
||||
- Add automatic session timeout after 1 hour of inactivity
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
|
||||
A tiny SDK (1 kB) to instrument your web app with Aptabase, an Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps.
|
||||
|
||||
Building a React app? Use the `@aptabase/react` package instead.
|
||||
|
||||
> 👉 **IMPORTANT**
|
||||
>
|
||||
> This SDK is for **Web Applications**, not websites. There's a subtle, but important difference. A web app is often a lot more interactive and does not cause a full page reload when the user interacts with it. It's often called a **Single-Page Application**. A website, on the other hand, is a lot more content-focused like marketing sites, landing pages, blogs, etc. While you can certainly use Aptabase to track events on websites, please be aware that each page reload will be considered a new session.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@aptabase/web",
|
||||
"version": "0.1.3",
|
||||
"version": "0.2.0",
|
||||
"type": "module",
|
||||
"description": "JavaScript SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
|
||||
"main": "./dist/index.cjs",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue