Understand the Code Editor Area
The Code Editor Area
You will find the "Code Editor" area in the visual editor of the test creation process (see screenshot).
Rewrite JS
Basically the Variation code that is placed in the Code Editor area is pure Javascript code written in English (UTF-8). You can find in there a variable called convert._$ which is a reference to the jQuery library we load but slightly modified as follows:
convert._$ is a jQuery reference modified in such a way so that the variation code can be executed multiple times while the page is still loaded. We execute the code every 50 ms until there's nothing left inside the code that seems to need processing. Let's have an example to understand how it works:
convert._$("a.login").text("Login here");
convert._$("a.loginFooter").text("Login");
We would execute this code immediately as our script finishes loading. It's very likelly that's in the very beginning of the page load when not all the page was rendered yet. Let's suppose, at the moment of first run, the a.login is available but a.loginFooter is not available. The effect of the code would be that the text of the a.login link would be changed to "Login here".
After another 50 ms, we run the code again since there's one element that was not found. This time, the a.loginFooter is available and its text is changed to"Login"; the a.login is not changed again since it was changed before.
As can be noticed, we wrapped the jQuery library into our own convert._$ function so that we can intercept the elements look-ups and know when the code"finished executing".
This allows us to run the code and change the elements without waiting for the DOM ready (which would ensure everything was loaded) since that takes time and users would experience a flicking effect (old version visible and then swapped with new version).
Note: The unmodified jQuery is also available under the name convert.$
It's important to consider the above when writing custom code inside the Variation Code. It needs to be written in such a way so that, if it's executed multiple times it does not do any harm. Two things you can do to make sure this is true:
1) write the code such that executing multiple times has no side effect. Example: convert.$("h2.test").after("<p>after</p>") ; this would add a paragraph afterh2.test. Executing this multiple times will keep adding paragraphs which is not intended.
2) wrap all the code in either of:
a)
convert.$(document).ready(function(){ //code here });
this might generate a visible flicking effect for the visitor though to where they first see original and then the variation swapping;
b)
if(convert._$("deep_DOM_element").length > 0) { //code here
where deep_DOM_element is a jQuery selector for an element deep enough in the DOM hierarchy so that, when found, all the other elements referred by the code would be also available. Doing this, the code will be basically executed as soon as the element tested for would be found, without waiting for DOM ready which, in many cases, could be delayed quite a lot.
Javascript code can also be "attached" to a variation using the "Custom Javascript" menu item under the variation menu. That code is executed ONLY ONCE, as soon as the Convert tracking code finishes loading, which will have in most cases the same effect as having that JS code inserted in the same location Convert code exists on site.
Comments