General Usage

If you write the JavaScript code (experiment or variation), you have the possibility to use the ablyftTools. They make life easier for you as a developer of A/B tests in many places.
You can use the ablyftTools in the code editor or in your own scripts - e.g. if you work on a local copy of a page or create your A/B tests with Tampermonkey.
You can always access the tools where the ABlyft snippet was loaded before.

Here's an example - even if it probably doesn't happen that way.

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

      <!-- Your dev Script -->
      <script>
         var ablyftTools = window.ablyft.getTools();
         ablyftTools.domChanged(function(){
            console.log('Dom ready');
         });
      </script>

      ...


Single Page Application Helpers

ablyftTools.waitForElement

With ABlyft you have the possibility to wait for elements that are ready either directly after loading the page or at a much later time.
The DOM is permanently monitored via MutationObserver. If new elements of a CSS selector are stored in the DOM (e.g. loaded via AJAX or created via JavaScript), the callback function is executed directly.
The callback function call contains a NodeList like Array with the elements/nodes that were found.
It uses querySelectorAll for this purpose with the scope on the new elements.

Example

<!-- HTML Example -->
<ul id="myList">
    <li>Default Item 1</li>
    <li>Default Item 2</li>
    <li>Later inserted Item ()</li>
</li>

//Wait for the later inserted Item
var ablyftTools = window.ablyft.getTools();
ablyftTools.waitForElement('#myList > li', function(element){
    //In the example, we color the border red
    element.style.border = "1px solid red";
});

ablyftTools.domChanged

With this helper you can execute code whenever the DOM has changed.
It is based on the MutationObserver.

//Wait for the DOM to be changed
var ablyftTools = window.ablyft.getTools();
ablyftTools.domChanged(function(){
    console.log('DOM was changed');
});

ablyftTools.elementIsInView

With this helper you can execute code whenever an DOM element is completely in the viewport.
The default is that the callback is triggered once. 

IMPORTANT: It is based on the MutationObserver. If you expect visitors using the Internet Explorer (before Edge), please provide a polyfill:
https://github.com/w3c/IntersectionObserver/tree/master/polyfill#browser-support

//Wait for the DOM element to be completely visible in the viewport
var ablyftTools = window.ablyft.getTools();

//Trigger ONCE for the selected elements
ablyftTools.elementIsInView('#myList > li', function(element){
    console.log('Element viewed', element);
});

//Trigger EVERY TIME for the selected elements
ablyftTools.elementIsInView('#myList > li', function(element){
    console.log('Element viewed', element);
}, true);


Did this answer your question?