This article is meant to explain each of the different Code Editors within the Convert app and remove any confusion about them. After reading this, you will be able to differentiate between them and be able to decide where your code should go, to be able to show the changes on your experience as you desire.
There are 5 different editors in the Convert App that we will describe next:
1) Code Editor
You can find this within the Visual Editor > Variation n (Variation Menus) > Code Editor. There is one in each of the variations menus.
In this editor, you can add code that takes advantage of our Smart Insert Convert technology (convert._$). You can read about it, in this article.
Also, this is where the WYSIWYG Visual Editor functions fill and create code according to the changes created by the user. So, here you can access them and modify them if you need to.
2) Custom CSS Editor
You can also find this in the Visual Editor > Variation n (Variation Menus) > Custom CSS.
This editor is to insert plain CSS that will be appended to the web page when the visitor is assigned that specific variation.
CSS is more persistent than changes included in the other editors, as CSS rules are permanent, and are not a victim to race conditions.
Whenever, CSS code is appended, but not working, you can append !important, to supersede all other rules already included in the page.
However, the code inserted in this section needs to consider that this is executed before the elements of the page have loaded. So, you either have to insert a special code to deal with this or execute after document.ready or DOM Loaded, which might bring flashing or blinking. It is easier to just use convert._$ in the Code Editor section as described in that section.
4) Global Experience JS
This can be found on the Visual Editor > Cog/Gear Icon > Global Experience JS section.
Code Call Order (Priority)
- Global Experience JS
There is also a code calling order based on the experiment id for the code within each experiment. Code from experiments with lower experiment's id is called first, later experiment code with higher ones.