Requirements
What the ABlyft snippet needs from your website and from your visitors' browsers.
The snippet is a single JavaScript file without dependencies. This page lists what it needs to run, so you can check your setup, your security policies and your support targets.
Website
| Requirement | Details |
|---|---|
| Snippet in the page | One <script> tag with your project ID, ideally in the <head>. See Embed the snippet. |
| One snippet per page | A second ABlyft snippet on the same page logs a warning and does not start. |
| No build step | The snippet is loaded from the CDN. You do not install a package. |
| CMS and tag managers | Anything that lets you add a script tag or a Google Tag Manager tag is enough. Loading through a tag manager can cause flicker, see Embed the snippet. |
Browser
The snippet is delivered as modern JavaScript and is not converted to older language versions. It uses, among others:
- arrow functions, optional chaining (
?.), nullish coalescing (??) and logical assignment (||=) URLandURLSearchParamsMutationObserverandIntersectionObservernavigator.sendBeacon()to send eventslocalStorage,sessionStorageand cookies
Use a current version of a major browser (Chrome, Edge, Firefox, Safari, Samsung Internet). Old browsers that cannot parse modern syntax, such as Internet Explorer, cannot run the snippet.
The snippet does not use fetch. Events are sent with navigator.sendBeacon().
Network and Content Security Policy
If you restrict which domains your pages may contact (for example with a Content Security Policy), allow these:
| Domain | Used for | CSP directive | Needed |
|---|---|---|---|
https://cdn.ablyft.com | Loading the snippet (JavaScript) | script-src | Always |
https://log.ablyft.com | Receiving events and tracking payloads (sent with sendBeacon) | connect-src | Always |
https://assets.ablyft.com | Images | img-src | When your variations use images hosted by ABlyft |
https://editor.ablyft.com | Visual Editor (JavaScript, CSS and images) | script-src, style-src, img-src | Only while you edit a variation in the Visual Editor |
https://app.ablyft.com | API requests of the Visual Editor, and the quality assurance tool | connect-src | Only while you edit a variation in the Visual Editor or use the QA tool |
An example header for the always needed domains, to merge into your existing policy:
Content-Security-Policy: script-src 'self' https://cdn.ablyft.com; connect-src 'self' https://log.ablyft.com; img-src 'self' https://assets.ablyft.comTo use the Visual Editor on a site with a strict policy, also add https://editor.ablyft.com to script-src,
style-src and img-src, and https://app.ablyft.com to connect-src.
If your project uses a custom tracker URL or custom snippet location, the domains differ. Those settings are managed by ABlyft support.
Two further points matter for strict policies:
- The snippet runs the JavaScript of your experiments, variations, audiences and prerequisite rules with
evalandnew Function. A policy that forbids this (nounsafe-eval) prevents that code from running. - Variations add
<style>elements to the page, and the anti-flicker mode sets an inline style on the<html>element.
iFrames
By default, the snippet does not run inside an iFrame. If you want to test content in an iFrame, enable
Allow in iFrames under Settings → Project Settings → Project Activations Settings, and add the snippet to the page
inside the iFrame. Alternatively, set window.ablyftAllowIframe = true before the snippet loads, see
Window flags.
Bots
Visitors whose user agent contains words like bot, google, crawler, spider, robot, crawling or
facebookexternalhit are treated as bots. The snippet does nothing for them: they do not see variations and are not tracked.
Cookies and storage
The snippet stores a small amount of data in the visitor's browser, by default in localStorage. The storage is how ABlyft remembers which variation a visitor has seen. See Storage & privacy
for the full list.