React

AnalytikProvider, useAnalytik, useTrackPageviews and TrackClick, with React Router, TanStack Router and Next.js.

analytik/react wraps the ESM client for React 19. It is safe to render on the server: without window the client does nothing.

Provider

Give the provider your site and the API URL, or pass a client you created yourself.

import { AnalytikProvider } from 'analytik/react'
import { createRoot } from 'react-dom/client'

import { App } from './App'

createRoot(document.getElementById('root')!).render(
  <AnalytikProvider site="SITE_ID" api="https://analytics.example.com/api" mode="strict">
    <App />
  </AnalytikProvider>,
)

import { createClient } from 'analytik/client'
import { AnalytikProvider } from 'analytik/react'

const client = createClient({ site: 'SITE_ID', api: 'https://analytics.example.com/api' })

export const Root = ({ children }: { children: React.ReactNode }) => (
  <AnalytikProvider client={client}>{children}</AnalytikProvider>
)

If you already load analytik.js with a script tag, do not also mount a provider: you would count every pageview twice.

useAnalytik

useAnalytik() returns the client, with track, revenue, identify, pageview, attribution, consent, withdrawConsent, optOut and optIn.

import { useAnalytik } from 'analytik/react'

export function UpgradeButton({ plan }: { plan: string }) {
  const analytik = useAnalytik()

  async function upgrade() {
    analytik.track('upgrade_clicked', { plan })
    const ids = await analytik.attribution()
    const res = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ plan, ...ids }),
    })
    window.location.href = (await res.json()).url
  }

  return <button onClick={upgrade}>Upgrade</button>
}

useTrackPageviews

Call useTrackPageviews() once near the root. It listens to the History API and sends a pageview when the path changes, so it works with any router that uses it.

import { useTrackPageviews } from 'analytik/react'
import { Outlet } from 'react-router'

export function Layout() {
  useTrackPageviews()
  return <Outlet />
}

If your router exposes its location as state and you prefer to drive pageviews from it, pass that location in. With TanStack Router:

import { useRouterState } from '@tanstack/react-router'
import { useTrackPageviews } from 'analytik/react'

export function Pageviews() {
  const location = useRouterState({ select: (s) => s.location })
  useTrackPageviews(location)
  return null
}

TrackClick

<TrackClick> sends a goal when its content is clicked.

import { TrackClick } from 'analytik/react'

export const Cta = () => (
  <TrackClick event="signup" props={{ plan: 'pro', location: 'hero' }}>
    <a href="/signup">Start free</a>
  </TrackClick>
)

Next.js

Mount the provider in a client component and render it from the root layout.

'use client'

import { AnalytikProvider, useTrackPageviews } from 'analytik/react'

function Pageviews() {
  useTrackPageviews()
  return null
}

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AnalytikProvider site={process.env.NEXT_PUBLIC_ANALYTIK_SITE!} api={process.env.NEXT_PUBLIC_ANALYTIK_API!}>
      <Pageviews />
      {children}
    </AnalytikProvider>
  )
}