External File Development

Mit External File Development entwickelst du Experiment-Code in deiner eigenen Umgebung, zum Beispiel in deiner IDE mit einem lokalen Dev-Server oder einer Build-Pipeline, statt Code in den ABlyft-Editor einzufügen.

Variations vom Typ External Code enthalten selbst keinen Code. Sie verweisen auf externe CSS-, Reset JS- und JS-Dateien. Das ABlyft-Snippet lädt diese Dateien, sobald die Variation ausgespielt wird. Änderungen an deinen Dateien werden beim nächsten Seitenaufruf übernommen, ohne dass du in ABlyft speichern oder publizieren musst.

Wenn du fertig bist, kannst du die Variation in eine reguläre Code-Variation umwandeln. ABlyft kopiert dann den Inhalt der Dateien in die Variation.

EinrichtungCopy Anchor Link

1. Das Feature in den Project-Einstellungen aktivierenCopy Anchor Link

1. Öffne Project Settings → Integrations.
2. Schalte im Bereich External File Development die Option Enable external file development ein.
3. Lege für jeden Dateityp ein URL-Template fest:

Beispiel:

JS:       https://external-dev.com/{teamID}/{projectID}/{experimentID}/{variationID}.js
CSS:      https://external-dev.com/{teamID}/{projectID}/{experimentID}/{variationID}.css
Reset JS: https://external-dev.com/{teamID}/{projectID}/{experimentID}/{variationID}-reset.js

Ein Template muss mit http://, https:// oder einem Platzhalter beginnen. Lass ein Feld leer, wenn du diesen Dateityp nicht brauchst.

Verfügbare Platzhalter

Wenn du den Schalter ausschaltest, werden die Templates ausgeblendet, bleiben aber gespeichert.

2. Eine Variation vom Typ "External Code" erstellenCopy Anchor Link

Sobald das Feature aktiviert ist, erscheint External Code im Dialog Create a new Variation, direkt nach Code. Der Typ wird nur angeboten, solange das Feature im Project aktiviert ist. Siehe Eine Variation erstellen.

3. URLs an der Variation prüfen oder anpassenCopy Anchor Link

Öffne die Variation. Der Bereich External Code zeigt drei Felder (JS URL, CSS URL, Reset JS URL), die mit den aus den Project-Templates gebildeten URLs vorausgefüllt sind.

• Ändere eine URL, um für diese Variation eine andere Datei zu verwenden. Platzhalter sind hier nicht erlaubt, nur vollständige URLs.
• Leere ein Feld und speichere, damit diese Datei gar nicht geladen wird. Ein geleertes Feld bleibt leer. Es wird später nicht wieder aus dem Project-Template befüllt.
• Die vorausgefüllten URLs werden beim Speichern mit der Variation gespeichert. Danach wirkt sich eine Änderung des Project-Templates nicht mehr auf diese Variation aus.

Wie die Dateien geladen werdenCopy Anchor Link

Wird ein Visitor einer External Code-Variation zugewiesen, lädt das Snippet die Dateien in dieser Reihenfolge:

1. CSS wird der Seite hinzugefügt.
2. Reset JS wird geladen und ausgeführt.
3. JS wird geladen und ausgeführt, aber erst, nachdem das Reset JS fertig geladen ist.

Ist keine Reset JS URL gesetzt, wird das JS direkt nach dem CSS geladen. Felder ohne URL werden übersprungen.

Ist der Debug Mode aktiviert, schreibt das Snippet pro geladener Datei eine Zeile mit ihrer URL in die Browser-Konsole, zum Beispiel Loading external CSS, Loading external RESET JS und Loading external JS.

In Code umwandelnCopy Anchor Link

Wenn eine Variation fertig ist, kannst du sie in eine reguläre Code-Variation umwandeln:

1. Öffne die External Code-Variation.
2. Klicke unter den URL-Feldern auf Convert to Code.
3. Bestätige im Dialog.

ABlyft lädt dann die drei Dateien und:

• ändert den Typ auf Code,
• speichert die Dateiinhalte in JS code, CSS code und Reset JS code,
• überschreibt vorhandenen Code in diesen Feldern (eine leere URL ergibt ein leeres Code-Feld),
• behält die gespeicherten URLs, verwendet sie aber nicht mehr.

Kann eine der Dateien nicht geladen werden, wird nichts geändert und eine Fehlermeldung nennt dir die betroffene Datei.

Voraussetzungen und Grenzen

• Die Dateien werden vom ABlyft-Server abgerufen, daher müssen die URLs von dort erreichbar sein. Lokale oder interne Adressen (localhost, 192.168.x.x und ähnliche) werden abgelehnt, außer in einer lokalen Entwicklungsumgebung.
• Die maximale Dateigröße beträgt 1 MB pro Datei. Redirects werden nicht verfolgt und die Anfrage bricht nach 10 Sekunden mit einem Timeout ab.

Das Feature ausschaltenCopy Anchor Link

Wenn du External File Development in den Project-Einstellungen deaktivierst:

• Bestehende External Code-Variations funktionieren weiter und werden weiterhin an Visitors ausgespielt.
• Der Typ External Code kann für neue oder andere Variations nicht mehr ausgewählt werden.

Gut zu wissenCopy Anchor Link

• Deine Dateien müssen aus dem Browser des Visitors erreichbar sein, solange das Experiment läuft. Für die lokale Entwicklung heißt das: Der Dev-Server muss auf dem Rechner laufen, auf dem du testest.
• Verwende eine URL, die über HTTPS funktioniert, wenn deine Website über HTTPS läuft. Sonst blockieren Browser die Dateien als Mixed Content.
• Dein Dev-Server muss unter Umständen Cross-Origin-Script-Anfragen erlauben. Das normale Laden von <script> und Stylesheets funktioniert in der Regel ohne CORS-Header.
• Wandle die Variation vor dem Livegang in Code um, damit das Experiment nicht von einem externen Server abhängt.

Nächste SchritteCopy Anchor Link