# Integration prüfen

URL: https://docs.ablyft.com/de/developers/debugging/verify-integration/

> 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](https://docs.ablyft.com/de/developers/installation/environments/#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](https://docs.ablyft.com/de/developers/consent-and-security/security/) und [Häufige Probleme](https://docs.ablyft.com/de/developers/debugging/common-issues/).

## 3. Den Snippet-Status in der Konsole lesen

Öffne die **Console** und führe aus:

```js
ablyft.get('data');
```

Du erhältst ein Objekt mit `projectId`, `version`, `revision`, `isPreview`, `optedOut` und mehr, beschrieben unter
[`ablyft.get('data')`](https://docs.ablyft.com/de/developers/reference/javascript-api/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](https://docs.ablyft.com/de/developers/debugging/common-issues/#the-snippet-does-not-start).

## 4. Pages und Experiments prüfen

Nachdem die Seite geladen ist:

```js
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](https://docs.ablyft.com/de/developers/debugging/preview-and-live-log/#debug-mode)
  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()`](https://docs.ablyft.com/de/developers/reference/javascript-api/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](https://docs.ablyft.com/de/developers/debugging/preview-and-live-log/#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](https://docs.ablyft.com/de/developers/reference/javascript-api/#events) 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

* [Preview & Live Log](https://docs.ablyft.com/de/developers/debugging/preview-and-live-log/)
* [Häufige Probleme](https://docs.ablyft.com/de/developers/debugging/common-issues/)
* [Environments](https://docs.ablyft.com/de/developers/installation/environments/)