What is flicker and why it can happen
Usually, Flickering has two main causes:
- the moment where the script is loaded and executed happens too late, when the browser has already displayed the page (or parts of the page). This is directly dependent on how Kameleoon has been implemented on your website. If Kameleoon loads too late or in a Tag Management System, nothing can be done to avoid flickering.
- the engine processing the experiment's variations is too slow, or rather, do not execute and display modifications fast enough.
How to remove flicker in your experiments
To eliminate flickering due to the first reason, you need to implement either our synchronous tag or our asynchronous tag with anti-flicker prevention. These two methods guarantee that Kameleoon's code will be executed before any rendering of the page by the browser.
In the case of synchronous loading, this is guaranteed automatically as long as the tag is included in the HTML
<head> section, since the browser will not display anything until the Kameleoon application file is downloaded and executed. However, loading any resource in a blocking way is not a good practice, and thus do not recommend this implementation method, but rather recommend implementing our asynchronous tag with anti-flicker prevention.
Technically, we include a "blocking CSS rule" hiding the entire page's contents and we remove this rule as soon as Kameleoon's application code has been loaded (less than 50ms on average), OR if the specified time out is reached (default at 1000ms), to prevent showing a blank page indefinitely, if the Kameleoon application file is still not loaded. This way, we guarantee that in no circumstances can Kameleoon ever bring your website down.
The timeout is controlled by the
What happens in the case of a timeout, once the Kameleoon code eventually loads, is up to you and is configurable in the advanced confirmation setting of your Kamleeoon project. You can either disable Kameleoon entirely (when a timeout occurs, no experiments or personalizations will be run for this particular visitor), or you can run Kameleoon's code normally (but since it will run late, flickering will occur). Note that if you don't change the default timeout value and under normal conditions (correct Internet speed), timeouts should be rare (2-3% of your visitors).
Kameleoon.API.Core.runWhenElementPresent()), NOT via hand-coded pollers or other custom code.
Kameleoon.API.Core.runWhenElementPresent(). This has two important benefits: first you ensure that the code will be run at the exact right time, not before the elements are present in the DOM (which can of course lead to unexpected effects if your code is not carefully written). Second, you remove any risk of flickering effects.