Frameworks

pagent works with JavaScript frameworks. The snippet is the same everywhere; only where you put it and one setting differ. Start with the table, then open your framework’s guide.

​

Recommended settings

​

Rules for every framework

• Use a plain <script> tag. Don’t add async, defer or type="module", and don’t load it through a framework’s script component unless the guide says so. pagent has to run before the page shows so visitors never see the original flash.
• Write ="true". A bare attribute such as data-await-hydration without a value counts as off.
• Page changes are tracked for you. pagent follows client-side navigation through the History API (pushState, replaceState, back and forward). It records a new page view and applies the right tests on each route. You don’t need to call anything.
• Hash routing is the exception. With routes like /#/pricing, tell pagent about each route change:
  window._pgnt = window._pgnt || [];
  window._pgnt.push({ kind: "navigate" });
  
  Send it on route changes only, not on the first page load: pagent already counts that one.
• Don’t define window.pagent yourself. If it exists before the snippet runs, pagent doesn’t start. Use the window._pgnt queue to send events before the SDK has loaded.

​

What data-await-hydration does

Server-rendered frameworks send finished HTML, then “hydrate” it with JavaScript. Hydration can overwrite a change pagent made a moment earlier. With data-await-hydration="true", pagent waits until hydration has finished, then applies the variant. The page stays hidden while it waits: up to 0.75 seconds by default, longer on slow connections. pagent recognizes hydration for Next.js (both routers), Remix and React Router, Gatsby, Nuxt 3 and later, Astro islands, and React apps on #root. For SvelteKit, Angular and client-rendered Vue, it can’t tell when hydration is done, so the setting doesn’t help there. If hydration takes longer than the wait, pagent shows the original page for that page view and only measures it, without a variant. Three settings change this: Try any of them on a preview link first by adding ?pagent_hydration_timeout=800 or ?pagent_hydration_timeout_mode=apply to the URL. The developer guide explains every option in detail.

​

Content Security Policy

If your site sends a Content Security Policy, allow pagent: Tests that change JavaScript also need 'unsafe-eval' in script-src. Without it, those JavaScript changes don’t apply; everything else still runs. See security headers.