Next.js
Laden Sie das Tag einmal im Root-Layout mit next/script.
Schritte
- Öffnen Sie app/layout.tsx. Im Pages Router öffnen Sie pages/_app.tsx.
- Importieren Sie Script aus next/script.
- Fügen Sie die folgende Script-Komponente mit strategy="afterInteractive" hinzu. Ersetzen Sie SITE_ID durch Ihre Site-ID.
- 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.