@productbet/tracker-react

React integration for ProductBet behavioral analytics. Provides a context provider and hooks for session recording, event tracking, and user identification.

For Next.js App Router projects, use @productbet/tracker-next instead, which adds automatic route tracking.

Install

npm install @productbet/tracker-react

Quick start

Wrap your app with ProductBetProvider:

import { ProductBetProvider } from "@productbet/tracker-react"

function App() {
  return (
    <ProductBetProvider apiKey="pb_live_xxxx">
      <YourApp />
    </ProductBetProvider>
  )
}

That's it. The SDK will automatically track clicks, form interactions, scroll depth, navigation, console errors, and network failures.

Hooks

useIdentify

Identify the current user. Call this once the user is authenticated.

import { useIdentify } from "@productbet/tracker-react"

function Dashboard({ user }) {
  useIdentify(user.id, { plan: user.plan, company: user.company })

  return <div>...</div>
}

useTrackEvent

Track custom events.

import { useTrackEvent } from "@productbet/tracker-react"

function ExportButton() {
  const track = useTrackEvent()

  return (
    <button onClick={() => track("export_clicked", { format: "csv" })}>
      Export
    </button>
  )
}

usePageView

Manually track page views (useful for SPAs without Next.js).

import { usePageView } from "@productbet/tracker-react"
import { useLocation } from "react-router-dom"

function PageTracker() {
  const location = useLocation()
  usePageView(location.pathname)

  return null
}

useTracker

Access the underlying tracker instance for advanced use cases.

import { useTracker } from "@productbet/tracker-react"

function Component() {
  const tracker = useTracker()

  // tracker.getSessionId()
  // tracker.track(...)
  // tracker.identify(...)
}

Configuration

Pass any option as a prop to ProductBetProvider:

<ProductBetProvider
  apiKey="pb_live_xxxx"
  enableSessionRecording={true}
  enableAutoTracking={true}
  enableConsoleTracking={true}
  enableNetworkTracking={true}
  debug={false}
  redaction={{ mode: "privacy-first", unredactFields: ["search"] }}
>
  <App />
</ProductBetProvider>

See @productbet/tracker-core for the full list of options.

License

MIT