How do you install a visitor ID tag in a JavaScript app?

Where the tag goes and which hook catches later pages

Hooks are the framework's own documented way to run code after each navigation. Your vendor's docs tell you which function to call inside it (often a page or track call); do not invent one.

How do you test whether later page views are recorded?

Use a production build, not the dev server: dev servers add hot-reload code and some frameworks render differently in development. Then run this five-minute test.

1. Open the site in a private window with the browser's developer tools on the Network panel, and filter by your vendor's domain.
2. Load the home page. You should see the tag's script load and at least one request that records the visit.
3. Click an internal link to your pricing page. Do not type the URL, because typing it forces a full page load and hides the problem.
4. Look for a new recording request that carries the pricing page URL. If none appears, the tag is only seeing landing pages. Add the hook from the table, rebuild and repeat.
5. Click the browser's back button and check once more: back and forward navigation goes through the same router.

What if the app sends a Content Security Policy?

A Content Security Policy (CSP) that does not name the vendor's hosts blocks the tag without any visible error on the page; the only trace is a violation message in the browser console. Two directives matter. script-src must allow the host the script loads from. connect-src must allow the host it sends data to, because it covers fetch(), XMLHttpRequest and navigator.sendBeacon(), which is how tags usually report. Ask the vendor for both host lists; they are often different.

Built-in support differs. Next.js generates a nonce in its proxy (formerly middleware) and applies it to <Script>, but nonce-based CSP needs dynamic rendering, so static optimization is off for those pages. SvelteKit has kit.csp in svelte.config.js and a %sveltekit.nonce% placeholder for scripts you add to app.html. Angular's ngCspNonce covers Angular's own inline styles, not third-party scripts. Astro's CSP support is still behind an experimental flag and does not support <ClientRouter /> view transitions. We found no built-in CSP feature in Nuxt's core docs or for a plain Vite app; there you set the header on your host or server.

How do you add the tag on Next.js App Router?

Where it goes: Import Script from next/script and render it in the root layout, app/layout.tsx. The default strategy is afterInteractive, which loads the script after some hydration; that is the right choice for a visitor identification tag.

What breaks it on Next.js App Router

• Next.js loads a <Script> only once, even when the visitor moves between pages. That is by design, and it is why the tag needs the navigation hook: a client component that runs an effect when usePathname() or useSearchParams() changes. Render it inside a <Suspense> boundary in the layout, as the Next.js docs show, because useSearchParams() opts out of prerendering up to the nearest boundary.
• The worker strategy (Partytown) does not work with the App Router. Do not use it for this tag.
• afterInteractive scripts are injected on the client, so they do not appear in view-source. Look in the Elements panel instead.

How to check it on Next.js App Router

Build and start the app (next build && next start), then run the navigation test above: load /, click through to pricing with a <Link>, and check that the vendor records the second page.

Sources: Next.js: Scripts (App Router) (read 2026-09-25); Next.js: Script component (read 2026-09-25); Next.js: useRouter, router events (read 2026-09-25); Next.js: Content Security Policy (read 2026-09-25).

How do you add the tag on Next.js Pages Router?

Where it goes: Render <Script> from next/script in pages/_app.js so it is on every page. Only a beforeInteractive script has to go in pages/_document.js, and a visitor ID tag does not need that strategy.

What breaks it on Next.js Pages Router

• As in the App Router, the script loads once across navigations. Record later pages from router.events on routeChangeComplete in _app.js, and remove the listener on unmount.
• The experimental worker strategy only works in the pages/ directory. Keep this tag on the main thread anyway, so it runs in the same page context as the router events.

How to check it on Next.js Pages Router

In a production build, click between two pages and confirm the vendor records each one. The script itself should not be requested again.

Sources: Next.js: Script component (Pages Router) (read 2026-09-25); Next.js: useRouter (Pages Router) (read 2026-09-25).

How do you add the tag on React with Vite?

Where it goes: Paste the tag into index.html at the project root. Vite treats that file as the app's entry point, and the tag ships in every build. Create React App was deprecated for new apps in February 2025; if you still run it, the file is public/index.html and the rest of this section applies.

What breaks it on React with Vite

• Vite has no router, so page changes depend on the router you added. With React Router, a click on a <Link> updates the URL with the History API and loads no new document. Record later pages from an effect that depends on useLocation().
• There is no framework CSP. If the app is served with a CSP header, set script-src and connect-src wherever the app is hosted.

How to check it on React with Vite

Run npm run build and serve the dist folder with npm run preview, then run the navigation test above.

Sources: Vite: Getting started (index.html as entry) (read 2026-09-25); React blog: Sunsetting Create React App (read 2026-09-25).

How do you add the tag on Vue?

Where it goes: Projects made with npm create vue@latest are Vite projects, so the tag goes in index.html at the project root.

What breaks it on Vue

• Vue Router changes pages without a reload. Its global after hook, router.afterEach(), runs after each navigation, and Vue Router's docs name analytics as a use for it. Call the vendor's page-view function there.
• If the site loads Vue itself from a CDN with no build step, there is no index.html pipeline to rely on: put the tag in each HTML page that loads Vue.

How to check it on Vue

Build and preview, click through with <router-link>, and confirm that one recording request is sent for each route change.

Sources: Vue: Quick start (read 2026-09-25); Vue Router: Navigation guards (global after hooks) (read 2026-09-25).

How do you add the tag on Angular?

Where it goes: Add the tag directly to src/index.html. The alternative, listing a local copy in the scripts array in angular.json, loads it "exactly as if you had added them in a <script> tag inside index.html", but it only takes files in your project, not a vendor URL.

What breaks it on Angular

• Angular Router links move between routes "without triggering a full page reload". Subscribe to router events, filter for NavigationEnd, and record the page there. Angular's routing guide uses page-view tracking as its own example of this pattern.
• Do not load the same library through both the scripts array and an import statement: Angular's workspace docs warn this leaves you with two copies.
• ngCspNonce and the CSP_NONCE token cover Angular's own inline styles. A CSP still has to list the vendor's hosts in script-src and connect-src.

How to check it on Angular

Run ng build, serve the output, and click between routes with routerLink while you watch the Network panel.

Sources: Angular: Workspace configuration (read 2026-09-25); Angular: Router lifecycle and events (read 2026-09-25); Angular: CSP_NONCE (read 2026-09-25).

How do you add the tag on SvelteKit?

Where it goes: Add the tag to src/app.html, the page template SvelteKit renders around every page. If you use kit.csp, give it nonce="%sveltekit.nonce%" so SvelteKit fills in the nonce.

What breaks it on SvelteKit

• SvelteKit navigates between pages without reloading. afterNavigate from $app/navigation runs "when the current component mounts, and also whenever we navigate to a URL". Put it in the root +layout.svelte to record every page.
• Put the tag in app.html, not in <svelte:head> in a layout. The SvelteKit issue tracker has several reports of <svelte:head> content being duplicated after client-side navigation.
• With kit.csp in auto mode, SvelteKit uses nonces for dynamically rendered pages and hashes for prerendered ones. List the vendor's hosts in script-src and connect-src either way. An inline vendor block on a prerendered page cannot use a nonce, so it needs a hash.

How to check it on SvelteKit

Run npm run build && npm run preview, then run the navigation test. Check the page source once to confirm the tag appears one time.

Sources: SvelteKit: Configuration (app.html, csp) (read 2026-09-25); SvelteKit: $app/navigation (read 2026-09-25).

How do you add the tag on Nuxt?

Where it goes: Add the tag to the app.head.script array in nuxt.config.ts. Nuxt renders it into the head of every page. The useScript() composable is an alternative, but it comes from the separate Nuxt Scripts module, whose current major version needs Nuxt 4.5.1 or newer and Node.js 24 or newer.

What breaks it on Nuxt

• Nuxt routes with Vue Router, so <NuxtLink> navigation loads no new document. Record later pages from useRouter().afterEach() in a client-only plugin.
• Nuxt's core docs do not describe a built-in CSP. If you need one, set the header on your server or host and include the vendor's hosts.

How to check it on Nuxt

Build and preview, confirm the tag appears once in the rendered <head>, then click between pages and check that each is recorded.

Sources: Nuxt: Configuration (app.head) (read 2026-09-25); Nuxt Scripts: Installation (read 2026-09-25).

How do you add the tag on React Router?

Where it goes: Remix v2 continues as React Router v7 in framework mode. Add the vendor's tag as an ordinary <script src=...> inside the Layout in app/root.tsx. You do not need dangerouslySetInnerHTML for a script with a src attribute. The <Scripts /> component in the same file renders your app's own runtime, and it takes a nonce prop if you use a CSP.

What breaks it on React Router

• Client-side transitions do not reload the document. Record later pages from an effect in the root component that depends on useLocation().

How to check it on React Router

Build and start the production server, then run the navigation test above.

Sources: Remix blog: Merging Remix and React Router (read 2026-09-25); React Router: root.tsx (read 2026-09-25).

How do you add the tag on Gatsby?

Where it goes: Use the <Script> component from gatsby in a component every page renders, such as your layout. Its default strategy is post-hydrate; idle is also safe for this tag.

What breaks it on Gatsby

• Gatsby has no beforeInteractive strategy. That name belongs to Next.js.
• Avoid off-main-thread for this tag. Gatsby's docs say those scripts load only on regular <a> navigation, "not on client-side rendering (CSR) navigation (e.g. Gatsby <Link> navigation)".
• With the default strategies the script loads once. Record later pages from onRouteUpdate in gatsby-browser.js, which Gatsby calls when the user changes routes, including on the first load. Do not also send a page view from the tag's own load, or the first page is counted twice.

How to check it on Gatsby

Run gatsby build && gatsby serve, then click between pages with <Link> and count the recording requests: one per page.

Sources: Gatsby: Gatsby Script API (read 2026-09-25); Gatsby: Browser APIs (onRouteUpdate) (read 2026-09-25).

How do you add the tag on Astro?

Where it goes: Add the tag to your base layout with <script is:inline src="...">. Without is:inline, Astro processes and bundles <script> tags, and it cannot bundle a remote vendor URL. With is:inline the tag is rendered exactly as written.

What breaks it on Astro

• By default every Astro page is a full browser navigation, so the tag runs on every page with no extra work.
• If you turned on view transitions with <ClientRouter />, pages swap without a reload. Either add data-astro-rerun to the tag so it runs again after each transition, or record later pages in a listener for the astro:page-load event, which fires after the first load and after every transition.
• Astro's CSP support is experimental, does not run in astro dev, and does not support <ClientRouter />.

How to check it on Astro

Run npm run build && npm run preview. If you use view transitions, run the navigation test; if not, check that each page you open records one visit.

Sources: Astro: Scripts and event handling (read 2026-09-25); Astro: View transitions (read 2026-09-25); Astro: Experimental CSP (read 2026-09-25).

Where to go next

• Post-launch QA test script: the full test once page views are recorded, including CRM and alert checks
• Client-side vs server-side visitor identification: when a browser tag is the wrong design for a single-page app
• Install through Google Tag Manager: if the app already loads a GTM container, use its History Change trigger instead of code