Working with RTB ad block code

Visual design of Yandex.Direct ads

You can override the visual design settings specified in the interface by adding variables to the ad code. The variables are stored in the directSettings parameter.

Example of ad code with directSettings variables

<div id="rtb-0"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-0",
                async: true,
                directSettings: {
                    titleColor: "#f00",
                    urlColor: "#00a",
                    hoverColor: "#00f",
                    bgColor: "#0f0",
                    siteBgColor: "#000",
                    borderColor: "#f00"
                }
            });
        }
        w[n] = w[n] || [];
        w[n].push(renderRtb);
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "http://an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

Statistical samples for RTB blocks

You can additionally specify sample identifiers (IDs) and collect separate statistics using samples in the RTB block code. The sample ID is provided in a separate variable:

Enter the sample ID in the ad code to be placed on the site. For example:

The sample ID for the block R-A-12345-1 in the example is 34567. It can also be specified in other blocks. This will allow you to view group statistics for these blocks. When you place the block R-A-12345-1 on other pages, you can specify another sample ID in order to view separate statistics for each separate ad display location.

Statistical reports that are grouped by sample can be created using the designer.

The callback function that is invoked after ad rendering

The onRender Callback function allows you to obtain information about whether the ad has been rendered (whether the ad was successfully selected when requested from the RTB system) and which particular ad was shown. The function obtains the data.product parameter with one of two values:

• direct — Yandex.Direct ads were shown in an RTB ad block.

• rtb — A media ad was shown in an RTB ad block.

The onRender callback function must be added as the last parameter in the Ya.Context.AdvManager.render function. The function can only be used in asynchronous code for invoking the ad.

An example of asynchronous code that is used to invoke an ad with the onRender function

<div id="rtb-2"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-2",
                async: true,
                onRender: function (data) {
                    console.log(data.product);
                }
            });
        }
        w[n] = w[n] || [];
        w[n].push(renderRtb);
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "http://an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

Function to invoke your ad in the RTB block

If there were no suitable product listings at the auction to show your ad next to, then you can show your ad in the block. If you want to use the code of third-party banner systems as your ad code, you must insert the code manually. Obtain the code in the visual designer in the interface and add the function for calling your ad as the last Ya.Context.AdvManager.render parameter.

Ad impressions in infinite scroll feeds

To display ads in infinite scroll feeds, you can use the same ad block and just change the pageNumber parameter and the name of the renderTo container. The unique blockId from the code designer remains unchanged.

Container size for a custom-size ad block

The custom-size block adapts to the size of the container and is suitable for sites with an adaptive layout. Use stylesheets to specify the container size for sites with an adaptive layout.

1. Add the tag div CSS classyandex-adaptive in the ad code that you obtained in the interface.

   Example

   <div id="yandex_direct_R-A-12345-1" class="yandex-adaptive"></div>

2. Use media-queries to configure the container to accept various sizes depending on the screen resolution.

   Example

   @media screen and (max-width: 800px) {
       .yandex-adaptive {
           width:200px;
           height:300px;
       }
   }
   
   @media screen and (max-width: 1024px) {
       .yandex-adaptive {
           width:240px;
           height:400px;
       }
   }

   So ads will be displayed in a 200×300 block on screens that are up to 800 pixels wide, and in a 240×400 block on screens that are between 800 and 1024 pixels wide. If the screen is more than 1024 pixels wide, then the ad block will use the dimensions specified in the interface.