Visual editor

Warning

This experiment type may not work on some sites.

This happens if the server sets the Cross-Origin-Opener-Policy header with the value same-origin. This setting prohibits data exchange between the Yandex Metrica interface and the site.

There is currently no workaround for this technical limitation.

With the visual editor, you can modify the following page content:

Page text
Images
Links
Names of elements, such as buttons
Element or text color, including background color
CSS styles
HTML
JavaScript

The editor is embedded in your site and enables you to change the appearance of its elements. All changes are applied in real time. Once you save the changes and run the experiment, the edits you made in the editor become visible to users selected for the experiment.

In this experiment type, Varioqub applies the changes using the exp.js file added to the site during connection.

Usage examples

After analyzing the Click map on your landing page, you realized that users often click on a text that doesn't include a link. You want to make this element clickable and find out how this will increase your conversion rate and page depth.
You're selling a certain product, and its exact price is only available on request. You want to see if adding a minimum price tag — such as "from $X" — to the product card would have a tangible effect on the conversion rate in the funnel and on the average ticket.

More information about the visual editor and limitations

All changes made to an element are linked to its selector on the page. If you update your site layout after saving changes in the editor, the saved selector might correspond to a different element and the changes are applied to it instead.

The changes are applied in the site user's browser. If the client-side code re-renders a part of the page that was changed in the visual editor, the page reverts backs the changes and the user doesn't see them.

In this case, we recommend using flags in code instead of the visual editor. Varioqub supports the most popular libraries.

Experiment type

Select Visual editor and specify the URL of the page whose elements you want to change as part of your experiment.

Setting up page variants

If you want to test several variants of text or design, click Add variant. This will add another variant for you to set up within your experiment. The variants will change during the experiment.
To apply changes to a page variant, click Edit. The page that you specified under Visual editor opens.
Select editing mode:
Basic

CSS

HTML

JS
Use this mode to change an element's set of properties:
- Element's CSS properties (background-color, color, font-size, display).
- Link URL.
- Image URL.
- Text within text elements that have no nested elements.
Use this mode to set any CSS property of an element. You can enter up to 2000 characters.

Use this mode to add HTML code to an element or change the existing HTML code. You can enter up to 2000 characters.
Use this mode to apply JavaScript code to a site page. Your code can contain up to 2000 characters.

To make the mode appear in the visual editor:
1. Connect experiments using JavaScript and the setConfig method.
2. In the setConfig method, pass enableVisual: true and enableJS: true.
When you edit a page, your code is wrapped in a function as follows:
```
function (element) {
    // your code
}
```
When you apply such an experiment, JavaScript code with this function is added to your page. If the site uses a Content Security Policy that prohibits execution of JavaScript code without a nonce, pass a nonce value that can be used to sign the script in the setConfig method.
Visual editor settings ^β
Click to access the settings.

You can configure:

Edit by click

With this option enabled, you can edit elements on the page by selecting them with a mouse click. In this mode, elements become inactive. To interact with the page, disable this option.

ID of the element in the selector

ID is a unique identifier of an element on the page. You need it to get the path to the element. If the ID on your site changes each time the page is opened, or if the ID isn't unique, we recommend disabling this option.
Select the element you want to change, such as a button, text, or background.
Apply changes and click Save.

To change the parent element of the visible part of the unit when setting up an experiment, use movement between units.

If the same element is used on several pages of your site, you can edit the element from any of the pages. Varioqub applies your changes to the element on all pages that satisfy the URL filter, provided that the element uses the same selector on all the pages.

If you don't want to apply your changes to all pages, specify the pages you want to modify in the URL filters field. Under Experiment testing, you can enter a page URL to see if it meets the conditions specified in URL filters. If it does, you'll see the icon.

The examples of connecting Varioqub and creating experiments using the visual editor are available on GitHub.