Remix

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

Install

The recommended Remix install is the standard HTML script tag in root.tsx. Use the package wrapper below if you prefer an Analytics component and imported helpers.

1
Add the package
bash
npm install produl-tracker
2
Add Analytics to root.tsx
The Remix adapter re-exports the React adapter. Import Analytics from produl-tracker/remix and place it inside the <body> just before <Scripts /> in your root.tsx.

Usage

app/root.tsxtsx

import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
import { Analytics } from 'produl-tracker/remix'

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Analytics siteId="YOUR_SITE_API_KEY" />
        <Scripts />
      </body>
    </html>
  )
}

Because root.tsx wraps every route, analytics are initialized once and route changes are tracked automatically for the lifetime of the app.

Custom events

Import track from produl-tracker/remix and call it in any route action, loader response handler, or component: track('purchase', { amount: 49 }).

Configuration

Prop	Type	Default	Description
`siteId`	`string`	—	Required. Your public site API key from the dashboard.
`serverUrl`	`string`	hosted instance	Override the tracker server URL.
`endpoint`	`string`	script origin	Advanced override for the Produl server base URL used by `/r`, `/b`, and `/f`.
`debug`	`boolean`	`false`	Show a debug overlay listing every tracked event.

Vue

HTML / CDN

Remix

Install

Add the package

Add Analytics to root.tsx

Usage

Configuration