Как избежать внезапное появление рекламы в адаптивном шаблоне?

Question

[midarovrk]

Всем привет, посоветуйте как быть?

У меня есть сайт с адаптивным шаблоном.
Установил 4 рекламных блока от РСЯ в разных местах на странице.
Один рекламный блок находится перед контентом, после этого блока идут кликабельные постеры.
Проблема в том, что реклама изначально имеет нулевую высоту, она как бы тоже адаптивная, но загружается она на секунды 2-3 позже всего остального.
Т.е. когда она внезапно появляется, она смещает контент сильно вниз, и человек может случайно кликнуть по рекламе вместо постера.
Насколько я знаю случайные клики запрещены, как бы меня РСЯ не забанили за это.

Вот пример на скринах.

Скрин до появления рекламы:



Скрин после появления рекламы:



Как видите реклама сместила контент.
Обернуть рекламу в div с фиксированной высотой я не могу, так как и дизайн и реклама адаптивные, и высота рекламы меняется на разных устройствах.
Как я могу решить данную проблему?

Answer 1

[tioffs]

сделай фиксированную высоту под разрешения ПК от 1366 до 4к
в остальном случае auto
ну и как вариант пока реклама не загрузилась на пк или стоит addblock вставь туда заглушку

Comments

[midarovrk]

Я же сказал:

Обернуть рекламу в div с фиксированной высотой я не могу, так как и дизайн и реклама адаптивные, и высота рекламы меняется на разных устройствах.

[tioffs]

вы читать умеете я ведь написал: можно сделать под разные разрешения разной высоты блок!

[tioffs]

@media (max-width:1366) {
.block{
height:150px;
}
}

[midarovrk]

tioffs, это так себе вариант.
Надо будет знать какая именно у рекламы высота под определённое устройство и т.д. и т.п., куча гемора.
Реклама полностью автоматическая.
Сами РСЯ вот тут https://yandex.ru/support/partner2/web/products-rt... пишут:

Мы не рекомендуем выбирать адаптивный блок для вставки в контейнеры с фиксированной высотой.

Так же там есть кнопка "смотреть" демонстрирующая как изменятся реклама. Поэтому подобрать фиксированную высоту под все устройства нереально.

[midarovrk]

tioffs, media css я знаю как работает. Это не выход.

[Rustam Bainazarov]

midarovrk:
1. Страдать
2. Делать минимальную высоту для блока рекламы
3. Через JS блокировать клики у ссылок до тех пор, пока реклама не загрузится
5. Скрывать блоки с комиксами до тех пор, пока реклама не прогрузится
6. Переместить рекламу в иное место
7. Придумать что-нибудь ещё с JS и отображением
8. Первый клик по рекламе заблокировать с помощью JS в течение 2–3 секунд после загрузки рекламы, чтобы случайное нажатие не сработало. Если человек в течение этих 2–3 секунд нажмёт снова или это время пройдёт — разблокировать клики

Мой фаворит — 8-й вариант. Иных идей у меня больше нет в голове.

[midarovrk]

Рустам Байназаров, согласен, 8 вариант более менее может решить проблему :) Буду думать как такое написать.

[midarovrk]

Рустам Байназаров, только остаётся тот факт что дёрганье контента всё равно останется, и человек кликнет не туда куда хотел =(
Наверно лучше всего перенести рекламу вниз после контента.

[tioffs]

midarovrk,
как простой вариант

var b = document.querySelector('.block');
function a(e){return false;}
b.addEventListener('click', e)
setTimeout(function(){
b.target.removeEventListener('click', e);
},3000)

[Rustam Bainazarov]

midarovrk, ну а этого, если вы не знаете высоту рекламных блоков, вы не избежите, ибо они подгружаются после загрузки страницы со стороннего ресурса.

Если же у рекламы однотипная высота, то я бы поставил её изначально. А мне кажется, что она однотипная. Или же, что лучше, я думаю, она берется на основе соотношения сторон, поэтому сделайте её хаком на padding-bottom, если это возможно.

[midarovrk]

tioffs, спасибо, попробую, я так понял скрипт после первого клика по рекламе через три секунды уберёт запрет? А можете ещё прикрутить чтобы проверялась загрузилась реклама или нет, ну например если у div блока высота больше 0px, тогда через три секунды убирать запрет.

[Rustam Bainazarov]

midarovrk, ну да, так и надо. Нужна проверка с вашей рекламой. Вот отсчет скрипта нужно вешать не на клик, как в скрипте выше, а именно на момент готовности блока рекламы. Ну и плюс, там нет механизма, мол, если человек кликнет второй раз в течении этих 3 секунд, то уже переходить по ссылке. Иначе человек будет не понимать, что там вообще происходит, почему не работает ссылка.

Ну словом, вам нужно доработать, надеюсь, моя идея вам поможет в итоге :))

[midarovrk]

Рустам Байназаров, в общем, придумал сделать так =) gnatkovsky.com.ua/preloader-dlya-sajta-na-javascri...

[Rustam Bainazarov]

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

Есть смысл ставить такой прелоадер на область с контентом. А контент получать через AJAX.