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):
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.
<!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.io/s/12345678.js"></script> <!-- more scripts and other information --> </head> <body> ...
Where to find the Snippet?
You find the snippet under "Project > Snippet".
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".
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.
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.io/s/12345678.js"></script>