@productbet/tracker-next 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +116 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
# @productbet/tracker-next
|
|
2
|
+
|
|
3
|
+
Next.js App Router integration for [ProductBet](https://productbet.io) behavioral analytics. Drop-in session recording, event tracking, and user identification with automatic route change tracking.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @productbet/tracker-next
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick start
|
|
12
|
+
|
|
13
|
+
Add `ProductBetScript` to your root layout:
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
// app/layout.tsx
|
|
17
|
+
import { ProductBetScript } from "@productbet/tracker-next"
|
|
18
|
+
|
|
19
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
20
|
+
return (
|
|
21
|
+
<html>
|
|
22
|
+
<body>
|
|
23
|
+
<ProductBetScript apiKey="pb_live_xxxx">
|
|
24
|
+
{children}
|
|
25
|
+
</ProductBetScript>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
That's it. The SDK will automatically track page views on route changes, clicks, form interactions, scroll depth, console errors, and network failures.
|
|
33
|
+
|
|
34
|
+
## Components
|
|
35
|
+
|
|
36
|
+
### `ProductBetScript`
|
|
37
|
+
|
|
38
|
+
The simplest way to add ProductBet to a Next.js app. Wraps your app with the provider and enables route tracking.
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<ProductBetScript apiKey="pb_live_xxxx" enableSessionRecording={true}>
|
|
42
|
+
{children}
|
|
43
|
+
</ProductBetScript>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### `ProductBetProvider`
|
|
47
|
+
|
|
48
|
+
If you need more control, use the provider directly. It extends the React provider with automatic `usePathname()` route tracking.
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { ProductBetProvider } from "@productbet/tracker-next"
|
|
52
|
+
|
|
53
|
+
<ProductBetProvider
|
|
54
|
+
apiKey="pb_live_xxxx"
|
|
55
|
+
trackRouteChanges={true}
|
|
56
|
+
enableSessionRecording={true}
|
|
57
|
+
>
|
|
58
|
+
{children}
|
|
59
|
+
</ProductBetProvider>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Set `trackRouteChanges={false}` to disable automatic page view tracking on route changes.
|
|
63
|
+
|
|
64
|
+
## Hooks
|
|
65
|
+
|
|
66
|
+
All hooks from `@productbet/tracker-react` are re-exported:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { useIdentify, useTrackEvent, useTracker } from "@productbet/tracker-next"
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### `useIdentify`
|
|
73
|
+
|
|
74
|
+
Identify the current user once authenticated.
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
function Dashboard({ user }) {
|
|
78
|
+
useIdentify(user.id, { plan: user.plan })
|
|
79
|
+
return <div>...</div>
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### `useTrackEvent`
|
|
84
|
+
|
|
85
|
+
Track custom events.
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
function UpgradeButton() {
|
|
89
|
+
const track = useTrackEvent()
|
|
90
|
+
return <button onClick={() => track("upgrade_clicked", { from: "free" })}>Upgrade</button>
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Configuration
|
|
95
|
+
|
|
96
|
+
All props from `@productbet/tracker-core` are supported:
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<ProductBetScript
|
|
100
|
+
apiKey="pb_live_xxxx"
|
|
101
|
+
enableSessionRecording={true}
|
|
102
|
+
enableAutoTracking={true}
|
|
103
|
+
enableConsoleTracking={true}
|
|
104
|
+
enableNetworkTracking={true}
|
|
105
|
+
redaction={{ mode: "privacy-first", unredactFields: ["search"] }}
|
|
106
|
+
debug={false}
|
|
107
|
+
>
|
|
108
|
+
{children}
|
|
109
|
+
</ProductBetScript>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
See [@productbet/tracker-core](https://www.npmjs.com/package/@productbet/tracker-core) for the full list of options.
|
|
113
|
+
|
|
114
|
+
## License
|
|
115
|
+
|
|
116
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@productbet/tracker-next",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Next.js App Router integration for ProductBet behavioral analytics SDK",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"dist"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@productbet/tracker-core": "0.1.
|
|
20
|
-
"@productbet/tracker-react": "0.1.
|
|
19
|
+
"@productbet/tracker-core": "0.1.2",
|
|
20
|
+
"@productbet/tracker-react": "0.1.2"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"next": ">=13.0.0",
|