External File Development

External File Development lets you develop experiment code in your own environment, for example in your IDE with a local dev server or a build pipeline, instead of pasting code into the ABlyft editor.

Variations of the type External Code don't contain code themselves. They point to external CSS, Reset JS and JS files. The ABlyft snippet loads these files whenever the variation is shown. Changes to your files are picked up on the next page load, without saving or publishing in ABlyft.

When you're done, you can convert the variation into a regular Code variation. ABlyft then copies the contents of the files into the variation.

SetupCopy Anchor Link

1. Enable the feature in the project settingsCopy Anchor Link

1. Open Project Settings → Integrations.
2. In the section External File Development, switch on Enable external file development.
3. Define a URL template for each file type:

Example:

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

A template must start with http://, https:// or a placeholder. Leave a field empty if you don't need that file type.

Available placeholders

Turning the toggle off hides the templates but keeps them saved.

2. Create a variation of type "External Code"Copy Anchor Link

Once the feature is enabled, External Code appears in the Create a new Variation dialog, right after Code. The type is only offered while the feature is enabled in the project. See Create a variation.

3. Check or adjust the URLs on the variationCopy Anchor Link

Open the variation. The section External Code shows three fields (JS URL, CSS URL, Reset JS URL), prefilled with the URLs built from the project templates.

• Edit a URL to use a different file for this variation. Placeholders are not allowed here, only complete URLs.
• Clear a field and save to not load that file at all. A cleared field stays empty. It is not refilled from the project template later.
• The prefilled URLs are saved with the variation when you save it. After that, changing the project template no longer affects this variation.

How the files are loadedCopy Anchor Link

When a visitor is assigned to an External Code variation, the snippet loads the files in this order:

1. CSS is added to the page.
2. Reset JS is loaded and executed.
3. JS is loaded and executed, but only after the Reset JS has finished loading.

If no Reset JS URL is set, the JS is loaded directly after the CSS. Fields without a URL are skipped.

With debug mode enabled, the snippet logs one line per loaded file together with its URL in the browser console, for example Loading external CSS, Loading external RESET JS and Loading external JS.

Convert to CodeCopy Anchor Link

When a variation is ready, you can turn it into a regular Code variation:

1. Open the External Code variation.
2. Click Convert to Code below the URL fields.
3. Confirm in the dialog.

ABlyft then fetches the three files and:

• changes the type to Code,
• stores the file contents in JS code, CSS code and Reset JS code,
• overwrites any existing code in these fields (an empty URL results in an empty code field),
• keeps the saved URLs, but no longer uses them.

If one of the files can't be fetched, nothing is changed and an error message tells you which file failed.

Requirements and limits

• The files are fetched by the ABlyft server, so the URLs must be reachable from there. Local or internal addresses (localhost, 192.168.x.x and similar) are rejected, except in a local development environment.
• The maximum file size is 1 MB per file. Redirects are not followed and the request times out after 10 seconds.

Turning the feature offCopy Anchor Link

If you disable External File Development in the project settings:

• Existing External Code variations keep working and are still delivered to visitors.
• The type External Code can no longer be selected for new or other variations.

Good to knowCopy Anchor Link

• Your files must be reachable from the visitor's browser while the experiment runs. For local development, that means the dev server needs to be running on the machine you're testing on.
• Use a URL that works over HTTPS if your site runs on HTTPS, otherwise browsers block the files as mixed content.
• Your dev server may need to allow cross-origin script requests. Plain <script> and stylesheet loading normally works without CORS headers.
• Before going live, convert the variation to Code, so the experiment doesn't depend on an external server.

Next stepsCopy Anchor Link