Подстраиваем рекламные блоки Adsense под экраны пользователей

0

Не так давно, в Google Adsense появился новый тип объявлений «Адаптивный». Плюс его в том, что блок рекламы принимает форму в зависимости от ширины экрана. Очень удобный формат для сайтов которые посещают как с компьютеров так и с мобильных устройств. Я же вам сегодня покажу как сделать не просто адаптивный блок рекламы, но и сделать так чтобы он не загружался пока не попадет в зону видимости пользователя, а так же сделаем подложку под блок с уведомлением о загрузке рекламного блока.

Как это работает по умолчанию?

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

загрузка рекламы adsense по умолчанию

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

Проблема еще и в том, что размер объявления указывается один раз при загрузке страницы. Даже если вы пользуетесь адаптивным форматом рекламы, при изменении размера окна браузера или при повороте планшета, ширина блока останется неизменной, вот так это выглядит:

не адаптивный блок

Давайте не будем забывать что наш заработок напрямую зависит от CTR. Увеличивая количество кликов, вы обрекаете себя на безбедное существование! Поэтому ваша задача сделать все для того, чтобы реклама была органично вписана в контент и пользователь захотел кликнуть по ней.

Загрузка объявления в видимой области и адаптивность на лету

На просторах интернета мною был найден скрипт, который подгружал только те объявления, которые находились непосредственно в видимой области экрана. А те которые находились ниже, подгружались по мере прокрутки страницы. Еще одна особенность этого скрипта — адаптивность «на лету». При изменении размеров окна браузера, или при повороте планшета, автоматически подгружается нужный размер объявления. Вот как это выглядит на примере:

google-adsense-podgruzka-vidimykh-obyavleniy
google-adsense-adaptivnost

Круто ведь, согласитесь! Теперь перейдем к делу…

Подключение скрипта и стилей для адаптивных блоков рекламы

Теперь займемся непосредственно настройкой всего этого дела. В первую очередь необходимо подключить библиотеку adsenseloader.js (в header или в footer, там где у вас подключены основные стили и библиотеки). После этого нужно инициализировать скрипт, для этого вставляем следующий скрипт на страницы, в которых будет выводиться реклама:

Сам код рекламного блока нужно будет немного сократить и вставить в контейнер:

Как видите, из всего кода я вставил только <ins> содержащий data-ad-client и data-ad-slot.

На скриншоте показано где именно я взял этот код:

chto-brat-iz-reklamnogo-koda

Ниже рекламного блока вставлен абзац с текстом «Загрузка», этот блок будет выводиться фоном, перед загрузкой самого рекламного блока. Выглядеть это будет примерно так:

google-adsense-podlozhka

Теперь осталось добавить необходимые стили в ваш файл стилей:

В принципе уже на этом этапе, реклама на вашем сайте будет вставляться адаптивно с подложкой «Загрузка…». Все стили вы можете переопределить под свои размеры и нужды. На этой странице вы можете посмотреть как вся эта красота работает в деле.

Источник

Комментарии:


Присоединяйся к нам