Alle Integrationen

Next.js

Laden Sie das Tag einmal im Root-Layout mit next/script.

Schritte

  1. Öffnen Sie app/layout.tsx. Im Pages Router öffnen Sie pages/_app.tsx.
  2. Importieren Sie Script aus next/script.
  3. Fügen Sie die folgende Script-Komponente mit strategy="afterInteractive" hinzu. Ersetzen Sie SITE_ID durch Ihre Site-ID.
  4. Deployen Sie.

Das Snippet

Ersetzen Sie SITE_ID durch die ID aus Ihren Glyphex-Website-Einstellungen.

// 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>
  );
}

Clientseitige Routenwechsel werden automatisch erfasst. Sie brauchen keinen Route-Listener.

Funktion prüfen

Öffnen Sie Ihre Live-Website in einem neuen Tab und dann Echtzeit in Ihrem Glyphex-Dashboard. Ihr Besuch sollte nach wenigen Sekunden erscheinen.

Eigene Events erfassen

Rufen Sie window.analytics.track in einer Client-Komponente auf. Ergänzen Sie eine Typdeklaration, falls TypeScript bei window.analytics meckert:

"use client";

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

Events lassen sich auch mit window.analytics.track(name, props) oder den deklarativen Attributen data-glyphex-event und data-glyphex-event-<prop> senden.

Fehlerbehebung

  • Keine Daten? Prüfen Sie, ob die Site-ID exakt stimmt und die Seite neu veröffentlicht bzw. der Cache geleert wurde.
  • Werbeblocker können Analytics-Scripts blockieren. Deaktivieren Sie Ihren zum Testen.
  • Content Security Policy: Erlauben Sie https://glyphex.io in script-src und connect-src.
  • Prüfen Sie in DevTools > Network auf eine Anfrage an glyphex.io/t/. Ein 404 bedeutet, dass die Site-ID falsch ist.