All integrations

Next.js

Load the tag once in your root layout with next/script.

Steps

1. Open app/layout.tsx. On the Pages Router, open pages/_app.tsx.
2. Import Script from next/script.
3. Add the Script component below, with strategy="afterInteractive". Replace SITE_ID with your Site ID.
4. Deploy.

The snippet

Replace SITE_ID with the ID from your Glyphex site settings.

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://glyphex.io/t/SITE_ID.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Client-side route changes are tracked automatically. You do not need a route listener.

Verify it works

Open your live site in a new tab, then open Realtime in your Glyphex dashboard. Your visit should show up within a few seconds.

Track custom events

Call window.analytics.track from a client component. Add a type declaration if TypeScript complains about window.analytics:

"use client";

export function SignupButton() {
  return (
    <button
      onClick={() =>
        window.analytics?.track("signup_click", { plan: "pro" })
      }
    >
      Sign up
    </button>
  );
}

Events can also be sent with window.analytics.track(name, props) or the declarative data-glyphex-event and data-glyphex-event-<prop> attributes.

Troubleshooting

• No data? Check that the Site ID matches exactly and the page was republished or the cache cleared.
• Ad blockers can block analytics scripts. Disable yours to test.
• Content Security Policy: allow https://glyphex.io in both script-src and connect-src.
• Check DevTools > Network for a request to glyphex.io/t/. A 404 means the Site ID is wrong.