Настройка блоков РСЯ

12
E
На сайте с 03.06.2013
Offline
113
11669

Добрый час! Помогите пожалуйста разобраться с настройкой блоков РТБ для адаптивного сайта, чтобы для каждого размера экрана показывалось нужный размер объявления.

KB
На сайте с 10.08.2006
Offline
164
KGB
#1
E
На сайте с 03.06.2013
Offline
113
#2

Да это понятно. Но как применить это все на практике. Хотелось бы увидеть пример кода удачной настройки блоков.

KB
На сайте с 10.08.2006
Offline
164
KGB
#3
eastfish:
то все на практике

На практике адаптивность РСЯ (РТБ) блоков работает через ж.... Впрочем как и все у яндекса

T
На сайте с 11.08.2005
Offline
181
#4

Также пытался настроить адаптивные блоки RTB, но безуспешно.

Отмечу, что адаптивные блоки AdSense с аналогичными/похожими настройками работают отлично.

GASPARD
На сайте с 20.06.2010
Offline
116
#5

Хз, вроде там все просто. Добавляешь свой класс или как у них в примере - yandex-adaptive - в код блока <div id="yandex_direct_R-A-12345-1" class="yandex-adaptive">

Потом идешь, к примеру, к себе в css сайта и там добавляешь типа этого:

@media screen and (max-width: 340px) {

.yandex-adaptive {

width:300px;

height:250px;

}

}

@media screen and (max-width: 500px) {

.yandex-adaptive {

width:336px;

height:280px;

}

}

Тут у всех остальных экранов что разрешение выше 500 будут показывать размер по умолчанию, который задал в самом аккаунте.

Здесь же все расписано https://yandex.ru/support/partner2/web/products-rtb/partner-code.xml#adaptive-css Остается размеры подобрать какие-тебе нужно и всё.

Но мне блок пока не нравится, размер шрифта у адаптивного мелкий и я так понял не меняется.

Самый до тупости адаптивный, где ничего не надо настраивать, это в вертикальных "Вертикальный", но там в медийки нет горизонтальных резиновых форматов рекламы.

KB
На сайте с 10.08.2006
Offline
164
KGB
#6
GASPARD:
Хз, вроде там все просто. Добавляешь свой класс

Просто?

Хорошо, вполне стандартная и часто встречающаяся ситуация. На десктопе у нас сайдбар, на планшете и смарте сайдбар "уходит" вниз.

Мы хотим, что бы в сайдбаре на десктопе у нас показывались квадратные или вертикальные блоки (включая и медийку, скажем 300х300, 300х600), а на планшете, когда "сайдбар" ушел вниз - горизонтальные.

И как это сделать? Не подгружая разные блоки скриптом, а с помощью т.н. "адаптивности" РСЯ?

Или. Ладно, делаем только горизонтальный адаптивный блок. Медийка нам при этом на выбор предлагает почти любые форматы, включая квадратные (нет только явных вертикальных). Берем только 100% на 90 и 100% на 120, которые нам подходят? оставим на всякий случай в строне вяские фиксированные, хотя выбор есть и по идее они должны бы показываться в зависимости от настроек адаптивности.

Вроде все нормально, блоки подбираются по ширине.

Но угадайте с одного раза, какой высоты будет ифрейм контейнер у блока? Правильно, 120 px. А нахрена нам блок высотой 90 px крутить вконтейнере в 120 px?

GASPARD
На сайте с 20.06.2010
Offline
116
#7
KGB:
Просто?
Но угадайте с одного раза, какой высоты будет ифрейм контейнер у блока? Правильно, 120 px. А нахрена нам блок высотой 90 px крутить вконтейнере в 120 px?

Я вас понял. C этим идиотизмом настроек согласен, но лично я никогда бы не поставил в перешедший вниз сайдбар блоки высотой 90 и 120. По мне так по медийке туда лучше фиксы 300x250 или 336x280, выровненные по центру... ну эт когда совсем сайдбар ушел вниз.

KB
На сайте с 10.08.2006
Offline
164
KGB
#8
GASPARD:
По мне так по медийке туда лучше фиксы 300x250

На смартфоне да, согласен, а на планшете, скажем 800 на 600 px? И не обязательно высотой 90 px. Блоки директа могли бы быть и 600 на 300px, а медийка подбираться в зависимости от максимальных размеров контейнера.

GASPARD:
выровненные по центру...

С центровкой тоже кстати через задницу, например, если задан резиновый блок и нефиксированном контейнере начинает показываться фиксированный блок

Bosca
На сайте с 25.05.2010
Offline
89
#9

Решение не мое, в соседней ветке ребята подсказали, вот:

Для реализации адаптивности в RTB блоках можно использовать два RTB блока. В одном из них нужно выбрать форматы 300х300 и 300х250, а в другом 728х90.

В смартфонах будет отображаться блок размером 300х300 или 300х250, а для планшетов и ПК блок размером 728х90.

Код:

<div id="yandex_ad" style="margin:0 auto;"></div>
<script type="text/javascript">
(function(w, d, n, s, t) {
if (window.matchMedia("only screen and (max-width: 728px)").matches){var m= "R-12345-1"; document.getElementById("yandex_ad").style.width = "300px";}
else{var m= "R-12345-2"; document.getElementById("yandex_ad").style.width = "728px";}
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: m,
renderTo: "yandex_ad",
async: true
});
});
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>

Для переменной m нужно указать id блока (в данном примере m= "R-12345-1" и m= "R-12345-2").

Если на странице несколько мест для установки блоков, нужно несколько скриптов с разным (уникальным) значением "yandex_ad", например, "yandex_ad1", "yandex_ad2" и т.д.

Ну и естественно, значения "R-12345-1" и "R-12345-2" меняем на значения ID своих блоков.

E-mail: seobosca@gmail.com ICQ: 609-392-535 Skype: seobosca
KB
На сайте с 10.08.2006
Offline
164
KGB
#10
Bosca:
Решение не мое,
Bosca:
window.matchMedia

Я не понимаю зачем использовать matchMedia, какой смысл? , тем более вроде опера мини его не понимает.

Используйте, только цифры свои ставьте и свои переменные.



<div id="rtbBlock"></div>

<script type="text/javascript">

var bvw=document.getElementsByTagName("body")[0].offsetWidth;

if ( bvw >= 1200 ){ rtbBlockID = "R-A-XXXX-1"; document.getElementById("rtbBlock").style.maxWidth = "850px";}

if ( bvw <= 1200 && bvw >= 980 ){ rtbBlockID = "R-A-XXXX-2"; document.getElementById("rtbBlock").style.maxWidth = "1200px"; }

if ( bvw <= 979 && bvw >= 730 ){rtbBlockID = "R-A-XXXX-3"; document.getElementById("rtbBlock").style.maxWidth = "980px"; }

if ( bvw <= 729 ){rtbBlockID = "R-A-XXXX-4"; document.getElementById("rtbBlock").style.maxWidth = "728px"; }

(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: rtbBlockID,
renderTo: "rtbBlock",
async: true
});
});
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_XXXXX-X"></div> задаем свой идентификатор <div id="rtbBlock"></div> . Имя "rtbBlock" может быть любым, главное, чтобы в коде renderTo: было именно в это имя.

в переменную var bvw = записываем ширину body

Далее сравниваем эту ширину и в зависимости от значения подгружаем в blockId идентификатор нужного вам блока. Не обязательно там делать 4 проверки и подгружать четыре варианта, кому достаточно и двух, а кому и 6 потребуется.

Ну а document.getElementById("rtbFooter").style.maxWidth = "XXXpx"; это в принципе можно и не использовать, просто добавляет style="max-width:XXXpx" к вашему контейнеру

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий