This article will help you:
  • Create variations directly using jQuery or JavaScript
  • Make simple tweaks to variation code (for non-technical users)
  • Change many similar elements at once
  • Load external JavaScript into a variation

The Code Editor in a nutshell

The Code Editor allows you to edit your variation code directly. With a little jQuery, you can exercise more control over the changes you make. For example, you might use the Code Editor to modify multiple similar elements at once, or add your own JavaScript elements.

​Key tips

What to watch out for

  • If your variation code exceeds 200 lines, consider creating a redirect test or minifying your code instead
  • jQuery selectors should work across different browsers, but be sure to test that all jQuery methods are supported by the jQuery library you're using (listed under Project Settings)
  • QA all custom-built functions to ensure expected behavior
  • QA your variation code to ensure that the changes you make render properly across different browsers and operating systems  

The Optimizely Visual Editor works by translating basic changes in your variations into JavaScript code -- specifically, a library called jQuery. You can also make changes directly in the Code Editor by tweaking the variation code or adding your own jQuery or JavaScript.

Want to see the Code Editor in action? Watch this short video.

Tip:

Did you know that you can also run JavaScript or CSS at the experiment level, across all variations? Check our our Experiment JavaScript and CSS article to learn more.

Additionally, select Enterprise users can use Project JavaScript to insert custom JavaScript at the project level that runs before Optimizely experiment code, without having to make direct changes to your site's code.

How does the Code Editor work?

Every time you make a change in the Optimizely Editor, Optimizely creates a line of jQuery code that finds the selected element, and then makes the changes you selected in the Editor. You can see (and edit) this code by clicking <Edit Code> in the lower-right-hand corner of the Editor, which pops open the Code Editor (also known as a "code store"). You can create changes directly in the <Edit Code> box using JavaScript or jQuery.

Changes will not show up until you click Apply. Clicking Cancel will remove any changes made directly to the <Edit Code> section after the last time you either clicked Apply or made changes outside of the <Edit Code> section.

 
Note:

The Code Editor can store almost 1,000,000 lines of code (996,960 to be exact). But try to keep your variation code as trim as possible, because thousands of lines of code may cause your page to load more slowly.

Making simple tweaks with <Edit Code>

You don’t have to be an expert in JavaScript or know what jQuery is in order to get some value from the Code Editor. With the Optimizely Editor open, try clicking the blue “Edit Code” link () in the lower right of your browser window. This box contains all your variation code, translated from the changes you’ve made in the Visual Editor into lines of jQuery.

Every change you make in the Visual Editor appears in the code in the order that you create it. In other words, the <Edit Code> box is like a “log” of all the changes you’ve made so far on the page. This means you can not only tweak changes you’ve made previously, but also remove changes you didn’t like altogether.

Similarly, the lines of jQuery will execute top to bottom in the edit code "log." We recommend making changes to your page from top to bottom to ensure the fastest execution for this code.

jQuery always has the format, “$("some_selector").do_something()”. If you mouse-over in the code box the part with the $(" "), the Optimizely visual editor window up top will attempt to show you what the code is referring to with a blue box surrounding the element.

For example, if you use Move and Resize tool to move an element a few pixels in one direction, you might see the following variation code:

$(".hero > h1").css({"position":"relative", "left":"24px", "top":"15px"});

You can actually go into the code and tweak the number of pixels that define the movement next to “top” and “left” in order to make adjustments. Just click Apply after making your changes to preview them!

Similarly, any other change you make in the Editor can be tweaked in the same way. This includes CSS changes that are made with the Edit Style tool.

If you're interested in learning more about jQuery and how to use it in Optimizely, see our jQuery tutorial.

Undoing changes with <Edit Code>

Optimizely records every change you make in sequential order. For some changes, like Edit Text and Edit HTML, Optimizely will consolidate some previous changes that have been made, if you're trying to overwrite them.

Specifically, Edit Text overwrites previous Text (Edit Text) changes to the same element (selector) and Edit HTML overwrites previous HTML (Edit HTML), Text (Edit Text), CSS (Edit Style) and Attribute (Edit Hyperlink) changes to the same element (selector).

However, Optimizely won't do this for every change you make, such as Move and Resize or Rearrange changes. So, for example, if you move a page element to the left and move it back to the right, Optimizely will write a line of code for each of those actions. Adding too many duplicative lines of code can clutter up your variation code and eventually add to your snippet size after thousands of lines.

If you find yourself moving an element but don’t quite like its final location, we recommend clicking Undo and retrying your change.

You can also try looking at the <Edit Code> box and adjusting your most recent change, directly in the code. If you’re just adjusting by a few pixels here and there, this is a perfect type of change to make in the code. For an element movement, adjust the “top”: or “left”: numbers in the variation code. You can also tweak size changes in a similar way using “height”: and “width”:. Just click Apply after you’ve made your changes in the code to preview the results in the Editor.



If you make a mistake, don’t panic! You can always remove the offending changes from the code by deleting them.



In Optimizely, the Undo feature can be found in the upper right (or the 'Z' key) below the Start/Pause button. Just remember that your variation code works almost like a log of all the changes you’ve made in the Visual Editor. Just open the Edit Code link in the lower right, and scroll to the bottom. As an alternative to Undo, you can just delete lines of code from the bottom up if you want to roll back your changes. If you know exactly which line of code you want to remove, you can always just jump right in and take it out.

Removing old code is a lot better than trying to make a second change in Optimizely trying to change an element back to its approximate original state. If you have changes that go from A -> B -> A, all that variation code that defines A->A will just be in your variation code, and it will execute when your experiment goes live. The cons of leaving this extra code in include increasing the possibility of page flashing and making it more difficult to debug problems with your variation code. Take out this extra step and just delete the variation code that changed A -> B in the first place.

Changing multiple, similar elements at once

If you have many similar elements on a certain page and don't want to change them all individually, you can use <Edit Code> to make this type of change.

With a little knowledge of CSS selectors, it’s easy to change to several similar elements at once. 

To try this process out, open the Optimizely Editor, click on one of the elements you want to change, and make the needed modification. In this example we'll change some text color to red by setting the "color" to "#ff0000" in the Edit Style menu. 

Click <Edit Code> and you will see a line of code that looks like: `$(“event-88810.closing.clock”).css({“color”:” #ff0000”});`

 
Note:

Your actual values will be different from this example.

The ID #event-88810 is unique to the particular element you selected. To confirm this, if you test the selector $(“#event-88810.closing.clock”) in a browser developer console, you will see that it returns only one element (screenshot below)