page

Track page views with optional properties.

Client

Use the useAnalytics hook in client components:

import {  } from "@repo/analytics"

const {  } = ()

Usage

page(name?: string, properties?: Record<string, unknown>)

Parameter	Type	Description
`name`	`string`	Optional page name
`properties`	`Record<string, unknown>`	Optional page properties

Automatic tracking

AnalyticsProvider automatically tracks page views on Next.js route changes. Manual calls are typically not needed.

Examples

Manual page tracking

("Dashboard")

With properties

("Dashboard", {
  : "analytics",
  : .
})

Virtual page views

For single-page navigation that doesn't change the URL:

"use client"

import {  } from "react"
import {  } from "@repo/analytics"

function ({  }: { : string }) {
  const {  } = ()

  (() => {
    (`Settings - ${}`, {  })
  }, [, ])

  return <>...</>
}

Server

Page tracking is client-only. Server components and actions don't have access to navigation context.

For server-side page analytics, track as a custom event:

await ({
  : "PAGE_VIEWED",
  : .,
  : "/dashboard",
  : ..("referer")
})

When to call page manually

Tab changes within a page
Modal or drawer navigation
Multi-step wizards
Any navigation that doesn't change the URL

On this page