In my AB testing Framework I have a method that creates DOM nodes, sets their properties and attributes, and adds them to the DOM for me. Since in 90% of all the tests we run, we need one or more custom elements, I decided to create a function that does all that for me. The requirements were: create (one or more) DOM Element(s) by configadd attributes to element (class, style, innerText/ -HTML, and even events like onclick)insert element in DOM relative to a target, or … [Read more...] about Adding DOM Elements LIKE A BOSS
JavaScript
My Secret to Super Fast AB Test Loading
When I am testing elements that take some time to load, the last thing I want is a flash of un-styled content, or see the unchanged element jump into its changed state. Since a few years, browsers have a great API built in that I use to achieve super fast loading of my test code: Mutation Observer. (link opens new tab) In this post I'll explain how I use this API to my advantage. Make sure your script is loaded as soon as possible. It's OK if you load it asynchronously, … [Read more...] about My Secret to Super Fast AB Test Loading
Notify Enter Viewport the proper way: Intersection Observer.
In previous articles I have written about how to track elements when they enter or leave the browsers viewport. The reason why you might want to track this is when you are doing a test on an element that is outside the viewport on page initialisation, you don't want to count this as a visitor immediately but only when the element is scrolled into view. If the (changed) element is seen by the visitor, you fire an event, not before. In the past I accomplished this by using … [Read more...] about Notify Enter Viewport the proper way: Intersection Observer.
Notify Enter Viewport
Sometimes we are testing a page element or component that, when the page has loaded, lies outside of the viewport. This has the simple consequence that you should not count this page load as a visitor to your test. Only when the element you are testing scrolls into view, the visitor can be added to your test. To accomplish this, we needed some code that keeps track of the elements position on the page with regard to the page's dimensions. This one still relies on jQuery, … [Read more...] about Notify Enter Viewport
AB Test jQuery Performance Cheat Sheet
If you write AB tests with jQuery you have to make sure you write your code as optimised as possible. Every millisecond you shave off results in less chance of unwanted repaint or reflow flickers. Update: Tip number 1: Do NOT use jQuery! Why wait for a library to load, when vanilla JS nowadays does everything jQuery does - but faster. Use Faster Selectors. Know which selectors perform the fastest to optimise your code! Use Caching. Basically every time you … [Read more...] about AB Test jQuery Performance Cheat Sheet
Track That!
This function tracks every event with all its attributes in the div that's set in the caller function. Handy if you need custom tracking for your AB test. … [Read more...] about Track That!