Implement the Snippet

Implement the JS snippet representing your project

To start running A/B tests on your website, all you have to do to is adding a snippet of JS code to the <head> tag of your site's html code.
This JS snippet contains the unique ID of your project.
It automatically updates when you change relevant data on the platform. Once installed you don't have to change it again.

On this page

This is how you snippet looks like (here with Project ID 12345678): 

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

Where to implement the Snippet?

The snippet needs to be installed in the <head> section of the page, before any other loaded resource. We recommend to place it after the <title> tag.
Example: 

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

Where to find the Snippet?

You find the snippet under "Project > Snippet".

ablyft-project-snippet-implementation

Synchronous vs. asynchronous Implementation

Synchronous code runs in sequence. This means that each operation must wait for the previous one to complete before executing.
Asynchronous code runs in parallel. This means that an operation can occur while another one is still being processed.

On the one hand, in A/B testing it is intended that a change is displayed immediately when the page is loaded and that there is no so-called "flickering" (the "old version" of the page is visible for a short time before the change is applied). Preventing flickering is an advantage of the synchronous implementation.

On the other hand, the best possible performance of the website is important. Even if this is more about scoring (e.g. PageSpeed score), many companies are very concerned about this topic. An asynchronous implementation ensures that the snippet is no longer considered "render blocking".
More info:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async

With ABlyft it is possible to use both types of implementation. Also, the compromise to be made is not large due to the very fast loading time of the snippet.

Asynchronous Implementation

This is how you snippet looks like (here with Project ID 12345678) for asynchronous implementation.
The difference to the "normal" implementation here is the async attribute, which must be present. 

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