Single-Page-Apps

Automatisches Tracking für React, Vue, Next.js und andere SPAs.

Automatisches Navigations-Tracking

Das Glyphex-Tracking-Script erkennt automatisch clientseitige Navigation in Single-Page-Anwendungen. Keine zusätzliche Konfiguration erforderlich.

Es funktioniert, indem es die History-API abhört (pushState- und popstate-Events), die alle modernen Frameworks für das Routing verwenden.

Fügen Sie das Script einmal hinzu – es verarbeitet die gesamte Navigation automatisch.

Framework-Beispiele

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>

So funktioniert es

Das Tracking-Script:

  1. Erfasst den ersten Seitenaufruf
  2. Lauscht auf pushState-Aufrufe (neue Navigation)
  3. Lauscht auf popstate-Events (Vorwärts-/Rückwärtsnavigation)
  4. Sendet einen Seitenaufruf, wenn sich die URL ändert

Hash-basiertes Routing

Wenn Ihre App Hash-basiertes Routing verwendet (z. B. example.com/#/page), werden diese reinen Hash-Änderungen nicht automatisch erfasst. Verwenden Sie History-API-Routing oder rufen Sie bei jeder Änderung selbst window.analytics.track() auf.

Fehlerbehebung

Seitenaufrufe werden bei der Navigation nicht erfasst?

Stellen Sie sicher, dass das Script geladen wird, bevor Ihre erste Navigation erfolgt. Die Verwendung von defer oder strategy="afterInteractive" wird empfohlen.

Doppelte Seitenaufrufe?

Stellen Sie sicher, dass Sie das Script nicht mehrfach hinzugefügt haben (einmal genügt). Prüfen Sie außerdem, ob Sie den Tracker nicht zusätzlich zum automatischen Tracking manuell aufrufen.