React

Use the script tag for the default install, or the optional React package wrapper when you want typed helpers.

Install

The recommended React install is still the standard HTML script tag in your app shell. Use this package wrapper if your codebase prefers an Analytics component and imported track() helper.

1. 1

   Add the package

   bash

   npm install produl-tracker

2. 2

   Add Analytics to your app root

   Import Analytics from produl-tracker/react and render it once near the top of your component tree — typically in your root App component.

Usage

import { Analytics } from 'produl-tracker/react'

export default function App() {
  return (
    <>
      <Analytics siteId="YOUR_SITE_API_KEY" />
      {/* rest of your app */}
    </>
  )
}

To send custom events, import track and call it anywhere in your component tree:

import { track } from 'produl-tracker/react'

function SignupButton() {
  return (
    <button onClick={() => track('signup', { plan: 'pro' })}>
      Get started
    </button>
  )
}

SPA routing

The React adapter intercepts history.pushState and listens for popstate so client-side navigations are tracked automatically. This works with React Router, TanStack Router, and any other router that wraps the History API. The runtime records the initial pageview and subsequent path changes.

Configuration