Payload

Copy your tracking snippet

In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:

<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

YOUR_SITE_ID is the numeric ID of your site.

Add the snippet to Payload

In projects made with npx create-payload-app, that file is src/app/(frontend)/layout.tsx. Render next/script there:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Client-side navigation between pages and posts is counted automatically.

If your frontend is a separate app (Nuxt, Astro, SvelteKit) that reads from Payload's REST or GraphQL API, follow that framework's guide instead: Nuxt, Astro, SvelteKit.

Check that it works

Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.

If nothing arrives:

• View the page source and search for script.js?siteId= to confirm the tag is present.
• In the browser's Network tab, check that script.js returns 200 and that requests go to /api/track.
• Turn off ad blockers, or proxy the script through your own domain.
• Read script troubleshooting for other causes.