Персонализация

Персонализация позволяет настроить сайт или его отдельные страницы под определенную аудиторию: изменить текст, HTML и CSS, отображение и форматы рекламных блоков. Также персонализацию можно использовать для всех посетителей сайта, например, изменить дизайн к какому-нибудь событию.

Отличие персонализации от экспериментов:

  • нет ограничений по времени — внесенные изменения могут применяться на сайте бессрочно;

  • нет вариантов и доли аудитории, так как измененные параметры применяются ко всем посетителям, которые указаны в условиях;

  • при создании персонализации метрики не задаются, так как нет нескольких вариантов;

  • по тем же причинам персонализации не нужен калькулятор выборок.

Подключение персонализации

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

Создание персонализации

  1. В Метрике перейдите на страницу Вариокуб → Персонализации.

  2. Нажмите кнопку Создать персонализацию.

  3. На странице Новая персонализация укажите название персонализации и добавьте описание.

  4. Задайте условия:

    Продолжительность

    Укажите необходимый промежуток времени или выберите бессрочный вариант.

    Персонализацию можно остановить на странице Персонализации: напротив нужной нажмите три точки и выберите Остановить.

    Страницы применения

    Укажите домен сайта и путь URL без протокола (http/https) и hash (символ # в URL и значение после него). Например, чтобы настроить персонализацию только для главной страницы сайта, укажите example.com. Чтобы задать гибкие условия, используйте специальные операторы. При этом точка (.) не считается оператором.

    Несколько условий в строке Varioqub учитывает по оператору «И»/«ИЛИ».

    Пример использования операторов Что учитывается в эксперименте
    example.com* Все страницы домена.
    example.* Все страницы всех доменов, которые начинаются с example.
    example.com/*search* Все страницы сайта, в адресе которых встречается search.
    example.com/search? Адреса страниц с отсутствием символов или одним символом в конце строки. Например: example.com/search, example.com/search/, example.com/search2.
    example.com/search+ Адреса страниц с одним и больше символами в конце строки. Например: example.com/search/, example.com/search2, example.com/search_goods.

    Также можно использовать условие с отрицанием — оператор !.

    Подробно о структуре URL

    https://<host>/<path>?<params>#<fragment>

    • <host>— домен сайта.

    • <path> — путь, который может иметь иерархическую структуру. Структура задается с помощью символа «/».

    • <params> — блок параметров, который отделяется от пути символом «?». Также называется «GET-параметрами».

    • <fragment> — строка с произвольным содержимым. Отделяется от GET-параметров символом «#». Также называется «hash». Не учитывается в условиях Страницы применения персонализации.

    GET-параметры

    Если персонализация нужна только для части страниц сайта, укажите GET-параметры, которые встречаются или отсутствуют в их адресах. Чтобы задать гибкие условия, используйте специальные операторы. При этом точка (.) не считается оператором.

    Чтобы Varioqub учитывал несколько условий одновременно, укажите их через запятую: aparam=avalue,bparam=bvalue (будет применяться оператор «И»). Отдельные блоки условий объединяются по оператору «ИЛИ».

    Символы, которые можно использовать с параметрами и их значениями:

    • = — ставится между названием параметра и его значением, при отсутствии учитывается только наличие параметра. Пример: param=value
    • ? — означает любой символ, который встречается ноль или один раз. Пример: pa?am=va?ue
    • * — означает любые символы, которые встречаются ноль или несколько раз. Пример: p*m=v*e
    • + — означает любые символы, которые встречаются один или несколько раз. Пример: p+m=v+e
    • ! — означает отрицание условия или исключение параметра из влияния на эксперимент. Пример !param=val

    Важно

    Отрицание ! ставится только первым символом в ключе.

    • Корректный пример: !param=value.
    • Некорректные примеры: param!=value или param=!value.

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

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

    Что учитывается в эксперименте

    param

    Только наличие параметра, независимо от значения.

    param=value

    Наличие точного названия параметра и его точного значения.

    !param

    Отсутствие параметра с любым значением.

    *param*=value

    Все параметры, которые содержат фрагмент param со значением value.

    !*param*=value

    Значение любого параметра с фрагментом param не должно равняться value.

    !*param*=*value*

    Значение любого параметра с фрагментом param не должно содержать value.

    !*param*

    Отсутствие параметра, содержащего фрагмент param.
    Регион

    Регион определяется по IP-адресу посетителя сайта. Доступны Россия с детализацией по областям, СНГ и континенты с детализацией по странам. Регионы можно добавлять или с помощью опции Исключить выбранные регионы исключать.

    Платформа

    Смартфоны, планшеты, десктопные устройства (ПК), телевизоры (ТВ). Тип устройства определяется по User Agent посетителя сайта. Узнать, пользователи каких устройств заходят на ваш сайт чаще, можно с помощью отчета Метрики Устройства.

    Пользовательские параметры

    Примечание

    Доступно только в расширенной версии Varioqub.

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

    После укажите параметры и их значения в поле Пользовательские значения — Varioqub будет распознавать их и учитывать для персонализации.

    Чтобы Varioqub учитывал несколько условий одновременно, укажите их через запятую: aparam=avalue,bparam=bvalue (будет применяться оператор «И»). Отдельные блоки условий объединяются по оператору «ИЛИ».

    Символы, которые можно использовать с параметрами и их значениями:

    • = — ставится между названием параметра и его значением, при отсутствии учитывается только наличие параметра. Пример: param=value
    • ? — означает любой символ, который встречается ноль или один раз. Пример: pa?am=va?ue
    • * — означает любые символы, которые встречаются ноль или несколько раз. Пример: p*m=v*e
    • + — означает любые символы, которые встречаются один или несколько раз. Пример: p+m=v+e
    • ! — означает отрицание условия или исключение параметра из влияния на эксперимент. Пример !param=val

    Важно

    Отрицание ! ставится только первым символом в ключе.

    • Корректный пример: !param=value.
    • Некорректные примеры: param!=value или param=!value.

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

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

    Что учитывается в эксперименте

    param

    Только наличие параметра, независимо от значения.

    param=value

    Наличие точного названия параметра и его точного значения.

    !param

    Отсутствие параметра с любым значением.

    *param*=value

    Все параметры, которые содержат фрагмент param со значением value.

    !*param*=value

    Значение любого параметра с фрагментом param не должно равняться value.

    !*param*=*value*

    Значение любого параметра с фрагментом param не должно содержать value.

    !*param*

    Отсутствие параметра, содержащего фрагмент param.
    Исключить поисковых роботов

    Укажите это условие, если не хотите, чтобы персонализация распространялась на поисковых роботов, которые представились (их User-agent известен).

Параметры персонализации

Доступно несколько параметров персонализации:

  • Визуальный редактор. Используйте, если нужно визуально изменить элементы сайта, например, заголовки, тексты, кнопки или картинки.
  • Ссылки для редиректа. Используйте, чтобы сравнить несколько готовых вариантов одной страницы, протестировать разные посадочные страницы или несколько дизайнов.
  • Флаги в коде. Используйте, если нужно проверить гипотезы любой сложности с более глубокой интеграцией в функциональность продукта или сайта.
  • Рекламные блоки. Используйте, чтобы сравнить эффективность расположения разных форматов рекламных блоков на странице.
  • Интеграции. Используйте для размещения информационных блоков с персональными предложениями, скидками или расскажите о новых возможностях (доступно только в расширенной версии Varioqub).
Визуальный редактор

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

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

Укажите URL страницы, на которой нужно изменить элементы.

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

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

Подробно см. Работа в визуальном редакторе.

Ссылки для редиректа

Используйте этот тип, если вы уже подготовили страницу или версию сайта с изменениями. Укажите прямую ссылку без домена, например /catalog/page/.

Убедитесь, что этот адрес относится к домену, на котором установлен счетчик Метрики. Не указывайте адреса, которые относятся к поддомену вашего сайта или другому сайту.

Чтобы избежать множественных редиректов, не рекомендуем использовать целевую страницу, удовлетворяющую правилам URL фильтра. Множественные редиректы не воспроизводятся при проверке персонализации.

Флаги в коде

В код вашего сайта добавьте специальные флаги, которые определяют экспериментальные изменения. Их можно использовать для любых элементов сайта. Флаг представляет пару «ключ-значение». Например, можно разметить, цвет кнопки для персонализации: color=red.

Рекламные блоки

На вкладке можно создать персонализацию с расположением и форматом рекламных блоков. Это можно сделать без добавления кода рекламного блока (context.js), достаточно подключить Varioqub (exp.js).

Подробно см. Рекламные блоки.

Интеграции

Примечание

Доступно только в расширенной версии Varioqub.

На вкладке можно создать персонализацию с интеграцией. Расскажите пользователям о скидках, новых возможностях вашего сайта или создайте персональное предложение. Для выбора доступны разные форматы информационных блоков, которые легко настроить под себя.

Добавьте ссылку для редиректа пользователей на нужную страницу.

Для настройки доступны следующие типы интеграций:

  • Баннер в углу — небольшое окно в углу страницы. Не мешает контенту и подойдет для любой верстки сайта.
  • Баннер в углу (ограниченная настройка) — небольшое окно в углу страницы, доступное и в базовой версии Varioqub. Не мешает контенту и подойдет для любой верстки сайта. В отличие от баннера в углу, доступного только в расширенной версии, не позволяет изменять стили, расстояния до края страницы и значение свойства z-index.
  • Баннер на ширину экрана — всплывающее анимированное окно. Можно разместить в верхней или в нижней части экрана. Если вы хотите привлечь внимание пользователя на ссылке, добавьте эффект кнопки Привлечение внимания.
  • Баннер на всю странцу — самая заметная интеграция на всю страницу сайта. Такой баннер точно заметит пользователь, который должен будет перейти по ссылке или закрыть окно.

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

  • Если выбран Визуальный редактор, Ссылки для редиректа, Рекламные блоки или Интеграции, изменения вносит Varioqub с помощью exp.js, добавленного на сайт при подключении.

  • При выборе типа Флаги в коде обработка данных происходит следующим образом. В какой момент нужно получать данные о флагах зависит от того, как обрабатывается информация на вашем сайте:

    Client-Side Rendering

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

    Server-Side Rendering

    В этом случае флаги можно получить во время формирования ответа. Varioqub работает достаточно быстро, чтобы не замедлять ваш сайт. В таком случае нужно передать:

    • в явном виде идентификатор посетителя, а при получении нового идентификатора (вместе с флагами) установить его в HTTP-ответе;

    • технические данные для счетчика Метрики на фронтенд и установить их в соответствующее поле счетчика — подробно см. в разделе API usersplit.

Работа в визуальном редакторе

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

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

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

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

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

Доступно несколько режимов редактирования:

Basic

Позволяет менять набор свойств элемента:

  • CSS-свойства элемента (background-сolor, color, font-size, display);

  • адрес ссылки;

  • адрес изображения;

  • текст у текстовых элементов без вложений.

CSS

Позволяет задавать любые CSS-свойства элемента. Можно ввести до 2000 знаков.

HTML

Позволяет менять или добавлять HTML-код элемента. Можно ввести до 2000 знаков.

JS

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

Чтобы режим появился в визуальном редакторе:

  1. Подключите эксперименты с помощью JavaScript и метода setConfig.

  2. В методе setConfig передайте enableVisual: true и enableJS: true.

При редактировании ваш код будет помещен в функцию вида

function (element) {
    // ваш код
}

Во время применения такого эксперимента на страницу будет добавлен JavaScript-код с этой функцией. Если на сайте используется технология Content Security Policy с запретом выполнения JavaScript без nonce, то в методе setConfig передавайте nonce, которым можно подписать этот скрипт.

Настройки визуального редактора β

Чтобы перейти к настройкам, нажмите .

Можно настроить:

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

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

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

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

Чтобы изменить страницу:

  1. Нажмите кнопку Редактировать. Откроется страница, которую вы указали в блоке Визуальный редактор.

  2. Выберите режим редактирования.

  3. Выберите элемент, который нужно изменить, например, кнопку, текст или фон.

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

Проверка изменений

Чтобы убедиться, что изменения применились, в блоке Проверка изменений нажмите кнопку Проверить. Откроется версия сайта с настройками персонализации по сгенерированной Varioqub ссылке. Вы можете поделиться этой ссылкой в течение 24 часов с момента ее генерации. При повторном нажатии Проверить генерируется новая ссылка.

Проверка нескольких персонализаций

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

Для этого

  1. Перейдите к списку персонализаций: Вариокуб → Персонализации.

  2. Нажмите меню рядом с кнопкой Создать персонализацию.

  3. Нажмите Проверка персонализаций.

Проверка персонализаций

В открывшемся окне

  1. В выпадающем списке отметьте персонализации, которые хотите применить.

  2. Введите адрес страницы, на которой хотите применить персонализации.

  3. Нажмите Скопировать, чтобы скопировать получившуюся ссылку с параметрами, или Открыть, чтобы открыть ссылку в новой вкладке браузера.

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

Написать в службу поддержки
Предыдущая
Эксперименты над рекламой
Следующая
Отчет о результатах эксперимента