Toutes les intégrations

Next.js

Chargez la balise une seule fois dans votre layout racine avec next/script.

Étapes

  1. Ouvrez app/layout.tsx. Avec le Pages Router, ouvrez pages/_app.tsx.
  2. Importez Script depuis next/script.
  3. Ajoutez le composant Script ci-dessous avec strategy="afterInteractive". Remplacez SITE_ID par votre ID de site.
  4. Déployez.

L'extrait

Remplacez SITE_ID par l'ID des paramètres de votre site Glyphex.

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

Les changements de route côté client sont suivis automatiquement. Aucun écouteur de route n'est nécessaire.

Vérifier que ça marche

Ouvrez votre site en ligne dans un nouvel onglet, puis ouvrez Temps réel dans votre tableau de bord Glyphex. Votre visite doit apparaître en quelques secondes.

Suivre des événements personnalisés

Appelez window.analytics.track depuis un composant client. Ajoutez une déclaration de type si TypeScript se plaint de window.analytics :

"use client";

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

Les événements peuvent aussi être envoyés avec window.analytics.track(name, props) ou les attributs déclaratifs data-glyphex-event et data-glyphex-event-<prop>.

Dépannage

  • Pas de données ? Vérifiez que l'ID de site est exact et que la page a été republiée ou le cache vidé.
  • Les bloqueurs de publicités peuvent bloquer les scripts d'analytics. Désactivez le vôtre pour tester.
  • Content Security Policy : autorisez https://glyphex.io dans script-src et connect-src.
  • Dans DevTools > Network, cherchez une requête vers glyphex.io/t/. Un 404 signifie que l'ID de site est incorrect.

Événements personnalisés

Installation