Клуб Рекламной сети Яндекса

Два объявления для разных разрешений

DesignerMix
4 февраля 2015, 13:41

Здравствуйте, недавно подключил свой сайт к рекламной сети, все работает нормально, но я решил немного оптимизировать отображение страниц для мобильных устройств. В связи с этим сделал два разных блока объявлений Яндекс Директ.

Блок А имеет фиксированный размер (728x90) и может отображать до 3-х объявлений - он показывается для пользователей с большим разрешением;

Блок Б стандартный горизонтальный на одно объявление - он отображается для мобильных устройств.

 

Реализовал я это следующим образом:


<!-- начало рекламного баннера для больших экранов -->

<div class="ad_yandex_standart">

<!-- Яндекс.Директ -->

</div>

<!--конец рекламного баннера для больших экранов-->  

 

<!-- начало рекламного баннера для мобильных устройств -->

<div class="ad_yandex_mobile">

<!-- Яндекс.Директ -->

</div>

<!--конец рекламного баннера для мобильных устройств-->

 

Для классов ad_yandex_standart и ad_yandex_mobile в CSS прописал следующие правила (при размере окна менее 728px отключается один блок и включется другой):

 

@media only screen and (max-width: 728px), only screen and (max-device-width: 728px) {

/* Отключаю рекламу yandex для больших экранов*/

.ad_yandex_standart {

display: none;

text-align: center;}

/* Включаю рекламу yandex для мобильных устройств*/

.ad_yandex_mobile {

display: block;

text-align: center;}

}

*При этом в другом CSS стоит правило на отключение блока для мобильных устройств пока размер окна не уменьшился до 728px


Когда все это начинает работать то отображается только рекламный блок Б (вместо Блока А просто пустое место). При этом для объявлений Google подобная схема работает корректно (т.е. отключется стандартное объявление и включается мобильное).


На сколько я понимаю проблема в том, что объявление пропадает только визуально, но продолжает подргужаться и поэтому система блокирует отображение Блока А т.к. считает что пользователь видит и Блок А и Блок Б.

 

В связи с этим возникает вопрос - Как сделать так, что-бы объявление подгружались не оба сразу, а поочереди (в соответсвии с правилами CSS)?

 

PS: Я знаю что можно разместить стандартное (не фиксированное) объявление и оно будет регулировать свой размер автоматически, но мне это не очень нравится т.к. страница довольно сильно плывет.

21 комментарий
Подписаться на комментарии к посту

После проверки на разрешение экрана подгружайте тот или иной блок, а не скрывайте, так будет вернее. То есть вообще вызов к коду РСЯ должен отправляться после прохождения проверки.

ну т.е. уже не средствами css, а js

Да, или JS или, например, PHP.

Спасибо за совет.

Я пробую сделать это на jquery следующим образом:


       

А ниже вставляю коды рекламы. Вместо # пробовал ставить точку но ничего не меняется.

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

Нет ничего хорошего в том, что один из блоков будет всегда загружаться и не показываться. Лучше, в зависимости от ширины, вставлять на страницу код подходящего блока:

Нужно только проследить, чтобы этот код не вызывался несколько раз.

А аяксом подгружать блок директа можно? А то гугл свои, вроде, не разрешает почему-то...

Если для того чтобы обновить содержимое блока или показать его в нужны вам момент, то это делает асинхронный код.

На AJAX-сайтах с помощью асинхронного кода можно настроить обновление содержимого рекламного блока при изменении контента страницы или при другом указанном событии. Для этого необходимо повторно вызывать функцию:
Ya.Direct.insertInto( XXXX, "yandex_ad", { /*… Настройки вашего блока … */}) ;

Нет не для этого, но приведенная Вами ссылка и цитата ответили на мой вопрос: "На AJAX-сайтах..." == "можно вставлять рекламу в блоки кода, подгружаемые через аякс".

Спасибо.

Хорошо, а такой вариант, скажем для РТВ или директа с асинхронной загрузкой?










 

Я реализовал проще. Установил два блока и при определённом разрешении один блок склыдывается (исчезает). Пример: http://www.electro-sila.ru/forum/

Не намекнете куда смотреть? Я понял только что у вас подгружаются сразу несколько блоков рекламы и в шапке выбирается либо yandex_ad1 либо yandex_ad5. Но как это сделано мне не ясно.

Подскажите, какой мод вообще используется в форумах phpBB для мобильных устройств?

Извините что не по теме.

phpBB начиная с версии 3.1.x использует не моды, а расширения и имеет сразу адаптивный стиль для мобильных устройств который я как раз и пытаюсь допилить для рекламы. А если вы используете более старую версию то посмотрите на стиль для мобильных устройств Artodia: Mobile and SEO

В phpBB больше нет модов - всё на расширениях. Это новая, адаптивная версия phpBB 3.1. Там стиль один для всех устройств, он адаптируется автоматически. Вышла эта версия всего месяц назад. Форуму тоже месяц.

Попробуйте свернуть плавно окно браузера и увидите.

Вот здесь все модификации этого форума http://www.electro-sila.ru/forum/viewtopic.php?f=27&t=16

Два рекламных модуля - один вверху, другой внизу. Смотрите на любой.

На втором прячующемся блоке стоит класс "blok_end". На мобиле блок "yandex_ad5" прячется, а "yandex_ad1" остаётся. На компе отображаются оба блока.

 

Реализовано так:

responsive.css

.blok_end {
    display: none;
}

 

Тоже интересно: Обратите внимание на шапку форума. Картинки в зависимости от разрешения уменьшаются или прячутся...

Все понял! Спасибо! Изначально я все делал правильно но проблема была только в том, что рекламные блоки имели одинаковые ID - yandex_ad

Как только я изменил идентификатры все заработало.

Это изменение ведь никак не повлияет на работу блоков? Просто на сколько я понял менять код рекламы запрещено.

Конечно. Вы же не меняете код блока.

Скрывать блок неправильное решение, так делать не надо. Прислушайтесь к другим участникам дискуссии и сделайте так, чтобы тот или иной код вызывался при выполнении условий. Не нужно дергать код тогда, когда вы его не показываете.

Я прислушался, сейчас пытаюсь это наладить. Код предложенный пользователем solustra применить не получается пока т.к. не могу разобраться с тем, как правильно добавить рекламный код в .html("");

Все работает если добавляю обычный но когда вставляю код рекламы то из-за кавычек или еще по какой-то причине код перестает работать... Буду думать

Я бы не стал так делать. Ведь в этом случае будут загружаться и отрабатывать оба варианта блоков (один из них будет просто скрываться). Это могут посчитать нарушением правил, т.к. блок загружается, но не показывается. А также статистика будет нарушена.

 

Спасибо всем кто подсказывал, я временно восстановил все как было и теперь на сайте отображается реклама не привязанная к разрешению экрана. Буду искать способ реализации на PHP т.к. на сколько я понял это самый правильный и простой выход.