Подключение

Чтобы провести эксперимент на сайте, внесите изменения в его код одним из способов:

  1. В Метрике перейдите на страницу Вариокуб → Эксперименты.

  2. Нажмите кнопку Код для сайта и выберите JavaScript.

  3. Скопируйте и добавьте код на сайт в элемент head или body.

Как добавить код в популярных конструкторах сайтов

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

1. Откройте настройки сайта или отдельной страницы.

2. В разделе для вставки HTML-кода внутрь тега head перейдите к редактированию кода.

3. Вставьте код Varioqub и нажмите Сохранить.

Пример кода:

<script type="text/javascript">
    (function(e, x, pe, r, i, me, nt){
    e[i]=e[i]||function(){(e[i].a=e[i].a||[]).push(arguments)},
    me=x.createElement(pe),me.async=1,me.src=r,nt=x.getElementsByTagName(pe)[0],me.addEventListener("error",function(){function cb(t){t=t[t.length-1],"function"==typeof t&&t({flags:{}})};Array.isArray(e[i].a)&&e[i].a.forEach(cb);e[i]=function(){cb(arguments)}}),nt.parentNode.insertBefore(me,nt)})
    (window, document, 'script', 'https://abt.s3.yandex.net/expjs/latest/exp.js', 'ymab');

    ymab('metrika.XXXX', 'init'/*, {clientFeatures}, {callback}*/);
</script>

где XXXX — номер счетчика Метрики, который установлен на ваш сайт.

Подробное описание функции ymab

  1. В Метрике перейдите на страницу Вариокуб → Эксперименты.

  2. Нажмите кнопку Код для сайта.

  3. Выберите Google Tag Manager и скопируйте код.

    Пример кода:

    <script type="text/javascript">
    (function(e, x, pe, r, i, me, nt){
    e[i]=e[i]||function(){(e[i].a=e[i].a||[]).push(arguments)},
    me=x.createElement(pe),me.async=1,me.src=r,nt=x.getElementsByTagName(pe)[0],nt.parentNode.insertBefore(me,nt)})
    (window, document, 'script', 'https://abt.s3.yandex.net/expjs/latest/exp.js', 'ymab');
    ymab('metrika.XXXX', 'init'/*, {clientFeatures}, {callback}*/);
</script>

    где XXXX — номер счетчика Метрики, который установлен на ваш сайт.

    Подробное описание функции ymab

  4. Перейдите в Менеджер тегов.

  5. Выберите аккаунт и перейдите на страницу Теги.

  6. Нажмите кнопку Создать и выберите Конфигурация тега.

  7. Выберите шаблон «Пользовательский HTML».

  8. В поле HTML добавьте код, который скопировали в Метрике.

  9. Откройте блок Расширенные настройки → Последовательность активации тегов.

  10. Выберите Активировать тег перед тегом и выберите тег «Яндекс Метрика».

  11. Выберите Триггеры, а затем — All Pages.

API usersplit позволяет настроить эксперимент более гибко. Например, изменять не только видимые объекты сайта (цвет кнопки и пр.), но и менять логику работы бэкенда.

Если ваш сайт использует технологию Content Security Policy (CSP), передавайте браузеру в HTTP-заголовке разрешение на обработку данных:

connect-src uaas.yandex.ru
script-src abt.s3.yandex.net
script-src-elem abt.s3.yandex.net
style-src 'unsafe-inline'

Примечание

Если ваш сайт разработан на архитектуре SPA, вы можете использовать библиотеку react, для того чтобы не вызывать функцию ymab с передачей метода init каждый раз при смене URL.

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

Вызов функции:

ymab('metrika.XXXX', 'init', callback);

Совместимые библиотеки

Проверка подключения

Важно

Функция может не работать на некоторых сайтах.

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

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

Чтобы убедиться, что Varioqub подключен к вашему сайту:

  1. В Метрике перейдите на страницу Вариокуб → Эксперименты.

  2. С помощью Визуального редактора создайте тестовый АА эксперимент (без изменений в вариантах).

  3. Сохраните эксперимент. Через некоторое время данные появятся в отчете.

Если данных в отчете нет, воспользуйтесь консолью браузера, чтобы найти причины:

  1. Вызовите консоль браузера с помощью сочетания клавиш Ctrl + Shift + J или F12 (⌥ + ⌘ + J для семейства операционных систем Apple).

  2. Перейдите на ваш сайт.

  3. Перейдите на вкладку Network.

  4. В строке поиска укажите домен https://abt.s3.yandex.net/expjs/latest/exp.js. Запрос должен отображаться успешно (код со статусом 200 OK), в консоли должны отсутствовать ошибки подключения.

  5. В строке поиска укажите домен uaas.yandex.ru. Запрос также должен выполняться успешно, вкладка Response должна содержать ответ сервера, в том числе значение параметра i.

  6. Перейдите на вкладку Application и выберите элемент Cookie вашего сайта. Убедитесь в наличии cookie _ymab_param и его содержимого.

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

Вопросы и проблемы

В эксперименте с редиректом значения в эксперименте и контроле сильно отличаются.

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

Экспериментальные изменения появляются на странице не сразу.

Написать в службу поддержки
Предыдущая
Эксперименты Varioqub
Следующая
API usersplit