# Requirements

URL: https://docs.ablyft.com/de/developers/installation/requirements/

> Was das ABlyft-Snippet von deiner Website und den Browsern deiner Visitors braucht.



Das Snippet ist eine einzelne JavaScript-Datei ohne Abhängigkeiten. Diese Seite listet auf, was es zum Laufen braucht,
damit du dein Setup, deine Sicherheitsrichtlinien und deine Support-Ziele prüfen kannst.

## Website

| Anforderung           | Details                                                                                                                                                                                                                                          |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Snippet in der Seite  | Ein `<script>`-Tag mit deiner Project-ID, idealerweise im `<head>`. Siehe [Snippet einbinden](https://docs.ablyft.com/de/developers/installation/snippet/).                                                                                                             |
| Ein Snippet pro Seite | Ein zweites ABlyft-Snippet auf derselben Seite protokolliert eine Warnung und startet nicht.                                                                                                                                                     |
| Kein Build-Schritt    | Das Snippet wird vom CDN geladen. Du installierst kein Paket.                                                                                                                                                                                    |
| CMS und Tag Manager   | Alles, womit du einen Script-Tag oder einen Google-Tag-Manager-Tag hinzufügen kannst, reicht aus. Das Laden über einen Tag Manager kann Flicker verursachen, siehe [Snippet einbinden](https://docs.ablyft.com/de/developers/installation/snippet/#google-tag-manager). |

## Browser

Das Snippet wird als modernes JavaScript ausgeliefert und **nicht** in ältere Sprachversionen umgewandelt. Es verwendet
unter anderem:

* Arrow Functions, Optional Chaining (`?.`), Nullish Coalescing (`??`) und Logical Assignment (`||=`)
* `URL` und `URLSearchParams`
* `MutationObserver` und `IntersectionObserver`
* `navigator.sendBeacon()` zum Senden von Events
* `localStorage`, `sessionStorage` und Cookies

Verwende eine aktuelle Version eines gängigen Browsers (Chrome, Edge, Firefox, Safari, Samsung Internet). Alte Browser, die
moderne Syntax nicht parsen können, wie der Internet Explorer, können das Snippet nicht ausführen.

> Das Snippet verwendet kein `fetch`. Events werden mit `navigator.sendBeacon()` gesendet.

## Netzwerk und Content Security Policy

Wenn du einschränkst, welche Domains deine Seiten kontaktieren dürfen (zum Beispiel mit einer Content Security Policy),
erlaube diese:

| Domain                      | Verwendet für                                                        | CSP-Direktive                        | Benötigt                                                                           |
| --------------------------- | -------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------- |
| `https://cdn.ablyft.com`    | Laden des Snippets (JavaScript)                                      | `script-src`                         | Immer                                                                              |
| `https://log.ablyft.com`    | Empfang von Events und Tracking-Payloads (gesendet mit `sendBeacon`) | `connect-src`                        | Immer                                                                              |
| `https://assets.ablyft.com` | Bilder                                                               | `img-src`                            | Wenn deine Variations von ABlyft gehostete Bilder verwenden                        |
| `https://editor.ablyft.com` | Visual Editor (JavaScript, CSS und Bilder)                           | `script-src`, `style-src`, `img-src` | Nur, während du eine Variation im Visual Editor bearbeitest                        |
| `https://app.ablyft.com`    | API-Requests des Visual Editors und des Quality-Assurance-Tools      | `connect-src`                        | Nur, während du eine Variation im Visual Editor bearbeitest oder das QA-Tool nutzt |

Ein Beispiel-Header für die immer benötigten Domains, den du in deine bestehende Policy einfügen kannst:

```http
Content-Security-Policy: script-src 'self' https://cdn.ablyft.com; connect-src 'self' https://log.ablyft.com; img-src 'self' https://assets.ablyft.com
```

Um den Visual Editor auf einer Website mit strenger Policy zu nutzen, füge außerdem `https://editor.ablyft.com` zu
`script-src`, `style-src` und `img-src` hinzu und `https://app.ablyft.com` zu `connect-src`.

Wenn dein Project eine eigene Tracker-URL oder einen eigenen Snippet-Speicherort verwendet, weichen die Domains ab. Diese
Einstellungen werden vom ABlyft-Support verwaltet.

Zwei weitere Punkte sind für strenge Policies wichtig:

* Das Snippet führt das JavaScript deiner Experiments, Variations, Audiences und [Prerequisite-Regeln](https://docs.ablyft.com/de/developers/consent-and-security/consent-manager/) mit `eval` und `new Function` aus. Eine Policy, die das verbietet (kein `unsafe-eval`), verhindert, dass dieser Code läuft.
* Variations fügen der Seite `<style>`-Elemente hinzu, und der Anti-Flicker-Modus setzt einen Inline-Style auf das `<html>`-Element.

## iFrames

Standardmäßig läuft das Snippet nicht in einem iFrame. Wenn du Inhalte in einem iFrame testen möchtest, aktiviere
**Allow in iFrames** unter **Settings → Project Settings → Project Activations Settings** und füge das Snippet zur Seite
innerhalb des iFrames hinzu. Alternativ setze `window.ablyftAllowIframe = true`, bevor das Snippet lädt, siehe
[Window flags](https://docs.ablyft.com/de/developers/reference/javascript-api/#window-flags).

## Bots

Visitors, deren User Agent Wörter wie `bot`, `google`, `crawler`, `spider`, `robot`, `crawling` oder
`facebookexternalhit` enthält, werden als Bots behandelt. Das Snippet tut für sie nichts: Sie sehen keine Variations und
werden nicht getrackt.

## Cookies und Speicher

Das Snippet speichert eine kleine Datenmenge im Browser des Visitors, standardmäßig in `localStorage`. Über diesen Speicher
merkt sich ABlyft, welche Variation ein Visitor gesehen hat. Die vollständige Liste findest du unter
[Storage & privacy](https://docs.ablyft.com/de/developers/consent-and-security/storage-and-privacy/).

## Nächste Schritte

- [Publishing](https://docs.ablyft.com/de/developers/installation/publishing/): Wie Änderungen deine Visitors erreichen.
- [Storage & privacy](https://docs.ablyft.com/de/developers/consent-and-security/storage-and-privacy/): Was im Browser gespeichert wird.