@productbet/tracker-next
v0.1.8
Published
Next.js App Router integration for ProductBet behavioral analytics SDK
Maintainers
productbet-devReadme
@productbet/tracker-next
Next.js App Router integration for ProductBet behavioral analytics. Drop-in session recording, event tracking, and user identification with automatic route change tracking.
Install
npm install @productbet/tracker-nextQuick start
Add ProductBetScript to your root layout:
// app/layout.tsx
import { ProductBetScript } from "@productbet/tracker-next"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<ProductBetScript apiKey="pb_live_xxxx">
{children}
</ProductBetScript>
</body>
</html>
)
}That's it. The SDK will automatically track page views on route changes, clicks, form interactions, scroll depth, console errors, and network failures.
Components
ProductBetScript
The simplest way to add ProductBet to a Next.js app. Wraps your app with the provider and enables route tracking.
<ProductBetScript apiKey="pb_live_xxxx" enableSessionRecording={true}>
{children}
</ProductBetScript>ProductBetProvider
If you need more control, use the provider directly. It extends the React provider with automatic usePathname() route tracking.
import { ProductBetProvider } from "@productbet/tracker-next"
<ProductBetProvider
apiKey="pb_live_xxxx"
trackRouteChanges={true}
enableSessionRecording={true}
>
{children}
</ProductBetProvider>Set trackRouteChanges={false} to disable automatic page view tracking on route changes.
Hooks
All hooks from @productbet/tracker-react are re-exported:
import { useIdentify, useTrackEvent, useTracker } from "@productbet/tracker-next"useIdentify
Identify the current user once authenticated.
function Dashboard({ user }) {
useIdentify(user.id, { plan: user.plan })
return <div>...</div>
}useTrackEvent
Track custom events.
function UpgradeButton() {
const track = useTrackEvent()
return <button onClick={() => track("upgrade_clicked", { from: "free" })}>Upgrade</button>
}Configuration
All props from @productbet/tracker-core are supported:
<ProductBetScript
apiKey="pb_live_xxxx"
enableSessionRecording={true}
enableAutoTracking={true}
enableConsoleTracking={true}
enableNetworkTracking={true}
redaction={{ mode: "privacy-first", unredactFields: ["search"] }}
debug={false}
>
{children}
</ProductBetScript>See @productbet/tracker-core for the full list of options.
License
MIT