React / Next.js

A Script component in your root layout — one place, whole app covered.

Next.js

Use the built-in next/script component in your root layout. Strategy afterInteractive is the right default — ships after the page is interactive but before user idle.

tsx

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://api.adsping.io/pb.js" data-pixel-id="YOUR_PIXEL_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

React (CRA / Vite)

For SPAs that own their index.html, paste the snippet directly:

html

<!-- public/index.html -->
<head>
  ...
  <script src="https://api.adsping.io/pb.js" data-pixel-id="YOUR_PIXEL_ID"></script>
</head>

SPA route changes

Client-side route changes do not trigger a fresh PageView — pb.js fires it once on initial load. To track SPA navigation, call adsping from your router:

router.events.on("routeChangeComplete", () => {
  window.adsping?.("track", "PageView");
});

Conversion events work the same way anywhere in your components — e.g. window.adsping('track', 'Lead', { email }) in a form's onSubmit. See Track Lead for ready-made components.

Verify

Open your app, then DevTools → Network → filter adsping — pb.js and the PageView request both return 200.
Console: window.adsping should be defined.
The pixel detail page in AdsPing shows Last event: a few seconds ago.

Once pb.js is firing, head to Connect Meta to start forwarding events.

PreviousWordPress (no store)NextGoogle Tag Manager