Ad experiments

1. On the site, modify the ad unit code. Example of a modified YAN code:

   <!-- Yandex.RTB R-A-111111-1 -->
   <div id='yandex_rtb_R-A-111111-1'></div>
   <script>
       ymab('metrika.XXXX', 'init', () => {
           window.yaContextCb.push(()=>{
               Ya.Context.AdvManager.render({
                   'blockId': 'R-A-111111-1',
                   'renderTo': 'yandex_rtb_R-A-111111-1'})
           })
       })
   </script>
   

   where

   • R-A-111111-1 is the ad unit ID.
   • XXXX is the ID of the Yandex Metrica tag installed on your site.

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

3. Choose the Visual editor experiment type and specify the URL of the page you want to edit.

4. Click Edit next to Variant 1. This opens the page you specified in the visual editor field. You don't need to make any changes to the control variant. That version of the page is used in the experiment in its current form.

5. Click the unit you want to apply experimental changes to. The visual editor window opens.

6. To change the size or appearance of the container, go to the unit's parent element. To do this, click .

   

7. On the CSS tab, specify the property that you want to apply in the experimental variant and click Save.

   To make sure that your changes are applied, under Experiment testing, click Test next to each variant. The site version associated with the selected variant opens at a link generated by Varioqub. You can share this link within 24 hours of its generation. Clicking Test again generates a new link.

8. Click Save and run.

You can also use the visual editor to add an ad unit embed code. This can be useful for testing new ad placements on your site. We recommend choosing Floor Ad, Top Ad, or Interstitial ad units. For example, you can do this in the Yandex Advertising Network.

1. Configure the Varioqub library by adding the following code to the library:

   <script>
   ymab('metrika.XXXX', 'setConfig', {
       enableJS: true,
   });
   </script>
   

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

3. Choose the Visual editor experiment type and specify the URL of the page you want to edit.

4. Click Edit next to Variant 1. This opens the page you specified in the visual editor field. You don't need to make any changes to the control variant. That version of the page is used in the experiment in its current form.

5. On the page, select an element that appears on all pages of your site, for example, a footer.

6. Select the JS tab and add the function from the ad unit code.

   

   An ad container will appear on all pages where your chosen element is present, and the code from the JS tab will be called.

7. Click Save.

8. Check if your code is processed correctly on different site pages: for example, on the home page, in an article, or in other sections of your site.

1. In Varioqub, set the name and values of the flag. For example, enter block for the flag name, A for the control value, and B for Variant 1.

   

2. In the HTML code of the page, specify the ad containers to run the experiment on:

   ...
   <div id="rsya_varioqub_A"></div>
   <div id="rsya_varioqub_B"></div>
   ...
   

   Next, change the ad unit code on the site as described below.

3. Create a function for calling the control variant. In this example, the R-A-111111-1 unit is called:

   <script>
   function vq_call_block_a() {
   window.yaContextCb.push(()=>{
     Ya.Context.AdvManager.render({
       renderTo: 'rsya_varioqub_A',
       blockId: 'R-A-111111-1'
     })
   })
   }
   </script>
   

4. Create a function for calling Variant 1. In this example, the R-A-111111-2 unit is called:

   <script>
   function vq_call_block_b() {
   window.yaContextCb.push(()=>{
     Ya.Context.AdvManager.render({
       renderTo: 'rsya_varioqub_B',
       blockId: 'R-A-111111-2'
     })
   })
   }
   </srcipt>
   

5. Create a function for handling what happens when the experiment ends or in other scenarios (for example, when a page view doesn't match the filters set in the experiment settings):

   <script>
   function vq_call_block_default() {
   console.log('The experiment is complete or not launched on this page');
   }
   </script>
   

6. Create a function for applying experiment flags as follows:

   <srcipt>
   function render_ab_answer(flags) {
     const flagVal = flags && flags.block && flags.block[0];
   switch
   (flagVal)
   {
      case 'A':
           vq_call_block_a();
           break;
      case 'B':
           vq_call_block_b();
           break;
      default:
           vq_call_block_default();
           break;
   }}
   </script>
   

7. Configure the passing of flags to the function from step 4 using the ymab function:

   <srcipt>
   ymab('metrika.XXXX', 'init', function (answer) {
     render_ab_answer(answer.flags);
   })
   </script>
   

   Note

   The ymab function with the init method is called only once to pass flags.

8. Check if your code is processed correctly on different site pages: for example, on the home page, in an article, or in other sections of your site.

<script>
//Function to call the control variant
function vq_call_block_a() {
window.yaContextCb.push(()=>{
 Ya.Context.AdvManager.render({
  renderTo: 'rsya_varioqub_A',
  blockId: 'R-A-11111-1'
 })
})
};
//Function to call Variant 1
function vq_call_block_b() {
window.yaContextCb.push(()=>{
 Ya.Context.AdvManager.render({
  renderTo: 'rsya_varioqub_B',
  blockId: 'R-A-11111-2'
 })
})
};
//Function to call the default variant
function vq_call_block_default() {
console.log('The experiment is complete or not launched on this page');
};
//Function to apply flags
function render_ab_answer(flags) {
  const flagVal = flags && flags.block && flags.block[0];
switch
(flagVal)
{
   case 'A':
        vq_call_block_a();
        break;
   case 'B':
        vq_call_block_b();
        break;
   default:
        vq_call_block_default();
        break;
}};
//Function to get values from the settings of an experiment launched in Yandex Metrica and then pass the values to the function above
ymab('metrika.XXXX', 'init', function (answer) {
  render_ab_answer(answer.flags);
})
</script>