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.
JavaScript
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! // ID selector - very fast … [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. var trackThat = function() { var t = {}, r = {}, a = window.event ? window.event.srcElement : i.target, c = document.getElementsByTagName(a.tagName), k = ""; try { for (var d = 0; d < c.length; ++d) c[d] == a && (r.tag = a.tagName, r.index = d, r.text = … [Read more...] about Track That!
A smarter console.info
Here is a little piece of code you can use in your project for slightly smarter console messages. Objects and arrays are handled differently when logged to the console than strings. Firebug gives you a stringified version of the object while console.dir gives you an expandable object. Both give you the expandable object in Chrome. To work around this you can use this little snippet, it will always give you the correct version. var debug = function(message) { "object" … [Read more...] about A smarter console.info