Overview
It is possible that because of performance reasons you may not want to load the Convert snippet in sync mode. However, this may cause flashing due to the fact that the page elements may load before the Convert snippet is loaded and run.
Solution
This is a method that will aid in preventing flashing when loading the Convert snippet on async mode. This workaround would be to disable the sync loading and default body hides. This while hiding the body for a determined period of time. It would prevent the Convert script from stopping the rest of your page loading while the Convert snippet loads.
Modify the Convert tracking code to load async, by adding the "async" parameter to the script tag.
<!-- begin Convert Experiences code--><script type="text/javascript" async src="//cdn-3.convertexperiments.com/js/10014852-10014302.js"></script><!-- end Convert Experiences code -->
Add the following snippet to just after your tracking code:
<script>
(function(){
//disables the automatic body hiding of the convert script var _conv_prevent_bodyhide = true;
//the duration, in mili seconds, for which the body is kept hidden if Convert tracking code does not load.
var hideTimeout = 500; //modify this to whatever you think it's suitable
var cssToHide = "body {visibility: hidden !important;}",
headElement = document.head || document.getElementsByTagName("headElement")[0],
styleElement = document.createElement("style");
headElement.appendChild(styleElement);
styleElement.type = "text/css";
styleElement.id = "convert_hide_body";//do not change this
if (styleElement.styleSheet){
styleElement.styleSheet.cssText = cssToHide;
} else {
styleElement.appendChild(document.createTextNode(cssToHide));
}
setTimeout(function() {var c_h = document.getElementById("convert_hide_body"); if(c_h) c_h.outerHTML = "";}, hideTimeout)
})();
</script>
This might work in most cases, but you might run on to race conditions getting a flash then.
The only guaranteed way to not flashing in most cases is to load the tracking code in sync mode.
Comments