ABlyft integrierenDebugging

Integration prüfen

Prüfe im Browser, dass das ABlyft-Snippet geladen, aktuell und am Senden von Events ist.

Nutze diese Prüfungen nach der Installation des Snippets, nach einem Release deiner Website oder immer dann, wenn du unsicher bist, ob ABlyft auf einer Seite funktioniert. Sie dauern wenige Minuten und brauchen nur einen Browser.

1. Der Schnellcheck

Hänge ablyft_check=true an die URL einer beliebigen Seite an, zum Beispiel https://example.com/?ablyft_check=true. Wenn das Snippet geladen ist und startet, zeigt der Browser ein Pop-up mit ABlyft is implemented.

Das Pop-up beweist nur, dass das Snippet geladen wurde und gestartet ist. Es erscheint auch, wenn du dich abgemeldet hast, der Browser Do Not Track sendet oder der Visitor als Bot eingestuft wird, obwohl dann kein Experiment läuft. Es erscheint nicht in einem iFrame (sofern nicht erlaubt) oder wenn bereits ein zweites Snippet lief. Wenn das Pop-up erscheint, aber Experiments nicht laufen, fahre mit den Prüfungen unten fort.

2. Wird die Snippet-Datei angefragt?

  1. Öffne die Entwicklertools deines Browsers und wechsle zum Tab Network.
  2. Lade die Seite neu.
  3. Suche nach cdn.ablyft.com/s/. Du solltest eine Anfrage für <project ID>.js (oder die Datei eines Sub-Snippets) mit Status 200 sehen.

Gibt es keine Anfrage, ist das Snippet nicht auf der Seite, wird von einem Adblocker blockiert oder von einer Content Security Policy deiner Website. Siehe Security und Häufige Probleme.

3. Den Snippet-Status in der Konsole lesen

Öffne die Console und führe aus:

ablyft.get('data');

Du erhältst ein Objekt mit projectId, version, revision, isPreview, optedOut und mehr, beschrieben unter ablyft.get('data'). Prüfe, dass projectId die ID deines Projects ist und dass revision mit Snippet revision in den Snippet-Einstellungen übereinstimmt.

ablyft is not defined?

Das Snippet ist auf dieser Seite nicht geladen oder wurde gestoppt, bevor es initialisiert wurde. Prüfe zuerst den Network-Tab, dann die Liste der Situationen, in denen das Snippet nicht startet.

4. Pages und Experiments prüfen

Nachdem die Seite geladen ist:

ablyft.get('activePageIds');        // pages that match the current URL
ablyft.get('activeExperimentIds');  // experiments that were applied: { experimentId: variationId }
ablyft.get('bucketing');            // all assignments of this visitor: { experimentId: variationId }

So liest du das Ergebnis:

  • activePageIds ist leer: Keine Page passt zu dieser URL, also startet kein Experiment. Prüfe die URL-Regeln und den Trigger der Page.
  • Ein Experiment fehlt in activeExperimentIds: Es hat eine der Prüfungen nicht bestanden (Status, Environment, Audiences, Exclusion Groups, Traffic Allocation). Schalte den Debug-Modus ein, um zu sehen, welche.
  • bucketing enthält 0 für ein Experiment: Der Visitor wurde ausgeschlossen und bleibt ausgeschlossen.
  • bucketing zeigt eine Variation ID: Der Visitor sieht diese Variation. Die IDs sind die Variation IDs von ABlyft.

Die Listen von allem, was im Snippet enthalten ist, erhältst du mit ablyft.get('pages'), ablyft.get('experiments') und ablyft.get('goals'). Alle Optionen siehe ablyft.get().

5. Prüfen, ob Events ankommen

Das Snippet sendet Events (Bucketing, Seitenaufrufe, Klicks und Custom Goals) mit der Browser-Funktion navigator.sendBeacon an den Tracker. Filtere im Network-Tab nach der Tracker-Adresse, standardmäßig log.ablyft.com. Diese Anfragen werden mit der Methode POST gesendet und haben eine JSON-Payload mit deiner projectId, dem user mit seinem experimentsBucket und den events.

Einfacher: Öffne den Live Log in deinem Project. Er listet die neuesten Events, die vom Tracking-Server empfangen wurden. Siehe Preview & Live Log.

Keine Events ohne Zuweisung

Das Snippet sendet Events nur für Visitors, die einer Variation zugewiesen sind. Ist der Visitor in keinem Experiment, erscheint die Konsolenmeldung ABlyft # Empty UserBucket, not sending und es wird nichts gesendet.

6. Auf Snippet-Events in deinem Code reagieren

Das Snippet löst die Browser-Events ablyft_initialized und ablyftError auf document aus, die du für eigene Prüfungen nutzen kannst. Sie sind in der JavaScript API dokumentiert. ablyftError wird nur ausgelöst, solange der Debug-Modus auf der Seite aktiv ist.

Checkliste

  • ?ablyft_check=true zeigt das Pop-up
  • Der Network-Tab zeigt die Snippet-Datei mit Status 200
  • ablyft.get('data').projectId ist dein Project, und revision ist aktuell
  • Die erwartete Page steht in ablyft.get('activePageIds')
  • Das erwartete Experiment steht in ablyft.get('activeExperimentIds')
  • Events erscheinen im Live Log

Nächste Schritte

On this page