Applications monopages

Suivi automatique pour React, Vue, Next.js et autres SPA.

Suivi automatique de la navigation

Le script de suivi Glyphex détecte automatiquement la navigation côté client dans les applications monopages. Aucune configuration supplémentaire n’est nécessaire.

Il fonctionne en écoutant l’API History (événements pushState et popstate), que tous les frameworks modernes utilisent pour le routage.

Ajoutez le script une seule fois – il gère toute la navigation automatiquement.

Exemples par framework

Next.js (App Router)

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          defer
          data-site-id="YOUR_SITE_ID"
          src="https://glyphex.io/tracker.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js (Pages Router)

// pages/_app.tsx
import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        defer
        data-site-id="YOUR_SITE_ID"
        src="https://glyphex.io/tracker.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

React Router

// index.html - just add the script
<script
  defer
  data-site-id="YOUR_SITE_ID"
  src="https://glyphex.io/tracker.js"
></script>

// Navigation is tracked automatically!

Vue / Nuxt

<!-- nuxt.config.ts -->
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          defer: true,
          'data-site-id': 'YOUR_SITE_ID',
          src: 'https://glyphex.io/tracker.js'
        }
      ]
    }
  }
})

SvelteKit

<!-- src/app.html -->
<!DOCTYPE html>
<html>
  <head>
    <script
      defer
      data-site-id="YOUR_SITE_ID"
      src="https://glyphex.io/tracker.js"
    ></script>
  </head>
  <body>
    %sveltekit.body%
  </body>
</html>

Astro

<!-- src/layouts/Layout.astro -->
<html>
  <head>
    <script
      defer
      data-site-id="YOUR_SITE_ID"
      src="https://glyphex.io/tracker.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Comment ça fonctionne

Le script de suivi :

  1. Suit le chargement initial de la page
  2. Écoute les appels pushState (nouvelle navigation)
  3. Écoute les événements popstate (navigation arrière/avant)
  4. Envoie une page vue lorsque l’URL change

Routage basé sur le hash

Si votre application utilise un routage basé sur le hash (par exemple example.com/#/page), ces changements basés uniquement sur le hash ne sont pas suivis automatiquement. Utilisez le routage via l'API History, ou appelez vous-même window.analytics.track() à chaque changement.

Dépannage

Les pages vues ne sont pas suivies lors de la navigation ?

Assurez-vous que le script est chargé avant votre première navigation. L’utilisation de defer ou strategy="afterInteractive" est recommandée.

Pages vues en double ?

Assurez-vous de ne pas avoir ajouté le script plusieurs fois (une seule fois suffit). Vérifiez également que vous n’appelez pas le tracker manuellement en plus du suivi automatique.