--- 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: en/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/en/llms.txt # Connecting To run an experiment on your site, make changes to its code in one of the following ways: {% list tabs %} - JavaScript 1. In Yandex Metrica, go to **Varioqub** → **Experiments**. 1. Click **Code for site** and select **JavaScript**. 1. Copy the code and add it to your site's `head` or `body`. {% cut "How to add the code in popular site builders" %} The connection method may vary depending on the site builder. 1\. Open the site or page settings. { .list } 2\. In the [section](*naming) for inserting the HTML code into the `head` tag, proceed to editing the code. { .list } 3\. Insert the Varioqub code and click **Save**. { .list } {% endcut %} Code example: ```javascript ``` where `XXXX` is the ID of the Yandex Metrica tag installed on your site. [Detailed description of the ymab function](https://yandex.com/support/varioqub/en/objects/ymab.md) - Google Tag Manager 1. In Yandex Metrica, go to **Varioqub** → **Experiments**. 1. Click **Code for site**. 1. Select **Google Tag Manager** and copy the code. Code example: ```javascript ``` where `XXXX` is the ID of the Yandex Metrica tag installed on your site. [Detailed description of the ymab function](https://yandex.com/support/varioqub/en/objects/ymab.md) 1. Go to the tag manager. 1. Select an account and go to **Tags**. 1. Click **Create** and select **Tag configuration**. 1. Choose "Custom HTML". 1. In the **HTML** field, paste the code that you copied from Yandex Metrica. 1. Open **Advanced Settings** → **Tag Sequencing**. 1. Click **Fire a tag before ... fires** and select the tag named "Yandex Metrica". 1. Select **Triggers** and then **All Pages**. - Usersplit API [Usersplit API](https://yandex.com/support/varioqub/en/api-usersplit.md) offers additional flexibility when configuring your experiments. For example, with this API, you can not only change the visible objects of your site, such as the color of a button, but also alter the backend logic. {% endlist %} If your site uses a [Content Security Policy](https://www.w3.org/TR/CSP/) (CSP), be sure to include the necessary permissions in the HTTP header to allow the browser to process data: - [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 %} If your site is built as an [SPA](*SPA), you can use the [react](https://www.npmjs.com/package/yandex-metrica-ab-react) library to skip calling the `ymab` function and passing the [init](https://yandex.com/support/varioqub/en/objects/init.md) method for every URL change. Without the library, you'll need to call the `ymab` function each time the URL changes. If you don't do that, your reports will show inaccurate data. **Function call**: ```javascript ymab('metrika.XXXX', 'init', callback); ``` {% endnote %} #### Compatible libraries {#connect-library} - React. See the [installation guide](https://www.npmjs.com/package/yandex-metrica-ab-react). ```no-highlight npm install yandex-metrica-ab-react ``` - nodejs/express. See the [installation guide](https://www.npmjs.com/package/yandex-metrica-ab-node). ```no-highlight npm install yandex-metrica-ab-node ``` ## Checking the connection {#check} {% note warning %} This feature may not work on some sites. This happens if the server sets the [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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. {% endnote %} To check if Varioqub is connected to your site: 1. In Yandex Metrica, go to **Varioqub** → **Experiments**. 1. Use the **Visual editor** to create an A/A experiment (without any changes in the variants) for testing. 1. Save the experiment. After a while, you should see data appear in the [report](https://yandex.com/support/varioqub/en/stat.md). If the report doesn't show any data, use the browser console to find out why: 1. Open the browser console with the keyboard shortcut **Ctrl** + **Shift** + **J** or **F12** (**⌥** + **⌘** + **J** for Apple OS). 1. Go to your site. 1. Go to the **Network** tab. 1. In the search bar, enter `https://abt.s3.yandex.net/expjs/latest/exp.js`. The request should be successful (200 OK status code) without any connection errors appearing in the console. 1. In the search bar, enter `uaas.yandex.ru`. This request should also execute successfully, and the server response, including the `i` parameter value, should be visible in the **Response** tab. 1. Go to the **Application** tab and select your site's **Cookie**. Make sure that the `_ymab_param` cookie and its contents are present. The examples for connecting Varioqub and creating experiments are available on [GitHub](https://github.com/yandex/varioqub-extras/tree/master/web). ## FAQ and troubleshooting [In my redirect experiment, the test and control values differ significantly](https://yandex.com/support/varioqub/en/faq.md#redirect). [Visual editor doesn't work](https://yandex.com/support/varioqub/en/faq.md#visual-not-working). [Experimental changes don't appear on the page immediately.](https://yandex.com/support/varioqub/en/faq.md#flickering)
Contact support
[*SPA]: Single Page Application [*naming]: One of the possible names is **HTML code for head-zone**.