WebmasterID on Next.js

WebmasterID installs on Next.js with the built-in next/script component — no special SDK required. This guide covers App Router and Pages Router placement and a consent-safe setup.

Recommended: next/script

Add the tracker once in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router) so it loads once per route.

import Script from "next/script";

<Script
  id="webmasterid-tracker"
  src="https://webmasterid.com/tracker.iife.min.js"
  strategy="afterInteractive"
  data-wmid="wm_xxxxxxxxxxxxxxxx"
  data-endpoint="https://webmasterid-ingest-api.vercel.app/api/events"
/>

Consent-safe placement

For GDPR/ePrivacy, load the tracker only after analytics consent. The pattern below is the same consent-gated approach documented in Privacy & GDPR — inject it from your consent manager when the analytics category is granted, not unconditionally.

Render the <Script> only after analytics consent — for example from a consent-provider effect — rather than unconditionally in the layout.

Common mistakes

• Placing the Script inside a component that renders on every navigation (causes duplicates) — keep it in the layout/_app once.
• Loading before consent in EU/EEA — gate it.
• Missing connect-src for the ingest endpoint in a strict CSP.

See the canonical WebmasterID Next.js doc for the optional component package (only if available in your project).

FAQ