Skip to main content
menu_icon.png

Hey, Optimizely X users! Don't waste time looking for resources about Optimizely X Web Experimentation. We've got them for you here

x
Optimizely Knowledge Base

The Visual Editor and custom code in Optimizely X

This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization

THIS ARTICLE WILL HELP YOU:
  • Create variations or experiences in the Editor
  • Target a group of visitors according to behavior, custom attributes, or standard attributes like language or device type 

The Optimizely X Editor quickly loads your website and enables you to change the visitors' experience using our visual editor or powerful custom code options.

Here's what the Editor looks like:

Screen Shot 2016-10-04 at 10.06.09 AM.png

Often, you'll edit multiple variations or experiences. Use the variations dropdown menu to toggle between different variations (in Optimizely X Web Experimentation) or experiences (in Optimizely X Web Personalization).

Page not loading in the Editor? Try loading it in the Pop-Out Editor. If you're still having problems, read about troubleshooting Editor loading issues.

Change the page that loads in the Editor

When you enter the Editor, you'll see the page you're editing.

At the top of the Editor, you'll see the name and URL of the page that the Editor has loaded. These are the same pages that you set up when you implement Optimizely X.

You may want to change the page that loads in the Editor, so that you can edit a different element on your site. To do that, follow these steps:

  1. Click the bar with the name and URL of your page, then click View.

  2. In the Configure Page screen, you will see something different depending on whether your page type is a single URL, or a set of URLs.

    For single URLs, you can change the URL field. This will change the page in every experiment that it's used, so if you're using this page in multiple experiments, we recommend creating a new page instead of changing it.


    For A set of URLs or Global page types, you can change the Editor URL field. This will only affect which page displays in the Editor; not the actual URL targeting of your page as it displays to visitors.

For Single URL pages, changing the URL on the Configure Page screen will change the targeting of the page wherever it's used. If you're using this page in other experiments or campaigns, it can affect the targeting of those experiments.

Add pages for a multi-page experiment

To create a multi-page experiment, click Add Page in the dropdown menu to add an existing page or create a new one. This way, you can create different experiences on each page within the same campaign.

When making visual or custom code changes to a multi-page experiment, first select the page you're editing from the dropdown to ensure that your changes are applied correctly.

Read more about multi-page funnel experiments.

We recommend that you create new pages in the Implementation section of Optimizely X, when possible. Pages are reusable across experiments and campaigns, so setting them up in Implementation lets you set the URL targeting and track reusable events and tags every time you use the page.

The Visual Editor

Create visual changes in the Editor by selecting an element on your page, then using the options in the menu on the left.

image05.png

Select an element

Sometimes, the element you want to select is difficult to access via a click, or you want to select multiple elements.

Modify the selector, as shown below:

image07.gif

To interact with your page, use the interactive mode () icon to switch the editor mode to interactive mode. Use this to: 

  • Close a dialog modal
  • Open a navigation bar

This disables the Editor's element selector functionality, so you can interact with your page.

Visual editing options

To begin editing, click Create in the left-rail.

The Editor allows you to modify many of the HTML and CSS properties of your site. Your options for visual changes are:

  • Edit Text and HTML: Depending on the element selected, directly modify the text of an element or the HTML.
  • Layout:
    • Show, hide, or remove elements
    • Rearrange the initially selected element relative to another element (shown below)
    • Position CSS property options allow you to choose alternative rules for positioning elements
  • Typography:
    • Font size
    • Font weight
    • Font color
  • Background:
    • Background color
    • Background image
  • Border:
    • Width
    • Style
    • Color
  • Dimensions: Width and height of the selected element
  • Styles:
    • Inline CSS. You can add any CSS here that will override prior changes or CSS styles for the selected element, including Optimizely's own custom CSS (except for inherited styles). Here's how to make visual changes with CSS in the Editor.
    • Modify, add, or remove classes of the selected element
  • Timing:
    • Choose between synchronous and asynchronous timing of the change.
    • Synchronous means that your change will load at the same time as the Optimizely snippet loads (technically inside the snippet), before the page is visible. Use this option for lighter changes that need to run right away without flashing, like a headline swap.
    • Asynchronous means that your change will load after the snippet, applying the change while the page loads. Use this option for heavier changes where a delay won't be noticeable, like a popup or a section below the fold.
  • Track clicks:
    • Attach a click event to a new element that you added to the page with the Editor
    • Use it to track clicks in that campaign

Aside from changing existing elements, you can also do the following:

  • Insert HTML
  • Insert Image
  • Redirect
  • Add an Extension: A reusable element that your team builds once and reuses across multiple campaigns

Rearrange elements

The Editor allows you to rearrange an element relative to other elements on your page.

  1. Select the element on your page that you want to rearrange.

  2. Click Rearrange in the left-hand rail. 

  3. Choose the positioning (Before, At the beginning of, At the end of, After) for where you'd like the element to go.

  4. Use the magnifying glass icon beside the Choose target selector field to choose the element on the page where you'd like to place your original element.

Think of this like a statement, for example: "Rearrange [original element] to go before [target element]."

The image below demonstrates the Rearrange feature:

image06.gif

Redirect variations

Sometimes, you'll want to redirect to another existing URL instead of designing a variation in the Editor. For example, you may be testing two landing pages against each other. In Optimizely, this is called a redirect variation.

Here's how to create and test redirect variations.

Optimizely won't erase the existing variation code you've generated if you select this option. Any variation JS or CSS changes that you've made will execute before the redirect.

Responsive sites

Optimizely X makes it easy to edit responsive sites. Use the menu options in the upper-right corner to resize the Editor to common breakpoints, as seen in the image below:

editor_resize.gif

Although the Editor makes it easier to make changes to responsive sites, you may need to define your page such that it will activate at different breakpoints. Use audience targeting to refine experiences for responsive breakpoints.

Pop-out Editor

The Pop-out Editor helps you work around header issues if you're having trouble loading a page in the Editor.

In the Editor, click the () icon to load your page in a new browser window.

Preview your changes

As you make changes in the editor, Optimizely will save your changes and upload them to our CDN (Content Delivery Network). You can preview the changes you've made directly from the Editor.

  1. Check the status of the upload: if Uploading to CDN appears, your experiment is still uploading. Wait until this message disappears to preview your changes.

  2. In the Changes menu, select Preview Tool to view your changes

You can also use the Preview button to:

If you don't see the Preview option in the left-rail, you may may be in the Change Options sub-menu. Exit that menu to find the Preview options.

Custom code

Optimizely allows you to make powerful changes to your site using custom code.

Click the Variation Code Editor (image03.png) icon to insert custom code. 

The Editor allows you to create variation-level JavaScript and CSS, meaning that you can define custom code that executes only for visitors bucketed into that particular variation. Custom JavaScript executes by appending it as a script tag to the body.

Here are some additional things to keep in mind regarding custom code:

  • Custom code runs immediately. Because visual and code changes were mixed together, Optimizely Classic polls for each line separately and tried to run it when elements were ready. In Optimizely X, we've removed this behavior so that your code runs exactly as written, often before the DOM is ready.

  • Custom code and visual changes are separated. When you make a change in the Visual Editor, you won't see the corresponding jQuery in the code box. Instead, the change is stored in a JSON data structure and applied at runtime. Each visual change is applied when the selector it applies to is ready. Using the JSON data structure instead of jQuery allows the Optimizely snippet to be more efficient at making your changes.

  • There is no jQuery dependency in Optimizely X. If you don’t need jQuery for your custom code (in variation code, experiment code or project code) you can remove jQuery from the Optimizely snippet.

  • Utility functions are now available. Learn more in our developer documentation.

If you've been using Optimizely Classic, you're probably used to the changes you make in the Visual Editor turning immediately into jQuery in the Edit Code box. For example, if you changed a headline’s text using the Visual Editor, you’d see code like $(‘h1’).text(‘New Headline’); in the Edit Code box. In Optimizely X, we’ve changed this behavior.

Now, the visual changes that you make aren’t instantly translated to code. Instead, we store the full structure of what you change in the Visual Editor and simply list out a summary of those changes in the left sidebar. These changes do NOT show up in the custom code box the way they did before.

However, you can still add your own jQuery. The big difference is timing. In Optimizely Classic, we would delay running code until the element you changed was ready on the page. However, we received many requests to give developers more control over timing. So in Optimizely X, custom code executes immediately, and you can also write code to specify when things should run.

Please note this means that some code that works in Optimizely Classic does not work in Optimizely X Web Experimentation or Personalization. For example, the following code won't work in Personalization, because the body element doesn't exist at the time when the code runs (and remember, custom code runs immediately):

$(‘body’).css(‘background-color’, ‘red’);

To delay running the code until the whole page is loaded, you can use jQuery’s document.ready function:

$(document).ready(function() { 
$(‘body’).css(‘background-color’, ‘red’);
}); 

The Custom CSS option is a great way to make changes without worrying about timing. These CSS changes are applied by appending a style tag to the end of the body tag, for a more efficient way of making style changes than JavaScript or jQuery.

We recommend reading the developer documentation for more information regarding custom code.