DataSag guides · Updated 27 October 2026

Configure CSP for DataSag analytics on Next.js App Router

A restrictive Content Security Policy must permit the tracker script and its delivery endpoint. Merge DataSag's exact origin into the relevant directives while preserving the rest of your policy. This guide applies to Next.js App Router.

Start with the Next.js App Router installation

Import Script from next/script in your root layout. Render the DataSag Script once inside body so it persists across child routes. Keep the existing html, body, providers and children in place. Use strategy="afterInteractive" and replace YOUR_PUBLIC_KEY with the public key copied from your DataSag project.

A Script in a page component or nested layout may disappear or be reintroduced as the route tree changes. Put the single shared installation in the root layout. Browser-only event calls belong in client components, never in a Server Component render.

Use the public project key from the DataSag project you are inspecting. A test on a preview domain does not confirm that the production domain has the same code or settings.

Configure CSP for DataSag analytics in Next.js App Router

  1. Find the policy owner before editing app/layout.tsx. Your deployment may set CSP in middleware, next.config headers, or an upstream service. Inspect the actual production response and the browser directive violation.
  2. For a nonce-based installation, pass the request-specific nonce to the next/script element through the established server layout path. Preserve the existing Next.js policy machinery rather than adding a static nonce or a second permissive header.
  3. Allow the required DataSag delivery origin in the applicable connection directive, then test a direct route and a client Link transition. Verify both framework scripts and tracking still execute under the same enforced policy.

The root Script and its requests comply with the production policy without breaking Next.js hydration or weakening unrelated directives.

Complete the collection checks

  1. Read the existing response Content-Security-Policy headers and the browser violation message. Identify the directive actually blocking the resource. Multiple policies apply together, so adding a looser second header may not solve the block.
  2. Allow https://www.datasag.com in script-src or the applicable script-src-elem directive. Keep your existing nonce, hash and strict-dynamic rules; nonce-based policies may require your site's nonce on the script tag.
  3. Permit https://www.datasag.com in connect-src for sendBeacon and fetch requests to /api/track. The script derives the endpoint from its own source origin.
  4. If you want the tracker's image fallback to be available, allow the same origin in img-src. A successful normal beacon does not require the image fallback to run.
  5. Test a real pageview and custom event with the policy active. If your deployment supports it, use a report-only policy to evaluate a change before enforcing it.
  6. Keep inline handlers and unsafe-inline out of the solution. DataSag's external script does not require you to disable CSP or broadly allow every third-party origin.
/* Merge into existing directives; this is NOT a complete policy. */
script-src: add https://www.datasag.com
connect-src: add https://www.datasag.com
img-src: add https://www.datasag.com if enabling image fallback

What a successful check looks like

The exact tracker origin is permitted under the site's actual policy, tracking requests succeed and the Console no longer reports the corresponding violation.

Record the public path you tested, the browser state, the approximate time and the observed request. Check one direct page load and one later navigation so the result covers more than the homepage.

Common mistake

Do not paste the illustrative lines as a response header. Your host, framework or security middleware owns the complete policy, including syntax and nonces.

Installation snippet for Next.js App Router

The shared installation belongs in app/layout.tsx, inside the root body. Use this as the installation reference while checking the procedure above.

import Script from "next/script";

// Inside the existing root layout body, alongside {children}:
<Script
  id="datasag"
  src="https://www.datasag.com/tracker.js"
  data-datasag-key="YOUR_PUBLIC_KEY"
  strategy="afterInteractive"
/>

Related Next.js App Router guides

Full Next.js App Router setup guide · Search and AI visibility

References

Official Next.js App Router documentation covers the integration point. For policy directives, see the CSP documentation. Use support if a request fails after these checks.