Install pb.js

One script tag, anywhere in your <head>. Below: where to put it for the most common stacks.

The snippet

Every pixel has a unique ID. Find yours at the top of the pixel detail page in your dashboard.

html

<script src="https://api.adsping.io/pb.js?id=YOUR_PIXEL_ID"></script>

That's it. The script is ~30KB, async by default, and never blocks page render. It runs once on every page load and listens for events the rest of the session.

One pixel per domain. If you operate multiple domains (e.g. brand-a.com + brand-b.com), create a separate pixel for each one. They bill independently.

Shopify

Shopify admin → Online Store → Themes → Edit code on your active theme.
Open layout/theme.liquid.
Paste the snippet just before </head>.
Save.

Shopify checkout pages run on checkout.shopify.com — not your domain. To track Purchase events server-side, install the Shopify integration from the AdsPing dashboard. It connects via OAuth and forwards orders + refunds directly without needing a checkout-side script.

WordPress

Two options:

Option A: a header plugin

Install "Insert Headers and Footers" (or any equivalent), and paste the AdsPing snippet into the header section. Works on any theme without code changes.

Option B: edit theme functions.php

php

add_action('wp_head', function () {
    echo '<script src="https://api.adsping.io/pb.js?id=YOUR_PIXEL_ID"></script>';
});

Next.js

Use the built-in next/script component in your root layout. Strategy afterInteractive is the right default — ships after 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?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?id=YOUR_PIXEL_ID"></script>
</head>

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

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

Google Tag Manager

GTM → Tags → New → Custom HTML.
Paste the AdsPing script tag.
Trigger: All Pages.
Save → Submit → Publish.

Verifying the install

Open your site, then DevTools → Network → filter adsping.
You should see pb.js load (200) and a request to /api/v1/t/PIXEL_ID with the PageView payload (200).
In your AdsPing dashboard the pixel detail page shows Last event: a few seconds ago.
Console: window.pbq and window.PB_PIXEL_ID should both be defined.

Once pb.js is firing, head to Connect Meta to start forwarding events. Until you wire a destination, events are captured and counted but not sent anywhere.

PreviousHow it works NextdataLayer integration