ab-testingvwo

Eliminate VWO Flash of Original Content (FOOC)

When using the VWO ab/editor you have the option of editing both the css and js of the page. If you do edit the css/js of the page you will probably see a FOOC when testing out the a/b test. Obviously this is not ideal for the end user. What can you do to avoid FOOC when using VWO?

Solution

  • You can eliminate FOOC in VWO by

    1. Click on the element that you are changing, selecting it's immediate parent with the select parent button.vwo editor

    2. From here you will push the HIDE button of the immediate parent.

    3. Now you will repeat steps 1 and 2 but push the SHOW button of the immediate parent.

    VWO will now add javascript that looks a little like this

    vwo_$("immediate-parent-of-changed-element").css({"visibility":"visible"});

    This javascript snippet ensures that the parent of your changed element will not appear until the your changes have been made, eliminating FOOC.