Loading the Convert tracking code async while preventing flashing

This Article Will Help You:

• Overview
• Solution
• Solution for Beta tracking script users

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.

Solution for Beta tracking script users

The following snippet needs to be used if you are using the new beta tracking script:

<script>
  (function () {
    var style = document.createElement("style");
    style.id = "convert-hide-body";
    style.setAttribute('data-convert', '');
    style.textContent =
      'body{position:relative;overflow:hidden}body::after{position:absolute;top:0;bottom:0;left:0;right:0;content:"";background:#fff;z-index:2147483647}';
    document.head.appendChild(style);
    var hideTimeout = 500; //modify this to whatever you think it's suitable
    setTimeout(function () {
      if (document.getElementById("convert-hide-body"))
        document.getElementById("convert-hide-body").remove();
    }, hideTimeout);
  })();
</script>