Snippet einbinden

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.

<script src="https://cdn.ablyft.com/s/12345678.js"></script>

In diesem Beispiel ist 12345678 die Project-ID. Ersetze sie durch deine eigene.

Snippet abrufenCopy Anchor Link

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.

Wo du es platzierstCopy Anchor Link

Platziere das Snippet im <head> 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 <title> oder nach den Meta-Tags und Stylesheets.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- more meta tags -->
    <!-- stylesheets -->
    <script src="https://cdn.ablyft.com/s/12345678.js"></script>
    <!-- more scripts -->
  </head>
  <body>
    ...
  </body>
</html>

Synchron oder asynchronCopy Anchor Link

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.

<script async src="https://cdn.ablyft.com/s/12345678.js"></script>

Google Tag ManagerCopy Anchor Link

Du kannst das Snippet auch über Google Tag Manager laden, ohne den Code deiner Website zu ändern.

1. Kopiere dein Snippet wie oben 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.

Snippet selbst hostenCopy Anchor Link

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)Copy Anchor Link

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 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
// 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 abrufenCopy Anchor Link

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.

Gut zu wissenCopy Anchor Link

• 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.
• Environments: Wenn du auf einer bestimmten Website weniger Daten laden möchtest, verwende ein Sub-Snippet statt des Haupt-Snippets.
• Bots sind ausgeschlossen, siehe Prerequisites.
• Consent: Wenn du vor dem Tracking die Einwilligung der Visitors brauchst, siehe Consent Manager.
• Updates: Nach dem Publishing in ABlyft kann es kurz dauern, bis die neue Version ausgeliefert wird, siehe Cache Expiration.

Installation prüfenCopy Anchor Link

Prüfe mit den Checks unter Integration prüfen, ob das Snippet angefordert wird und läuft, oder folge dem Quickstart.