Визуальный редактор

Важно

Тип эксперимента может не работать на некоторых сайтах.

Это происходит, если сервер устанавливает заголовок Cross-Origin-Opener-Policy со значением same-origin. Такая настройка запрещает обмен данными между интерфейсом Метрики и сайтом.

В настоящее время это техническое ограничение не имеет обходного решения.

Визуальный редактор позволяет изменять на странице сайта:

текст страницы;
изображения;
ссылки;
названия элементов, например кнопок;
цвет текста или элемента, в том числе background;
стили CSS;
HTML;
JavaScript.

Редактор встраивается в ваш сайт и позволяет менять внешний вид элементов. Все изменения применяются в реальном времени. После сохранения изменений и запуска эксперимента правки, которые вы сделали в редакторе, будут видны посетителям сайта, попавшим в эксперимент.

В этом типе эксперимента Varioqub вносит изменения с помощью exp.js, добавленного на сайт при подключении.

Примеры использования

После анализа Карты кликов на лендинге вы поняли, что посетители часто кликают на текст, в котором нет ссылки. Хотите сделать элемент кликабельным и узнать, на сколько это увеличит конверсию и глубину просмотра.
Вы продаете продукт, точная стоимость которого определяется после звонка менеджеру. Хотите проверить, на сколько увеличится конверсия в воронке и средний чек, если в карточку добавить минимальную цену «от X руб.».

Подробно о визуальном редакторе и ограничениях

Все изменения элемента привязаны к его селектору на странице. Если вы меняете верстку сайта после сохранения изменений в редакторе, то по сохраненному селектору может быть другой элемент и изменения применятся к нему.

Внесенные изменения применяются в браузере посетителя сайта. Если запускаемый на стороне посетителя код перерисовывает часть страницы, измененную в визуальном редакторе, то изменения пропадают — посетитель их не видит.

В этом случае рекомендуем использовать вместо визуального редактора — флаги в коде. Доступно подключение к наиболее распространенным библиотекам.

Тип эксперимента

Выберите Визуальный редактор и укажите URL страницы, на которой нужно изменить элементы для эксперимента.

Настройка вариантов страницы

Если нужно проверить несколько вариантов текста или оформления, нажмите кнопку Добавить вариант. Появится еще один экспериментальный вариант для настройки. Варианты будут сменять друг друга в ходе эксперимента.
Чтобы внести изменения в вариант страницы, нажмите кнопку Редактировать. Откроется страница, которую вы указали в блоке Визуальный редактор.
Выберите режим редактирования:
Basic

CSS

HTML

JS
Позволяет менять набор свойств элемента:
- CSS-свойства элемента (background-сolor, color, font-size, display);
- адрес ссылки;
- адрес изображения;
- текст у текстовых элементов без вложений.
Позволяет задавать любые CSS-свойства элемента. Можно ввести до 2000 знаков.

Позволяет менять или добавлять HTML-код элемента. Можно ввести до 2000 знаков.
Позволяет применять JavaScript-код на странице сайта. Ваш код может содержать до 2000 знаков.

Чтобы режим появился в визуальном редакторе:
1. Подключите эксперименты с помощью JavaScript и метода setConfig.
2. В методе setConfig передайте enableVisual: true и enableJS: true.
При редактировании ваш код будет помещен в функцию вида
```
function (element) {
    // ваш код
}
```
Во время применения такого эксперимента на страницу будет добавлен JavaScript-код с этой функцией. Если на сайте используется технология Content Security Policy с запретом выполнения JavaScript без nonce, то в методе setConfig передавайте nonce, которым можно подписать этот скрипт.
Настройки визуального редактора ^β
Чтобы перейти к настройкам, нажмите .

Вы можете настроить:

Редактирование по клику

При включенной опции можно редактировать элементы на странице, выбирая их кликом мыши. Элементы при этом становятся неактивными. Чтобы взаимодействовать со страницей, выключите эту опцию.

ID элемента в селекторе

ID — уникальный идентификатор элемента на странице. Необходим, чтобы получить путь до элемента. Если на вашем сайте ID меняется при каждом открытии страницы или является неуникальным, рекомендуем эту опцию отключить.
Выберите элемент, который нужно изменить, например, кнопку, текст или фон.
Внесите изменения и нажмите Сохранить.

Чтобы при настройке эксперимента изменить родительский элемент видимой части блока, воспользуйтесь перемещением между блоками.

Если на нескольких страницах сайта используется одинаковый элемент, отредактировать элемент можно на одной из страниц. Varioqub применит изменения к элементу на всех страницах, которые удовлетворяют URL-фильтру, при условии, что селектор у элемента на всех страницах один.

Если применить изменения нужно не ко всем страницам, укажите в поле URL фильтры страницы, на которых нужны изменения. Блок Проверка эксперимента помогает определить, соответствует ли введенный адрес страницы условиям, указанным в поле URL фильтры, если да — отображается значок .

Посмотрите примеры подключения и создания экспериментов с помощью визуального редактора на GitНub.