Configuration
      Back to home
      1. Help Center
      2. Configuration

      Loading the Convert tracking code async while preventing flashing

      This Article Will Help You:



      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>