Working with Yandex.Direct ad block code
You can enable the additional functions and change certain settings by directly editing the ad code without using the code designer in the interface.
The Ya.Context.AdvManager.render
function is responsible for invoking the ad in the code.
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.
function renderRtb () {
Ya.Context.AdvManager.render({
blockId: "R-A-12345-1",
renderTo: 'rtb',
async: true,
onRender: function(data) {
console.log(data.product);
}
});
};
(function(w, d, n, s, t) {
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");
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.
<div id="yandex_rtb_1"></div>
<script type="text/javascript">
(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-12345-1",
renderTo: "yandex_rtb_1",
async: true,
pageNumber: 1
});
});
t = d.getElementsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");
</script>
<div id="yandex_rtb_2"></div>
<script type="text/javascript">
(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-12345-1",
renderTo: "yandex_rtb_2",
async: true,
pageNumber: 2
});
});
t = d.getElementsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");
</script>
Container size for an adaptive ad block
The adaptive ad 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.
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>
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.