Loading the Convert tracking code async while preventing flashing

Issue

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 might aid on preventing flashing when loading the Convert snippet on async mode. This workaround would be to disable the sync loading and default body hide. 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.

To implement this you would need to add the following snippet to your  pages in the head tag:

<script>
(function(){ //the duration, in mili seconds, for which the body is kept hidden if Convert tracking code does not load.
var hideTimeout = 5000; //modify this to whatever you think it's suitable

var cssToHide = "body {position:relative;left:-10000px;background-image:none !important;background-color:#fff !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>

And additionally you would need to 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" src="//cdn-3.convertexperiments.com/js/10014852-10014302.js" async></script><!-- end Convert Experiences code -->

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.

Have more questions? Submit a request

Comments