Cookielose Webanalyse für Vue und Nuxt

Warum Noralytic mit Vue und Nuxt

Vue- und Nuxt-Apps navigieren auf dem Client, daher übersieht klassische Seitenlade-Analyse die meisten Aufrufe. Noralytic liest den Browserverlauf und zählt jeden Routenwechsel.

Ein winziges Skript und kein Einwilligungsbanner für die Analyse halten Ihre Vue- oder Nuxt-Seite schnell und sauber.

• Keine Cookies, kein lokaler Speicher und keine gespeicherten IP-Adressen, daher braucht die Analyse allein kein Einwilligungsbanner.
• Ein Tracking-Skript unter 1 KB, das Ihre Seiten nicht verlangsamt.
• Echtzeit-Statistiken, Top-Seiten, Quellen, Länder, Geräte, Kampagnen und Ereignisse in einem einfachen Dashboard.
• Navigation innerhalb von Single-Page-Anwendungen wird automatisch erfasst, weil das Skript dem Browserverlauf folgt.

Was Sie brauchen

• Ein kostenloses Noralytic-Konto mit Ihrer Website unter ihrer genauen Domain.
• Eine Vue-App mit index.html oder ein Nuxt-Projekt mit Zugriff auf nuxt.config.

So binden Sie Noralytic in Vue und Nuxt ein

Der Tracking-Code besteht aus einer Zeile. Die Schritte unten zeigen, wohin er gehört.

<script data-host="https://noralytic.com" src="https://noralytic.com/js/script.js" id="ZwSg9rf6GA" async defer></script>

1. 1
   Vue (Vite): index.html bearbeiten
   Fügen Sie das Snippet im <head> der index.html ein.
2. 2
   Nuxt: nuxt.config bearbeiten
   Fügen Sie das Skript wie unten gezeigt zu app.head.script hinzu.
3. 3
   Deployen und testen
   Prüfen Sie die Echtzeit-Ansicht in Noralytic beim Navigieren.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://noralytic.com/js/script.js',
          'data-host': 'https://noralytic.com',
          id: 'ZwSg9rf6GA',
          async: true,
          defer: true,
        },
      ],
    },
  },
});

Prüfen, ob das Tracking funktioniert

1. 1
   Website öffnen
   Nutzen Sie ein privates Browserfenster, damit Erweiterungen und Ihr Login nicht stören.
2. 2
   Noralytic-Echtzeit-Ansicht öffnen
   Öffnen Sie in Ihrem Noralytic-Dashboard Ihre Website und wechseln Sie zu Echtzeit.
3. 3
   Ihren Besuch suchen
   Ihr Seitenaufruf sollte innerhalb weniger Sekunden erscheinen. Klicken Sie ein paar Seiten durch, um zu sehen, dass jede gezählt wird.

Eigene Ereignisse in Vue und Nuxt messen

Rufen Sie den Tracker aus einer Komponentenmethode oder einem Event-Handler auf.

<template>
  <button @click="track">Anmelden</button>
</template>

<script setup>
function track() {
  window.pa?.track({ name: 'signup' });
}
</script>

Ereignisse erscheinen in Ihrem Ereignisbericht. Wert und Einheit sind optional, zum Beispiel pa.track({ name: 'purchase', value: 49.9, unit: 'EUR' }).

Eigene Besuche und Bots ausschließen

Damit Ihre Zahlen sauber bleiben, öffnen Sie die Website-Einstellungen in Noralytic und tragen Ihre eigene IP-Adresse unter den ausgeschlossenen IP-Adressen ein. Stellen Sie sicher, dass der Bot-Filter aktiviert ist, damit bekannte Crawler ignoriert werden.

Fehlerbehebung

• Server-Side Rendering: Greifen Sie auf window nur im Browser zu, etwa in Event-Handlern oder onMounted.
• Id beibehalten: Das Skript findet sich selbst über id="ZwSg9rf6GA".
• Nach einigen Minuten keine Daten? Prüfen Sie, ob die Domain in Noralytic genau zu Ihrer Website passt und das Skript im Seitenquelltext erscheint.
• Werbeblocker: Manche Blocker verstecken Analyse-Skripte. Testen Sie in einem privaten Fenster ohne Erweiterungen.
• Content Security Policy: Nutzen Sie eine, erlauben Sie noralytic.com als Skript- und Verbindungsquelle.