Remix

Add Produl to a Remix app. One component in root.tsx covers every route.

Install

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_ID" />
        <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 site ID from the dashboard.
`serverUrl`	`string`	hosted instance	Override the tracker server URL.
`disableAutoTrack`	`boolean`	`false`	Disable automatic pageview tracking on route changes.
`endpoint`	`string`	`/api/collect`	Base URL that pageview and event data is sent to.
`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