smoxy

Deutsch

English

Deutsch

English

Erscheinungsbild

Real User Monitoring einrichten ​

Diese Anleitung beschreibt die Aktivierung von Real User Monitoring für Domains in smoxy.

Voraussetzungen ​

Vor dem Start ist sicherzustellen:

  • ✅ Die Rolle Owner oder Maintainer im smoxy-Konto liegt vor
  • ✅ Ein JavaScript-Snippet lässt sich in das HTML der Website einbinden

INFO

Real User Monitoring kann für bis zu 10 Domains pro Konfiguration aktiviert werden. Bei Bedarf für weitere Domains ist der Support zu kontaktieren.

Schritt 1: Auf RUM-Konfiguration zugreifen ​

  1. Im smoxy Hub anmelden
  2. Auf Real User Monitoring klicken
  3. Auf die Schaltfläche RUM-Einstellungen klicken

Schritt 2: Domains konfigurieren ​

Domains zum Monitoring hinzufügen ​

Im RUM-Konfigurationspanel:

  1. Domains hinzufügen: Bis zu 10 zu überwachende Domains eingeben
    • Es lässt sich jede beliebige Domain hinzufügen - sie müssen nicht in smoxy konfiguriert sein
    • Dadurch können Domains auch überwacht werden, wenn ausschließlich RUM genutzt wird (nicht andere smoxy-Funktionen)
    • Einfach den Domainnamen eingeben und zur Liste hinzufügen

Beispielkonfiguration ​

Hinzugefügte Domains:
- www.example.com
- shop.example.com
- blog.example.com
  1. Auf Speichern klicken

Nach dem Speichern generiert smoxy:

  • Ein einzigartiges RUM-Token (Format: srt-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx)
  • Ein JavaScript-Snippet für die Website

Schritt 3: Das Tracking-Snippet installieren ​

Snippet kopieren ​

Nach der Konfiguration wird ein JavaScript-Snippet ähnlich diesem angezeigt:

html
<script>
    (function() {
        var tok = 'srt-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Token unique to each customer
        var org = 123;
        var img = 'https://svc.smoxy.eu/_sx/a/perf.gif'; // Path to the tracking pixel
        var url = 'https://svc.smoxy.eu/_sx/a/core.js'; // Path to the core script

        // Function to load the core script
        function loadCore() {
            var scr = document.createElement('script'); // Create a script element
            scr.src = url + '?token=' + encodeURIComponent(tok); // Append query params
            scr.async = true; // Ensure the script loads asynchronously
            scr.defer = true; // Defer loading until HTML parsing is complete

            scr.onload = function() {
                // Once the core script is loaded, call the initialization function
                if (typeof window.initM === 'function') {
                    window.initM(tok, org); // Pass token and org
                }
            };

            document.head.appendChild(scr); // Attach the script to the document head
        }

        // Function to load the tracking pixel
        function loadImage() {
            var pix = new Image(); // Create a new image element
            pix.onload = loadCore; // On successful load of the pixel, load the core script
            pix.onerror = function() {
                loadCore();
            };
            pix.src = img;
        }

        // Use requestIdleCallback if available, otherwise fallback to setTimeout
        if ('requestIdleCallback' in window) {
            requestIdleCallback(loadImage, { timeout: 5000 }); // Use requestIdleCallback with a timeout of 5 seconds
        } else {
            setTimeout(loadImage, 1); // Fallback: load the image immediately
        }
    })();
</script>

Zur Website hinzufügen ​

Das Snippet direkt vor dem schließenden </head>-Tag platzieren in der HTML-Vorlage der Website.

INFO

Best Practice: Das Snippet in die globale Header-Vorlage der Website einbinden, damit es automatisch auf allen Seiten enthalten ist.

Implementierungsbeispiele ​

WordPress: In die header.php des Themes vor </head> einfügen, oder ein Plugin wie „Insert Headers and Footers" verwenden, um das Snippet zum Header-Bereich hinzuzufügen.

Shopify: Zu Online Store → Themes → Actions → Edit code gehen, theme.liquid öffnen und das Snippet vor </head> einfügen.

Next.js / React: Die next/script-Komponente mit strategy="afterInteractive" im Root-Layout oder in der _app-Datei verwenden.

HTML / Statische Seiten: Das Snippet einfach im <head>-Bereich der HTML-Vorlage einfügen, direkt vor dem schließenden </head>-Tag.

Schritt 4: Installation überprüfen ​

Datensammlung prüfen ​

Nach der Installation des Snippets:

  1. Die Website in einem Browser aufrufen
  2. Die Entwicklertools öffnen (F12)
  3. Zum Tab Network wechseln
  4. Nach Anfragen an rum.smoxy.eu/_sx/a suchen
  5. Folgendes sollte sichtbar sein:
    • Eine Anfrage an perf.gif (Tracking-Pixel)
    • Eine Anfrage an core.js (RUM-Skript)
    • POST-Anfragen an /_sx/a (Daten werden gesendet)

TIP

Sind diese Anfragen sichtbar, funktioniert RUM korrekt! Daten werden innerhalb weniger Minuten im Dashboard angezeigt.

Dashboard-Verifizierung ​

  1. Zu Real User Monitoring im smoxy Hub navigieren
  2. Auf Analysen anzeigen oder Dashboard klicken
  3. 2-5 Minuten warten, bis die ersten Daten erscheinen
  4. In den Widgets sollten nun Daten erscheinen

WARNING

Keine Daten angezeigt?

  • Sicherstellen, dass das Snippet auf allen Seiten vorhanden ist
  • Prüfen, dass die Domain genau mit den konfigurierten Domains übereinstimmt
  • Browser-Cache leeren und die Seite neu laden
  • Browser-Konsole auf JavaScript-Fehler prüfen

Schritt 5: Die Konfiguration verstehen ​

RUM-Token ​

Das RUM-Token (srt-xxxxx...) ist eindeutig für das Konto und wird verwendet, um:

  • Datenübermittlungen zu authentifizieren
  • Daten der Organisation zuzuordnen
  • Eingehende Anfragen zu validieren

Domain-Validierung ​

smoxy validiert jede RUM-Datenübermittlung:

  • Das Feld domain muss mit einer der konfigurierten Domains übereinstimmen
  • Subdomains werden exakt abgeglichen (z. B. www.example.com ≠ example.com)
  • Ungültige Domains werden automatisch abgelehnt

Fehlerbehebung ​

Häufige Probleme ​

Problem: Daten erscheinen nicht nach 10+ Minuten
Lösung:

  • Überprüfen, dass die Domain im Snippet genau mit den konfigurierten Domains übereinstimmt
  • Die Website mehrmals besuchen, um das Sampling auszulösen

Problem: RUM verlangsamt das Laden der Seite
Lösung: Dies sollte nicht passieren, da RUM requestIdleCallback verwendet. Prüfen:

  • Keine JavaScript-Fehler, die die Ausführung blockieren
  • Snippet ist im <head>, nicht im <body>
  • Die neueste Snippet-Version ist im Einsatz

Problem: Duplizierte Daten werden angezeigt
Lösung: Sicherstellen, dass das Snippet nur einmal auf jeder Seite enthalten ist

Was kommt als Nächstes? ​

Jetzt, wo RUM Daten sammelt, geht es um die Nutzung dieser Daten:

TIP

Profi-Tipp: RUM sollten 24-48 Stunden Zeit gegeben werden, um ausreichend Daten zu sammeln, bevor größere Optimierungsentscheidungen getroffen werden. So sind statistisch signifikante Erkenntnisse gewährleistet.