Working with RTB ad block code

You can enable the additional functions and change certain settings by directly editing the ad invocation code without using the interface editor.

The Ya.Context.AdvManager.render function is responsible for invoking the ad in the code.

Attention. We do not recommend that inexperienced users make their own changes to the ad unit invocation code. Any changes to the variables and functions other than those described on this page may lead to errors in how the Advertising Network units function and, consequently, to a decrease in revenue.

Visual design of Yandex.Direct ads

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

Variable name Description Data type
bgColor Ad background color. Hex color code
siteBgColor Site background Hex color code
headerBgColor Header background color. Hex color code
borderColor Border background color. Hex color code
titleColor Ad title color. Hex color code
textColor Ad text color. Hex color code
sitelinksColor Sitelinks color. Hex color code
urlColor Color of the advertiser's URL and/or link for “Address and phone number”. Hex color code
hoverColor Color of title during mouse-overs. Hex color code
Example of ad invocation 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 units

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

Variable name Description Data type
statId Sample ID A number between 1 and 1000000000

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

The sample ID for the unit R-A-12345-1 in the example — 34567. It can also be specified in other units. This will allow you to view group statistics for these units. When you place the unit 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 the advertisement is rendered

The onRender Callback function allows you to obtain information about whether the ad has been rendered (whether the ad was successfully selected when the RTB system was queried) 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 a RTB unit

  • rtb — A media ad was shown in a RTB unit.

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 unit

If there were no suitable product listings at the auction to show your ad next to, then you can show your ad in the unit. 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 invocation function for your ad as the last parameter Ya.Context.AdvManager.render.

Restriction.

The invocation code for the RTB unit can be synchronous or asynchronous. Only asynchronous JavaScript code can be used in your ad invocation function.

Example of asynchronous code for inserting your ad code.
Example of synchronous code for inserting your ad code.

The ad is shown in infinite scroll feeds

To display ads in infinite scroll feeds, you can use the same ad unit. You only need to change the pageNumber parameter and the name of the renderTo container. The unique blockId unit ID that can be found in the editor remains unchanged.

Example of the invocation code for the first unit
<div id="rtb-5-1"></div>
<script type="text/javascript">
    (function (w, d, n, s, t) {
        function renderRtb () {
            Ya.Context.AdvManager.render({
                blockId: "R-A-12345-1",
                renderTo: "rtb-5-1",
                pageNumber: 1
            });
        }
        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>
Example of the invocation code for the second unit
<div id="rtb-5-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-5-2",
                pageNumber: 2
            });
        }
        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>

Dimensions of the container for displaying the custom unit

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

  1. Add the tag div CSS classyandex-adaptive in the invocation 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 dimensions 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;
        }
    }

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

Note. If you want the container to always use the same dimensions, specify them in the visual code editor in the interface.