Code Editor

The new Visual Editor gives you multiple ways to add custom code to your experiments, whether you want the code to apply to all variations in the experiment or just one.

You can add and edit this code using the Code Editor. It gives developers a code-first path that does not require loading the Visual Editor. You can write your JavaScript and CSS, then preview the result on your live site.

The Code Editor and the Visual Editor operate on the same variation. Switching between them does not create separate copies of your changes, and the code you save in one editor is available in the other.

The Code Editor is available to users with the Editor, Administrator or Project Owner role on the project.

Open the Code Editor

You can open the Code Editor in the following ways:

• From the Variations page – Select your experiment or campaign. Go to Design > Variations, find the variation you want, and click Code Editor in that variation's row.

• From the left navigation – Select your experiment or campaign. Go to Design > Code Editor to open the dedicated Code Editor page and switch between variations and shared code without leaving the editor.

  

• From the Visual Editor – While editing a variation, click Code Editor to open the code for that variation.

  

To learn more, see Custom code.

Choose what you are editing

The Code Editor page uses drop-down lists to control which code you are editing. Web Experimentation shows two drop-down lists. Personalization shows a third drop-down list for the experience.

• Edit code for – Choose All Variations to edit shared code that runs across every variation, or choose a specific variation (for example, Original or Variation #1) to edit code that applies only to that variation. Click + Create new variation to add a variation without leaving the editor.

  

• on Page Rule – If the experiment targets more than one page, choose the page (URL targeting) rule the code runs on. Optimizely saves the code for the selected page, so a variation can run different code on different pages.

• Experience (Personalization only) – Choose the experience whose code you want to edit.

  

Use the JavaScript and CSS tabs to switch between the two code types. A counter next to each tab label shows how many changes are applied for that type.

Custom code for a variation

Optimizely Web Experimentation lets you use custom JavaScript or CSS code to make changes to your site and extend your testing capabilities beyond Optimizely's standard toolkit. With the Code Editor, you can:

• Execute your custom code only for visitors bucketed into a particular variation instead of all visitors.
• Use CSS selectors to change multiple similar elements simultaneously instead of making individual changes.
• Load an external JavaScript file as part of a variation, such as to add an Olark or ClickDesk widget. You cannot add code that includes a <script> tag using the Edit HTML feature in the Visual Editor, but you can paste external JavaScript into the <Edit Code> box. Optimizely executes your custom JavaScript by appending it as a <script> tag to the body of your page.

Custom code for all variations (shared code)

To add code that runs across every variation, set Edit code for to All Variations, then enter your JavaScript or CSS. Shared code runs when a visitor is assigned to any variation. You can use it for logic that every variation needs, such as sending experiment data to an analytics service or defining reusable functions.

Shared code is the same as the Shared Code page within the experiment. Any code you save and apply as All Variations is automatically added to the Shared Code page, and any change on the Shared Code page appears here.

See Shared code: Run custom JavaScript and CSS across all variations for more.

Write and save code

The editor provides line numbers, syntax highlighting, and standard editing shortcuts such as find and replace.

When you finish, click Save & Apply, then click Confirm.

To discard unsaved edits and return to the last saved version, click Revert to Saved.

Set the code timing

Variation code runs when a visitor is assigned to a variation, often before the DOM is ready. To control when a change runs, use the timing drop-down list. It applies to both variation code and shared code, and has two options:

• Synchronous – Includes the change inside the snippet and applies it before the page is visible. Use it for lighter changes that need to run right away without flashing, such as a headline swap.

• Asynchronous – Downloads the change after the snippet and applies it while the page loads. Use it for heavier changes where a delay is not noticeable, such as a pop-up or a section below the fold.

  

Synchronous is the default. To fine-tune timing in code, use Optimizely's utility functions or jQuery.

Insert a utility function

Click Utilities to open Optimizely's Web Experimentation JavaScript utilities, such as waitForElement and observeSelector. Use the panel to add a commonly used function to your code without leaving the editor. For the full reference, see the Optimizely Web Experimentation utilities.

Copy code

Click Copy Code to copy the current tab's code to your clipboard, for example to reuse it in another variation or to paste it into an external editor.

Preview your changes

Click Preview to check your changes on your target page before you start the experiment. The preview opens the variation you are working on.

To share the preview with external users, click Share Preview.

Choose the variation to preview and then click Share Link to get a link you can share with others.

To open the target page with your draft code applied, click Preview. You can also scan the QR code to preview the variation on a mobile device.