Google Analytics 4

Track page views and custom events in your documentation using Google Analytics 4.

Boltdocs integrates with Google Analytics 4 (GA4) to give you insight into how users navigate your documentation.

Event	Description
`page_view`	Fires on every page navigation (including client-side navigation)
`first_visit`	New user session
`session_start`	New session

You can track custom events using the useTrackEvent() hook:

tsx

import { useTrackEvent } from 'boltdocs'

export function MyComponent() {
  const trackEvent = useTrackEvent()

  const handleClick = () => {
    trackEvent('button_click', {
      button_id: 'downloadPdf',
      button_location: 'sidebar',
    })
  }

  return <button onClick={handleClick}>Download PDF</button>
}

Property	Type	Required	Description
`measurementId`	`string`	✓	Your GA4 Measurement ID (e.g. `'G-XXXXXXXXXX'`)
`debug`	`boolean`	—	Enables GA4 debug mode (logs to console)
`anonymizeIp`	`boolean`	—	Anonymizes user IP addresses (defaults to `true`)
`sendPageView`	`boolean`	—	Enables automatic initial page view tracking (defaults to `true`)
`cookieFlags`	`string`	—	Custom cookie flags (e.g. `'SameSite=None;Secure'`)
`autoTrack`	`AutoTrackConfig`	—	Custom settings for automatic tracking (see below)

Sub-Property	Type	Default	Description
`pageViews`	`boolean`	`true`	Automatically tracks page views on client-side route changes
`downloads`	`boolean`	`false`	Tracks file download links
`externalLinks`	`boolean`	`false`	Tracks clicks on outbound external links
`search`	`boolean`	`true`	Tracks searches performed on the site

integrations: {
  ga4: {
    measurementId: 'G-XXXXXXXXXX',
    debug: false,
    anonymizeIp: true,
    sendPageView: true,
    cookieFlags: 'SameSite=None;Secure',
    autoTrack: {
      pageViews: true,
      downloads: true,
      externalLinks: true,
      search: true,
    },
  },
}

Access the full analytics API:

tsx

import { useAnalytics } from 'boltdocs'

function MyComponent() {
  const { trackEvent, trackPageView, setUserProperties } = useAnalytics()

  // Track a custom event
  trackEvent('search', { query: 'installation' })

  // Track a page view manually
  trackPageView('/docs/guides/getting-started/installation', 'Installation')

  // Set user properties
  setUserProperties({ plan: 'enterprise' })
}

Simplified page view tracking:

tsx

import { useTrackPageView } from 'boltdocs'

function DocPage({ title, path }) {
  const trackPageView = useTrackPageView()

  // Automatic tracking on mount
  useEffect(() => {
    trackPageView(path, title)
  }, [path, title])
}

Track arbitrary events:

tsx

import { useTrackEvent } from 'boltdocs'

function SearchBox() {
  const trackEvent = useTrackEvent()

  return (
    <input
      onChange={(e) => {
        trackEvent('search_input', { query: e.target.value })
      }}
    />
  )
}

Boltdocs does not implement cookie consent. For GDPR compliance, consider:

Adding a cookie consent banner in your custom layout
Only calling GA4 functions after consent is granted
Configuring GA4 to respect Do Not Track

Verify the Measurement ID is correct
Check the browser console for errors
Use GA4 DebugView to see real-time events

Page views are tracked automatically on navigation. Don't call trackPageView manually unless necessary.

Make sure integrations.ga4.measurementId is a string starting with G-.

Jesús Alcalá

Last updated on October 18, 2026

Google Analytics 4

What Gets Tracked

Automatic Events

Custom Events

Configuration Reference

Automatic Tracking Options (`autoTrack`)

Advanced Example

Using the Hooks

`useAnalytics()`

`useTrackPageView()`

`useTrackEvent()`

Respecting User Privacy

Troubleshooting

Events don't appear

Duplicate page views

Build errors

Was this page helpful?