- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ
Экспертная оценка Адмитад
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Добрый час! Помогите пожалуйста разобраться с настройкой блоков РТБ для адаптивного сайта, чтобы для каждого размера экрана показывалось нужный размер объявления.
https://yandex.ru/support/partner2/web/products-rtb/partner-code.xml
https://yandex.ru/support/partner2/web/products-rtb/partner-code.xml
Да это понятно. Но как применить это все на практике. Хотелось бы увидеть пример кода удачной настройки блоков.
то все на практике
На практике адаптивность РСЯ (РТБ) блоков работает через ж.... Впрочем как и все у яндекса
Также пытался настроить адаптивные блоки RTB, но безуспешно.
Отмечу, что адаптивные блоки AdSense с аналогичными/похожими настройками работают отлично.
Хз, вроде там все просто. Добавляешь свой класс или как у них в примере - 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 Остается размеры подобрать какие-тебе нужно и всё.
Но мне блок пока не нравится, размер шрифта у адаптивного мелкий и я так понял не меняется.
Самый до тупости адаптивный, где ничего не надо настраивать, это в вертикальных "Вертикальный", но там в медийки нет горизонтальных резиновых форматов рекламы.
Хз, вроде там все просто. Добавляешь свой класс
Просто?
Хорошо, вполне стандартная и часто встречающаяся ситуация. На десктопе у нас сайдбар, на планшете и смарте сайдбар "уходит" вниз.
Мы хотим, что бы в сайдбаре на десктопе у нас показывались квадратные или вертикальные блоки (включая и медийку, скажем 300х300, 300х600), а на планшете, когда "сайдбар" ушел вниз - горизонтальные.
И как это сделать? Не подгружая разные блоки скриптом, а с помощью т.н. "адаптивности" РСЯ?
Или. Ладно, делаем только горизонтальный адаптивный блок. Медийка нам при этом на выбор предлагает почти любые форматы, включая квадратные (нет только явных вертикальных). Берем только 100% на 90 и 100% на 120, которые нам подходят? оставим на всякий случай в строне вяские фиксированные, хотя выбор есть и по идее они должны бы показываться в зависимости от настроек адаптивности.
Вроде все нормально, блоки подбираются по ширине.
Но угадайте с одного раза, какой высоты будет ифрейм контейнер у блока? Правильно, 120 px. А нахрена нам блок высотой 90 px крутить вконтейнере в 120 px?
Просто?
Но угадайте с одного раза, какой высоты будет ифрейм контейнер у блока? Правильно, 120 px. А нахрена нам блок высотой 90 px крутить вконтейнере в 120 px?
Я вас понял. C этим идиотизмом настроек согласен, но лично я никогда бы не поставил в перешедший вниз сайдбар блоки высотой 90 и 120. По мне так по медийке туда лучше фиксы 300x250 или 336x280, выровненные по центру... ну эт когда совсем сайдбар ушел вниз.
По мне так по медийке туда лучше фиксы 300x250
На смартфоне да, согласен, а на планшете, скажем 800 на 600 px? И не обязательно высотой 90 px. Блоки директа могли бы быть и 600 на 300px, а медийка подбираться в зависимости от максимальных размеров контейнера.
выровненные по центру...
С центровкой тоже кстати через задницу, например, если задан резиновый блок и нефиксированном контейнере начинает показываться фиксированный блок
Решение не мое, в соседней ветке ребята подсказали, вот:
Для реализации адаптивности в 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 своих блоков.
Решение не мое,
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" к вашему контейнеру