Connecting

To run an experiment on your site, make changes to its code in one of the following ways:

  1. In Yandex Metrica, go to Varioqub → Experiments.

  2. Click Code for site and select JavaScript.

  3. Copy the code and add it to your site's head or body.

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.

2. In the section for inserting the HTML code into the head tag, proceed to editing the code.

3. Insert the Varioqub code and click Save.

Code example:

<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>

where XXXX is the ID of the Yandex Metrica tag installed on your site.

Detailed description of the ymab function

  1. In Yandex Metrica, go to Varioqub → Experiments.

  2. Click Code for site.

  3. Select Google Tag Manager and copy the code.

    Code example:

    <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>

    where XXXX is the ID of the Yandex Metrica tag installed on your site.

    Detailed description of the ymab function

  4. Go to the tag manager.

  5. Select an account and go to Tags.

  6. Click Create and select Tag configuration.

  7. Choose "Custom HTML".

  8. In the HTML field, paste the code that you copied from Yandex Metrica.

  9. Open Advanced Settings → Tag Sequencing.

  10. Click Fire a tag before ... fires and select the tag named "Yandex Metrica".

  11. Select Triggers and then All Pages.

Usersplit API 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.

If your site uses a Content Security Policy (CSP), be sure to include the necessary permissions in the HTTP header to allow the browser to process data:

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

Note

If your site is built as an SPA, you can use the react library to skip calling the ymab function and passing the init 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:

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

Compatible libraries

Checking the connection

Warning

This feature may not work on some sites.

This happens if the server sets the 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.

To check if Varioqub is connected to your site:

  1. In Yandex Metrica, go to Varioqub → Experiments.

  2. Use the Visual editor to create an A/A experiment (without any changes in the variants) for testing.

  3. Save the experiment. After a while, you should see data appear in the report.

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).

  2. Go to your site.

  3. Go to the Network tab.

  4. 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.

  5. 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.

  6. 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.

Questions and issues

In my redirect experiment, the test and control values differ significantly.

Visual editor doesn't work.

Experimental changes don't appear on the page immediately.

Contact support
Previous
Varioqub experiments
Next
Usersplit API