` oder nach den Meta-Tags und Stylesheets. ```html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <script src="https://cdn.ablyft.com/s/12345678.js"></script>  </head> <body> ... </body> </html> ``` ## Synchron oder asynchron | | Synchron (Standard) | Asynchron | | --------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | Code | `<script src="…">` | `<script async src="…">` | | Verhalten | Der Browser wartet auf das Snippet, bevor er die Seite rendert | Das Snippet lädt parallel und blockiert das Rendering nicht | | Vorteil | Verhindert Flackern: Visitors sehen die Originalseite nicht, bevor eine Variation angewendet wird | Bessere Ladeperformance, zum Beispiel für PageSpeed-Werte | Beide Varianten werden unterstützt. Da das Snippet sehr schnell lädt, ist der Unterschied gering. Verwende die synchrone Variante, wenn Flackern ein Problem ist. ```html <script async src="https://cdn.ablyft.com/s/12345678.js"></script> ``` > Mit `async` kann die Seite kurz im ursprünglichen Zustand angezeigt werden, bevor eine Variation angewendet wird. ## Google Tag Manager Du kannst das Snippet auch über Google Tag Manager laden, ohne den Code deiner Website zu ändern. 1. Kopiere dein Snippet wie [oben](#get-your-snippet) beschrieben. 2. Erstelle im Google Tag Manager einen neuen Tag vom Typ *Custom HTML*. 3. Füge das Snippet in den Tag ein. 4. Lege den Trigger so fest, dass der Tag auf den Seiten ausgelöst wird, die du testen möchtest, und veröffentliche dann deinen Container. > **Flackern:** Wird das Snippet über einen Tag-Manager geladen, kann es flackern: Visitors sehen eventuell kurz den Originalinhalt, bevor > eine Variation erscheint. Für das beste Ergebnis platzierst du das Snippet direkt im `<head>`. ## Snippet selbst hosten Statt der CDN-Version kannst du das Snippet von deinem eigenen Server ausliefern. Du speicherst dann jede neue Version als Datei auf deiner Seite und bindest diese Datei in deine Seiten ein. Es gibt zwei Wege, die aktuelle Version zu erhalten. ### A) Publication Webhook (empfohlen) ABlyft ruft nach jedem Publishing eine URL von dir auf und sendet das Snippet in der Anfrage mit. Dein Script speichert es als lokale Datei. 1. Öffne im Project **Settings → Snippet** und füge die URL deines Scripts unter [Publication Webhooks](https://docs.ablyft.com/de/developers/installation/snippet-settings/#publication-webhooks) hinzu. 2. Hänge ein geheimes Token deiner Wahl als GET-Parameter an diese URL an, zum Beispiel `https://www.example.com/ablyft-webhook.php?token=…`, und prüfe es in deinem Script. So verhinderst du, dass andere eine Datei mit eigenem Inhalt schreiben. 3. Binde die lokale Datei statt der CDN-URL ein, zum Beispiel `<script src="/snippets/12345678.js"></script>`. ```php <?php // Example receiver: saves the published snippet as snippets/<project_id>.js if (($_GET['token'] ?? '') !== 'YOUR_SECRET_TOKEN') { http_response_code(403); exit; } if ($_SERVER['HTTP_USER_AGENT'] !== 'ABlyft Publication Webhook') { http_response_code(403); exit; } $projectId = (int) ($_POST['project_id'] ?? 0); $script = $_POST['snippet_script'] ?? null; if ($projectId === 0 || $script === null) { http_response_code(400); exit; } file_put_contents(__DIR__ . "/snippets/{$projectId}.js", $script); http_response_code(204); ``` Aktiviere für den Webhook **Include JS**, sonst enthält die Anfrage kein `snippet_script`. Der User-Agent allein ist kein Schutz, denn jeder kann ihn senden; das Token sichert den Endpunkt ab. ### B) Datei vom CDN abrufen Dein Server kann das Snippet auch regelmäßig oder bei Bedarf von seiner CDN-Adresse herunterladen. In diesem Fall muss die Cache Expiration (**ttl**) auf **Disable Caching** stehen, damit du immer die neueste Version erhältst. Diese Einstellung ist in der App schreibgeschützt, bitte den ABlyft-Support daher, sie zu ändern. Siehe [Cache Expiration](https://docs.ablyft.com/de/developers/installation/snippet-settings/#cache-expiration-ttl). > Eine selbst gehostete Datei ist nur so aktuell wie dein letztes Update. Wenn der Webhook fehlschlägt oder dein Abruf-Job > stoppt, erhalten Visitors weiterhin das alte Snippet. Überwache den Webhook und vergleiche nach einem Publishing die > Revisionsnummer unter **Settings → Snippet** mit der in deiner Datei. ## Gut zu wissen * **Binde es nur einmal pro Seite ein.** Wird ein zweites ABlyft-Snippet gefunden, schreibt es eine Warnung ins Log und startet nicht. * **iFrames:** Das Snippet läuft standardmäßig nicht in iFrames, siehe [Prerequisites](https://docs.ablyft.com/de/developers/installation/requirements/#iframes). * **Environments:** Wenn du auf einer bestimmten Website weniger Daten laden möchtest, verwende ein [Sub-Snippet](https://docs.ablyft.com/de/developers/installation/environments/#sub-snippets) statt des Haupt-Snippets. * **Bots** sind ausgeschlossen, siehe [Prerequisites](https://docs.ablyft.com/de/developers/installation/requirements/#bots). * **Consent:** Wenn du vor dem Tracking die Einwilligung der Visitors brauchst, siehe [Consent Manager](https://docs.ablyft.com/de/developers/consent-and-security/consent-manager/). * **Updates:** Nach dem Publishing in ABlyft kann es kurz dauern, bis die neue Version ausgeliefert wird, siehe [Cache Expiration](https://docs.ablyft.com/de/developers/installation/snippet-settings/#cache-expiration-ttl). ## Installation prüfen Prüfe mit den Checks unter [Integration prüfen](https://docs.ablyft.com/de/developers/debugging/verify-integration/), ob das Snippet angefordert wird und läuft, oder folge dem [Quickstart](https://docs.ablyft.com/de/developers/quickstart/).

# Snippet einbinden URL: https://docs.ablyft.com/de/developers/installation/snippet/ > Füge das ABlyft-Snippet direkt oder über Google Tag Manager zu deiner Website hinzu. Um Experiments auszuführen, fügst du deiner Website ein JavaScript-Snippet hinzu. Es enthält die eindeutige ID deines Projects. Du installierst es nur einmal: Wenn du Experiments, Audiences oder Einstellungen änderst und veröffentlichst, werden die neuen Daten unter derselben URL ausgeliefert, das Snippet auf deiner Website muss also nie angepasst werden. ```html ``` In diesem Beispiel ist `12345678` die Project-ID. Ersetze sie durch deine eigene. ## Snippet abrufen 1. Öffne dein Project in ABlyft. 2. Gehe zu **Settings → Snippet**. 3. Kopiere im Abschnitt **Snippet Implementation** den Code unter **Implementation (base snippet)**. Derselbe Abschnitt zeigt den Zustand deines Snippets, siehe [Publishing](https://docs.ablyft.com/de/developers/installation/publishing/#check-the-state-of-your-snippet). ## Wo du es platzierst Platziere das Snippet im `` jeder Seite, die du testen möchtest, so früh wie möglich und vor deinen anderen Scripts. Ein guter Platz ist direkt nach dem `` oder nach den Meta-Tags und Stylesheets. ```html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <script src="https://cdn.ablyft.com/s/12345678.js"></script>  </head> <body> ... </body> </html> ``` ## Synchron oder asynchron | | Synchron (Standard) | Asynchron | | --------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | Code | `<script src="…">` | `<script async src="…">` | | Verhalten | Der Browser wartet auf das Snippet, bevor er die Seite rendert | Das Snippet lädt parallel und blockiert das Rendering nicht | | Vorteil | Verhindert Flackern: Visitors sehen die Originalseite nicht, bevor eine Variation angewendet wird | Bessere Ladeperformance, zum Beispiel für PageSpeed-Werte | Beide Varianten werden unterstützt. Da das Snippet sehr schnell lädt, ist der Unterschied gering. Verwende die synchrone Variante, wenn Flackern ein Problem ist. ```html <script async src="https://cdn.ablyft.com/s/12345678.js"></script> ``` > Mit `async` kann die Seite kurz im ursprünglichen Zustand angezeigt werden, bevor eine Variation angewendet wird. ## Google Tag Manager Du kannst das Snippet auch über Google Tag Manager laden, ohne den Code deiner Website zu ändern. 1. Kopiere dein Snippet wie [oben](#get-your-snippet) beschrieben. 2. Erstelle im Google Tag Manager einen neuen Tag vom Typ *Custom HTML*. 3. Füge das Snippet in den Tag ein. 4. Lege den Trigger so fest, dass der Tag auf den Seiten ausgelöst wird, die du testen möchtest, und veröffentliche dann deinen Container. > **Flackern:** Wird das Snippet über einen Tag-Manager geladen, kann es flackern: Visitors sehen eventuell kurz den Originalinhalt, bevor > eine Variation erscheint. Für das beste Ergebnis platzierst du das Snippet direkt im `<head>`. ## Snippet selbst hosten Statt der CDN-Version kannst du das Snippet von deinem eigenen Server ausliefern. Du speicherst dann jede neue Version als Datei auf deiner Seite und bindest diese Datei in deine Seiten ein. Es gibt zwei Wege, die aktuelle Version zu erhalten. ### A) Publication Webhook (empfohlen) ABlyft ruft nach jedem Publishing eine URL von dir auf und sendet das Snippet in der Anfrage mit. Dein Script speichert es als lokale Datei. 1. Öffne im Project **Settings → Snippet** und füge die URL deines Scripts unter [Publication Webhooks](https://docs.ablyft.com/de/developers/installation/snippet-settings/#publication-webhooks) hinzu. 2. Hänge ein geheimes Token deiner Wahl als GET-Parameter an diese URL an, zum Beispiel `https://www.example.com/ablyft-webhook.php?token=…`, und prüfe es in deinem Script. So verhinderst du, dass andere eine Datei mit eigenem Inhalt schreiben. 3. Binde die lokale Datei statt der CDN-URL ein, zum Beispiel `<script src="/snippets/12345678.js"></script>`. ```php <?php // Example receiver: saves the published snippet as snippets/<project_id>.js if (($_GET['token'] ?? '') !== 'YOUR_SECRET_TOKEN') { http_response_code(403); exit; } if ($_SERVER['HTTP_USER_AGENT'] !== 'ABlyft Publication Webhook') { http_response_code(403); exit; } $projectId = (int) ($_POST['project_id'] ?? 0); $script = $_POST['snippet_script'] ?? null; if ($projectId === 0 || $script === null) { http_response_code(400); exit; } file_put_contents(__DIR__ . "/snippets/{$projectId}.js", $script); http_response_code(204); ``` Aktiviere für den Webhook **Include JS**, sonst enthält die Anfrage kein `snippet_script`. Der User-Agent allein ist kein Schutz, denn jeder kann ihn senden; das Token sichert den Endpunkt ab. ### B) Datei vom CDN abrufen Dein Server kann das Snippet auch regelmäßig oder bei Bedarf von seiner CDN-Adresse herunterladen. In diesem Fall muss die Cache Expiration (**ttl**) auf **Disable Caching** stehen, damit du immer die neueste Version erhältst. Diese Einstellung ist in der App schreibgeschützt, bitte den ABlyft-Support daher, sie zu ändern. Siehe [Cache Expiration](https://docs.ablyft.com/de/developers/installation/snippet-settings/#cache-expiration-ttl). > Eine selbst gehostete Datei ist nur so aktuell wie dein letztes Update. Wenn der Webhook fehlschlägt oder dein Abruf-Job > stoppt, erhalten Visitors weiterhin das alte Snippet. Überwache den Webhook und vergleiche nach einem Publishing die > Revisionsnummer unter **Settings → Snippet** mit der in deiner Datei. ## Gut zu wissen * **Binde es nur einmal pro Seite ein.** Wird ein zweites ABlyft-Snippet gefunden, schreibt es eine Warnung ins Log und startet nicht. * **iFrames:** Das Snippet läuft standardmäßig nicht in iFrames, siehe [Prerequisites](https://docs.ablyft.com/de/developers/installation/requirements/#iframes). * **Environments:** Wenn du auf einer bestimmten Website weniger Daten laden möchtest, verwende ein [Sub-Snippet](https://docs.ablyft.com/de/developers/installation/environments/#sub-snippets) statt des Haupt-Snippets. * **Bots** sind ausgeschlossen, siehe [Prerequisites](https://docs.ablyft.com/de/developers/installation/requirements/#bots). * **Consent:** Wenn du vor dem Tracking die Einwilligung der Visitors brauchst, siehe [Consent Manager](https://docs.ablyft.com/de/developers/consent-and-security/consent-manager/). * **Updates:** Nach dem Publishing in ABlyft kann es kurz dauern, bis die neue Version ausgeliefert wird, siehe [Cache Expiration](https://docs.ablyft.com/de/developers/installation/snippet-settings/#cache-expiration-ttl). ## Installation prüfen Prüfe mit den Checks unter [Integration prüfen](https://docs.ablyft.com/de/developers/debugging/verify-integration/), ob das Snippet angefordert wird und läuft, oder folge dem [Quickstart](https://docs.ablyft.com/de/developers/quickstart/).