usePageView

usePageView is a convenience hook built on top of usePixel that automates PageView event tracking. It can fire on component mount, on route changes, or both.

import { usePageView } from 'react-facebook';

Options

Option	Type	Default	Description
trackOnMount	boolean	true	Fire a PageView event when the component mounts
trackOnRouteChange	boolean	false	Fire a PageView event when window.location.href changes

Return Value

Property	Type	Description
pageView	() => Promise<void>	Manually fire a PageView event
loading	boolean	true while the pixel script is loading

Basic Usage

The simplest usage fires a single PageView event when the component mounts.

import { usePageView } from 'react-facebook';

function ProductPage() {
  usePageView();

  return <div>Product details...</div>;
}

This is equivalent to:

const { pageView } = usePixel();

useEffect(() => {
  pageView();
}, []);

Disable Auto-Tracking on Mount

If you only want to track page views on route changes (not on initial mount), set trackOnMount to false.

function App() {
  usePageView({ trackOnMount: false, trackOnRouteChange: true });

  return <Router />;
}

Track Route Changes

Enable trackOnRouteChange to fire a PageView event every time the URL changes. This is useful for single-page applications where full page loads do not occur.

function App() {
  usePageView({ trackOnRouteChange: true });

  return <Router />;
}

Manual Page View

The returned pageView function lets you fire a PageView event manually at any time.

function Wizard() {
  const { pageView } = usePageView({ trackOnMount: false });

  const handleStepChange = (step: number) => {
    // Track each wizard step as a page view
    pageView();
  };

  return <StepWizard onStepChange={handleStepChange} />;
}

Next.js App Router Example

In a Next.js App Router project, place usePageView in a client layout component to track page views across all routes.

'use client';

import { usePageView } from 'react-facebook';

export default function TrackingLayout({ children }: { children: React.ReactNode }) {
  usePageView({ trackOnRouteChange: true });

  return <>{children}</>;
}