# Verify the integration

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

> Check in the browser that the ABlyft snippet is loaded, up to date and sending events.



Use these checks after installing the snippet, after a release of your website, or whenever you are unsure whether
ABlyft works on a page. They take a few minutes and need only a browser.

## 1. The quick check

Add `ablyft_check=true` to the URL of any page, for example `https://example.com/?ablyft_check=true`. If the snippet is
loaded and starts, the browser shows a pop-up with **ABlyft is implemented**.

> The pop-up only proves that the snippet was loaded and started. It also appears if you opted out, if the browser
> sends Do Not Track or if the visitor is rated as a bot, although no experiment runs then. It does not appear inside
> an iFrame (unless allowed) or if a second snippet was already running. If the pop-up shows but experiments do not run,
> continue with the checks below.

## 2. Is the snippet file requested?

1. Open the developer tools of your browser and switch to the **Network** tab.
2. Reload the page.
3. Search for `cdn.ablyft.com/s/`. You should see a request for `<project ID>.js` (or the file of a
   [sub-snippet](https://docs.ablyft.com/developers/installation/environments/#sub-snippets)) with status `200`.

If there is no request, the snippet is not on the page, is blocked by an ad blocker, or by a Content Security Policy of
your site. See [Security](https://docs.ablyft.com/developers/consent-and-security/security/) and [Common issues](https://docs.ablyft.com/developers/debugging/common-issues/).

## 3. Read the snippet state in the console

Open the **Console** and run:

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

You get an object with `projectId`, `version`, `revision`, `isPreview`, `optedOut` and more, described in
[`ablyft.get('data')`](https://docs.ablyft.com/developers/reference/javascript-api/get/#data). Check that `projectId` is the ID of your project and
that `revision` matches **Snippet revision** in the snippet settings.

> **ablyft is not defined?:** The snippet is not loaded on this page, or it was stopped before it initialized. Check the Network tab first, then the
> [list of situations in which the snippet does not start](https://docs.ablyft.com/developers/debugging/common-issues/#the-snippet-does-not-start).

## 4. Check pages and experiments

After the page has loaded:

```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 }
```

How to read the result:

* `activePageIds` is empty: no page matches this URL, so no experiment starts. Check the URL rules and the trigger of the page.
* An experiment is missing in `activeExperimentIds`: it did not pass one of the checks (status, environment, audiences,
  exclusion groups, traffic allocation). Turn on [debug mode](https://docs.ablyft.com/developers/debugging/preview-and-live-log/#debug-mode) to see which.
* `bucketing` contains `0` for an experiment: the visitor was excluded and stays excluded.
* `bucketing` shows a variation ID: the visitor sees this variation. The IDs are the variation IDs of ABlyft.

The lists of everything that is in the snippet are available with `ablyft.get('pages')`, `ablyft.get('experiments')` and
`ablyft.get('goals')`. See [`ablyft.get()`](https://docs.ablyft.com/developers/reference/javascript-api/get/) for all options.

## 5. Check that events arrive

The snippet sends events (bucketing, page views, clicks and custom goals) to the tracker with the browser function
`navigator.sendBeacon`. In the Network tab, filter for the tracker address, `log.ablyft.com` by default. These requests
are sent with the method `POST` and have a JSON payload containing your `projectId`, the `user` with their
`experimentsBucket`, and the `events`.

Easier: open **Live Log** in your project. It lists the latest events received from the tracking server. See
[Preview & Live Log](https://docs.ablyft.com/developers/debugging/preview-and-live-log/#live-log).

> **No events without an assignment:** The snippet only sends events for visitors who are assigned to a variation. If the visitor is in no experiment, the
> console message `ABlyft # Empty UserBucket, not sending` appears, and nothing is sent.

## 6. React to snippet events in your code

The snippet dispatches the browser events `ablyft_initialized` and `ablyftError` on `document`, which you can use for your own
checks. They are documented in the [JavaScript API](https://docs.ablyft.com/developers/reference/javascript-api/#events). `ablyftError` is only
dispatched while debug mode is active on the page.

## Checklist

* [ ] `?ablyft_check=true` shows the pop-up
* [ ] The Network tab shows the snippet file with status `200`
* [ ] `ablyft.get('data').projectId` is your project, and `revision` is current
* [ ] The expected page is in `ablyft.get('activePageIds')`
* [ ] The expected experiment is in `ablyft.get('activeExperimentIds')`
* [ ] Events show up in the Live Log

## Next steps

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