> ## Documentation Index
> Fetch the complete documentation index at: https://bhavishaya.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tracking Page Views

> Learn how to track every page your users visit — and how to do it automatically so you never miss a single visit.

## Why track page views?

A `page_view` event tells you:

* Which pages in your app are visited most
* Where users first land when they open your app
* Which pages users visit before signing up or purchasing
* Which pages have high drop-off (users leave from there)

This is the most fundamental event in any analytics setup. You should have it on every page.

***

## How page views work in single-page apps

In a traditional website, each page is a separate HTML file — every new page load is automatic. In a React or Next.js app, the URL changes without a full page reload. This means we need to **manually tell Analytiq when the user navigates to a new page**.

There are two approaches:

1. **Per-component tracking** — add `track('page_view')` inside each page component individually
2. **Auto-tracking** — add one listener at the root level that fires on every navigation

***

## Approach 1 — Per-component tracking (simpler)

Add a `track()` call inside each page component. If the page function already exists, just add the 2 lines inside it.

<Tabs>
  <Tab title="React (JavaScript)">
    ```jsx src/pages/Home.jsx theme={null}
    // src/pages/Home.jsx — your existing file, add highlighted lines
    import { useEffect } from 'react'
    import { track } from 'analytiq'       // ADD import

    export function Home() {
      useEffect(() => {
        track('page_view', { page: 'Home', path: '/home' })  // ADD inside useEffect
      }, [])
      // [] = runs once when this page first loads

      return <h1>Home</h1>
    }
    ```

    ```jsx src/pages/Dashboard.jsx theme={null}
    // src/pages/Dashboard.jsx — same pattern, different page name
    import { useEffect } from 'react'
    import { track } from 'analytiq'

    export function Dashboard() {
      useEffect(() => {
        track('page_view', { page: 'Dashboard', path: '/dashboard' })
      }, [])

      return <h1>Dashboard</h1>
    }
    ```
  </Tab>

  <Tab title="React (TypeScript)">
    ```tsx src/pages/Home.tsx theme={null}
    // src/pages/Home.tsx
    import { useEffect } from 'react'
    import { track } from 'analytiq'

    export function Home(): JSX.Element {
      useEffect(() => {
        track('page_view', { page: 'Home', path: '/home' })
      }, [])

      return <h1>Home</h1>
    }
    ```
  </Tab>

  <Tab title="Next.js App Router">
    ```tsx app/page.tsx theme={null}
    'use client'

    import { useEffect } from 'react'
    import { track } from 'analytiq'

    export default function HomePage(): JSX.Element {
      useEffect(() => {
        track('page_view', { page: 'Home', path: window.location.pathname })
      }, [])

      return <main><h1>Home</h1></main>
    }
    ```
  </Tab>

  <Tab title="Vue 3">
    ```vue src/components/Home.vue theme={null}
    <script setup>
    import { onMounted } from 'vue'
    import { track } from 'analytiq'

    onMounted(() => {
      track('page_view', { page: 'Home' })
    })
    </script>

    <template>
      <h1>Home</h1>
    </template>
    ```
  </Tab>

  <Tab title="Vanilla HTML">
    ```html index.html theme={null}
    <!-- Paste in every .html page -->
    <script type="module">
      import { init, track } from 'https://cdn.jsdelivr.net/npm/analytiq/dist/index.js'

      init('pk_live_YOUR_KEY_HERE')

      track('page_view', {
        page: document.title,
        path: window.location.pathname
      })
    </script>
    ```
  </Tab>
</Tabs>

***

## Approach 2 — Global Router Tracking (Optional)

If you don't want to copy-paste `useEffect` into every single page component, you can listen to your router globally.

<Tabs>
  <Tab title="React (React Router)">
    Add a listener inside your `App.jsx` that watches the `location` object:

    ```jsx src/App.jsx theme={null}
    import { useEffect } from 'react'
    import { useLocation } from 'react-router-dom'
    import { track } from './analytics.jsx'

    function App() {
      const location = useLocation()

      useEffect(() => {
        // This fires automatically every time the route changes!
        track('page_view', { path: location.pathname })
      }, [location])

      return <Routes>...</Routes>
    }
    ```
  </Tab>

  <Tab title="Next.js (App Router)">
    Create a `NavigationTracker` component and put it in your root `layout.tsx`:

    ```tsx components/NavigationTracker.tsx theme={null}
    'use client'
    import { useEffect } from 'react'
    import { usePathname, useSearchParams } from 'next/navigation'
    import { track } from './analytics'

    export function NavigationTracker() {
      const pathname = usePathname()
      const searchParams = useSearchParams()

      useEffect(() => {
        track('page_view', { 
          path: pathname,
          search: searchParams.toString() 
        })
      }, [pathname, searchParams])

      return null
    }
    ```
  </Tab>
</Tabs>

***

## Recommended properties for page\_view events

| Property   | Type   | Description                     | Example                      |
| ---------- | ------ | ------------------------------- | ---------------------------- |
| `page`     | string | Human-readable name of the page | `'Dashboard'`, `'Pricing'`   |
| `path`     | string | URL path                        | `'/dashboard'`, `'/pricing'` |
| `referrer` | string | Where they came from            | `'google'`, `'/home'`        |
| `search`   | string | URL query string if any         | `'?plan=pro'`                |

```js utils/analytics.js theme={null}
track('page_view', {
  page: 'Dashboard',
  path: window.location.pathname,
  referrer: document.referrer || 'direct'
})
```

***

## What if a user visits the same page twice?

The SDK has built-in deduplication — if `track()` is called with the exact same event within 300ms, the duplicate is silently ignored. However, if a user navigates away and comes back, that's a new visit and gets tracked normally.

***

## Verifying it works

1. Open your app in the browser
2. Press **F12**, then Console
3. Navigate between pages
4. Watch the Console for:
   ```
   [analytiq] Event sent: page_view
   ```
5. Check your Analytiq dashboard — each page navigation appears as a separate event