Visual editor – Change types

Optimize supports the following change types in the visual editor:

Style change

Used to implement style attribute changes, including element size and position.

Style change allows you to implement the instruction using a CSS rule:

#target { color : red }

...or use the target element’s style attribute:

<p id="target" style="color : red"> </p>

The visual editor defaults to the most correct syntax, favoring the CSS Rule approach.

If there is a more specific CSS rule in the page that overrides the new rule, the visual editor will use the "important" property, e.g.:

#target { color : red !important}

The editor will only use the element's style if the above rule is also overridden by a more specific rule on the page.

The CSS Rule approach minimizes flicker (caused when unstyled content appears briefly before the CSS loads). In contrast, changing a style property using element.style requires that the element already exist on the page, thereby increasing the chance that it will be briefly visible to the user before it is changed.

You can examine the options that the editor picked, and modify any of them by editing an existing style change.

Advanced editor – Edit style dialog screenshot

Attribute change

Used to implement element attribute changes, such as the target of a link, or the source of an image. You can examine and modify properties, such as the CSS selector, attribute and value.

Advanced editor – edit attribute screenshot

Text change

Used when you make inline text edits in the editor. When an element contains text interleaved with child elements, the editor indicates the part of the text that was modified. In the following example, you can only change one of the parts, e.g. "Some text." To edit, click each part individually, or tab to move to the next part.

<div>
Some text 
<b> a child element </b>
Some other text
</div>

The following modes are supported:

  1. Replace: Replaces an existing text part.
  2. Insert: Inserts a new text part inside the target element, at the beginning.
  3. Append: Inserts a new text part inside the target element, at the end.
  4. Before: Inserts a new text part before the target element.
  5. After: Inserts a new text part after the target element.

Advanced editor - edit text screenshot

A Text change is safer and less invasive than an HTML change. It is preferred when only the text is modified. A Text change does not have side-effects in document structure (and CSS selectors or other elements) and does not affect event handlers that may be registered in the target elements.

HTML change

Used to replace or insert new HTML. The following modes are supported:

  • Replace: Replaces the existing HTML content
  • Insert: Inserts new HTML content inside the target element, at the beginning.
  • Append: Inserts new HTML content inside the target element, at the end.
  • Before: Inserts new HTML content before the target element.
  • After: Inserts new HTML content after the target element.

Advanced editor – Insert text before screenshot

An HTML change will result in the loss of all non-inline event handlers. For example, this button will stop working after an HTML change (e.g. Insert HTML before):

<button id=”button”> My button </button> <script> document.getElementById("button") .addEventListener("click", function() {alert(‘hello’);}); </script>

HTML changes happen after the initial HTML content has been parsed by the browser, so any scripts that it contains will have already been executed. For this reason, the visual editor removes script tags when loading the HTML content for editing. You cannot include scripts in new HTML content. To run a new script as part of a variant, use a Script change (Run Javascript). You cannot modify existing scripts.

Reorder change

Two approaches are supported for dragging and moving an element to a different location on the page. The default approach produces a Reorder change, which changes the placement of the element in the DOM. The element will have a new parent and/or sibling element(s). This typically results in the element adopting the style of the elements in its new area.

Use a Reorder change when reordering menu items, or other similar looking elements.

A Reorder change involves a source and a target CSS selector which can be changed from the related dialog as well as a Move mode:

  • Top: Makes the source element be the first child of the target element.
  • Bottom: Makes the source element be the last child of the target element.
  • Before: Makes the source element be the previous sibling of the target element.
  • After: Makes the source element be the next sibling of the target element.

Script change

A Script change allows Optimize to run arbitrary JavaScript on every element that matches a CSS selector. The change allows Optimize to run the JavaScript as the body of a function that takes the element as a parameter.

You can also use "head" or "body" for the CSS selector and run the JavaScript just once (since there is only a single such element in the page). The selector you use, in combination with its "run at" option, affects the preconditions that determine when the script will run. Read When change instructions are applied, below.

If a CSS selector matches multiple elements, the provided script will run multiple times, once for each element. On each call, the element is passed as the single argument of the function.

Each call takes place as early as possible based on the selected option:

  • After opening tag: Only the opening tag of the matched element needs to have been parsed and available in the page in order for the script to run.
  • After closing tag: All contents and the closing tag of the matched element must have been parsed and available in the page in order for the script to run.

For example:

  • Using the "After opening tag" option with selector "head" means that the script change can run as early as when the Optimize snippet is first executed in the <HEAD> (synchronous blocking execution).
  • Using the "After closing tag" option with selector "body" means that the script change will run after the document ready (DOMContentLoaded) event.

Advanced editor – Run JavaScript screenshot

Multiple target elements

As with other change types, a Reorder change allows you to modify its source and target CSS selectors to match multiple elements. For example, by selecting multiple source elements, you can move all items of a menu into a different menu.

A Reorder change also supports a target selector that matches multiple elements. This can be used to change the order of two table columns or any other tabular structure in the page.

  • If there are more targets than source elements, the additional target elements are ignored.
  • If there are more sources than target elements, the additional source elements are added in the last target element.
Was this helpful?
How can we improve it?
Search
Clear search
Close search
Google apps
Main menu
Search Help Center
true
101337
false
false