🟣 Phase 3 — Optional · Only needed if your site is a SPA. Otherwise GTM handles it automatically.

page_view (SPA only)

When to push

• Multi-page site (full reload): nothing to do. GTM derives page_view from the gtm.js event.
• SPA (React/Vue/Next.js client-side routing): push on every client-side navigation.

SPA pattern

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'page_view',
  page: {
    path: window.location.pathname + window.location.search,
    title: document.title,
    location: window.location.href
  }
});

React Router

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function usePageViewTracking() {
  const location = useLocation();
  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'page_view',
      page: {
        path: location.pathname + location.search,
        title: document.title,
        location: window.location.href
      }
    });
  }, [location.pathname, location.search]);
}

Next.js App Router

'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export function PageViewTracker() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'page_view',
      page: {
        path: pathname + (searchParams.toString() ? '?' + searchParams.toString() : ''),
        title: document.title,
        location: window.location.href
      }
    });
  }, [pathname, searchParams]);

  return null;
}

Parameters

Parameter	Required
event	required — 'page_view'
page.path	recommended
page.title	recommended
page.location	optional

Platforms

Platform	Native event
GA4	page_view
Meta	PageView
Google Ads	included in remarketing tag

Pitfalls

• ❌ Pushing page_view on the initial SPA load → gtm.js already covers it.
• ❌ Multiple pushes from a re-running effect — fix the deps.