Hiding a page until the experiment starts

To ensure that your site displays the experiment without any errors or source code flashing, configure the experiment to only render the page once the experimental changes are fully loaded.

To do this, add the following code to the beginning of the head section in the page's source code

<style>.varioqub-antiflicker {opacity: 0 !important;}</style>
<script>
    (function(a,n,t,i,f,li,c,k,e,r){
        a[t]=a[t]||function(){(a[t].a=a[t].a||[]).push(arguments)};n.classList.add(i);c=function(){n.classList.remove(i)};li.callback=c;a[t].antiFlicker=li;setTimeout(c,f);
    })(window, document.documentElement, 'ymab', 'varioqub-antiflicker', 4000, { 'metrika.XXXX': true });
</script>

where

• XXXX is the ID of the Yandex Metrica tag installed on your site.

• varioqub-antiflicker is the name of the class used to hide the html element.

• 4000 is the experiment's maximum load waiting time in milliseconds.

Upon loading the experiment, the varioqub-antiflicker class is removed from the page's code.

You can change the following settings:

• Varioqub-antiflicker class name. For example, this can be useful if the class is already defined in CSS. Change the name in the style property and in the argument at the end of the fragment.

• Waiting time. For example, you may want to increase this value if most users browse your site from mobile devices or when the internet connection is slow.

• Number of tags included in the experiment. Code example:

  { 'metrika.XXXX': true, 'metrika.YYYY': true }
  

  If you're using multiple tags, Varioqub waits for experiments to load for all the listed tags.

  If an experiment isn't invoked for one or more tags, it gets loaded after the maximum waiting time is reached. In this case, the experiment counts towards the tag where it was invoked successfully.