--- metadata: - name: generator content: Diplodoc Platform v5.54.2 alternate: - https://yandex.com/support/varioqub/en/connect.md - https://yandex.com/support/varioqub/ru/connect.md - https://yandex.com/support/varioqub/tr/connect.md - href: ru/connect.md type: text/markdown title: Markdown version - href: llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/varioqub/ru/llms.txt # Подключение Чтобы провести эксперимент на сайте, внесите изменения в его код одним из способов: {% list tabs %} - JavaScript 1. В Метрике перейдите на страницу **Вариокуб** → **Эксперименты**. 1. Нажмите кнопку **Код для сайта** и выберите **JavaScript**. 1. Скопируйте и добавьте код на сайт в элемент `head` или `body`. {% cut "Как добавить код в популярных конструкторах сайтов" %} Способ подключения может отличаться в зависимости от конструктора: 1\. Откройте настройки сайта или отдельной страницы. { .list } 2\. В [разделе](*naming) для вставки HTML-кода внутрь тега `head` перейдите к редактированию кода. { .list } 3\. Вставьте код Varioqub и нажмите **Сохранить**. { .list } {% endcut %} Пример кода: ```javascript ``` где `XXXX` — номер счетчика Метрики, который установлен на ваш сайт. [Подробное описание функции ymab](https://yandex.com/support/varioqub/ru/objects/ymab.md) - Google Tag Manager 1. В Метрике перейдите на страницу **Вариокуб** → **Эксперименты**. 1. Нажмите кнопку **Код для сайта**. 1. Выберите **Google Tag Manager** и скопируйте код. Пример кода: ```javascript ``` где `XXXX` — номер счетчика Метрики, который установлен на ваш сайт. [Подробное описание функции ymab](https://yandex.com/support/varioqub/ru/objects/ymab.md) 1. Перейдите в Менеджер тегов. 1. Выберите аккаунт и перейдите на страницу **Теги**. 1. Нажмите кнопку **Создать** и выберите **Конфигурация тега**. 1. Выберите шаблон «Пользовательский HTML». 1. В поле **HTML** добавьте код, который скопировали в Метрике. 1. Откройте блок **Расширенные настройки** → **Последовательность активации тегов**. 1. Выберите **Активировать тег перед тегом** и выберите тег «Яндекс Метрика». 1. Выберите **Триггеры**, а затем — **All Pages**. - API usersplit [API usersplit](https://yandex.com/support/varioqub/ru/api-usersplit.md) позволяет настроить эксперимент более гибко. Например, изменять не только видимые объекты сайта (цвет кнопки и пр.), но и менять логику работы бэкенда. {% endlist %} Если ваш сайт использует технологию [Content Security Policy](https://www.w3.org/TR/CSP/) (CSP), передавайте браузеру в HTTP-заголовке разрешение на обработку данных: - [connect-src](https://www.w3.org/TR/CSP/#directive-connect-src) - [script-src](https://www.w3.org/TR/CSP/#directive-script-src) - [script-src-elem](https://www.w3.org/TR/CSP/#directive-script-src-elem) ```no-highlight connect-src uaas.yandex.ru script-src abt.s3.yandex.net script-src-elem abt.s3.yandex.net style-src 'unsafe-inline' ``` {% note info %} Если ваш сайт разработан на архитектуре [SPA](*SPA), вы можете использовать библиотеку [react](https://www.npmjs.com/package/yandex-metrica-ab-react), для того чтобы не вызывать функцию `ymab` с передачей метода [init](https://yandex.com/support/varioqub/ru/objects/init.md) каждый раз при смене URL. Если вы не используете библиотеку, вам придется вызывать функцию `ymab` каждый раз при смене URL, иначе данные в отчетах будут неточными. **Вызов функции**: ```javascript ymab('metrika.XXXX', 'init', callback); ``` {% endnote %} #### Совместимые библиотеки {#connect-library} - react. См. [инструкцию по установке](https://www.npmjs.com/package/yandex-metrica-ab-react). ```no-highlight npm install yandex-metrica-ab-react ``` - nodejs/express. См. [инструкцию по установке](https://www.npmjs.com/package/yandex-metrica-ab-node). ```no-highlight npm install yandex-metrica-ab-node ``` ## Проверка подключения {#check} {% note warning %} Функция может не работать на некоторых сайтах. Это происходит, если сервер устанавливает заголовок [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) со значением `same-origin`. Такая настройка запрещает обмен данными между интерфейсом Метрики и сайтом. В настоящее время это техническое ограничение не имеет обходного решения. {% endnote %} Чтобы убедиться, что Varioqub подключен к вашему сайту: 1. В Метрике перейдите на страницу **Вариокуб** → **Эксперименты**. 1. С помощью **Визуального редактора** создайте тестовый АА эксперимент (без изменений в вариантах). 1. Сохраните эксперимент. Через некоторое время данные появятся в [отчете](https://yandex.com/support/varioqub/ru/stat.md). Если данных в отчете нет, воспользуйтесь консолью браузера, чтобы найти причины: 1. Вызовите консоль браузера с помощью сочетания клавиш **Ctrl** + **Shift** + **J** или **F12** (**⌥** + **⌘** + **J** для семейства операционных систем Apple). 1. Перейдите на ваш сайт. 1. Перейдите на вкладку **Network**. 1. В строке поиска укажите домен `https://abt.s3.yandex.net/expjs/latest/exp.js`. Запрос должен отображаться успешно (код со статусом 200 OK), в консоли должны отсутствовать ошибки подключения. 1. В строке поиска укажите домен `uaas.yandex.ru`. Запрос также должен выполняться успешно, вкладка **Response** должна содержать ответ сервера, в том числе значение параметра `i`. 1. Перейдите на вкладку **Application** и выберите элемент **Cookie** вашего сайта. Убедитесь в наличии cookie `_ymab_param` и его содержимого. Посмотрите примеры подключения и создания экспериментов на [GitHub](https://github.com/yandex/varioqub-extras/tree/master/web). ## Вопросы и проблемы [В эксперименте с редиректом значения в эксперименте и контроле сильно отличаются.](https://yandex.com/support/varioqub/ru/faq.md#redirect) [Визуальный редактор не работает](https://yandex.com/support/varioqub/ru/faq.md#visual-not-working) [Экспериментальные изменения появляются на странице не сразу.](https://yandex.com/support/varioqub/ru/faq.md#flickering)
Задайте вопрос Нейроэксперту — в правом нижнем углу нажмите кнопку ![](_assets/neuro-mod.png =150x). Если у вас остались вопросы, напишите в службу поддержки.
Написать в службу поддержки
[*SPA]: Single Page Application [*naming]: Раздел может называться **HTML-код для вставки внутрь head**.