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

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

18.11.2016

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

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

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

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

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

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

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

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

google-adsense-podgruzka-vidimykh-obyavleniy

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

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

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

// vanilla
var instance = new adsenseLoader( '.adsense' ); // accepted argument types: Selector String, Element, NodeList, Array
 
// jQuery
$( '.adsense' ).adsenseLoader();

// vanilla

var instance = new adsenseLoader( '.adsense' ); // accepted argument types: Selector String, Element, NodeList, Array

// jQuery

$( '.adsense' ).adsenseLoader();

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

<div class="adsense">
    <ins data-ad-client="ca-pub-9569654697215470" data-ad-slot="1199594945"></ins>
    <p class="adsense__loading"><span>Загрузка&hellip;</span></p>
</div>

<p class="adsense__loading"><span>Загрузка…</span></p>

</div>

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

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

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

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

/* AD STYLING */

.adsense {
    width: 847px;
    height: 90px;
    background-color: #fff;
    display: block;
    margin: 0 auto;
}

.adsense:before { display: none !important; }
.adsense ins    { width: 100%; height: 100%; display: block; }

.adsense {
    position: relative;
}

    .adsense__loading {
        width: 100%;
        height: 100%;
        background-color: #ecf0f1;
        display: table;
        position: absolute;
        top: 0;
        left: 0;
    }
    .adsense--loaded .adsense__loading { display: none; }

        .adsense__loading span {
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        }

@media screen and ( max-width: 64em ) /* <= 1024 */
{
    .adsense { width: 639px; height: 90px; }
    .adsense:before    { content: '1024'; }            
}

@media screen and ( max-width: 50em ) /* <= 800 */
{
    .adsense { width: 468px; height: 60px; }
    .adsense:before    { content: '800'; }
}

@media screen and ( max-width: 33.75em ) /* <= 540 */
{
    .adsense { width: 336px; height: 280px; }
    .adsense:before    { content: '540'; }
}

@media screen and ( max-width: 26.25em ) /* <= 420 */
{
    .adsense { width: 250px; height: 250px; }
    .adsense:before    { content: '420'; }
}

/* AD STYLING */

.adsense {

width: 847px;

height: 90px;

background-color: #fff;

display: block;

margin: 0 auto;

}

.adsense:before { display: none !important; }

.adsense ins { width: 100%; height: 100%; display: block; }

.adsense {

position: relative;

}

.adsense__loading {

width: 100%;

height: 100%;

background-color: #ecf0f1;

display: table;

position: absolute;

top: 0;

left: 0;

}

.adsense--loaded .adsense__loading { display: none; }

.adsense__loading span {

text-align: center;

vertical-align: middle;

display: table-cell;

}

@media screen and ( max-width: 64em ) /* <= 1024 */

{

.adsense { width: 639px; height: 90px; }

.adsense:before { content: '1024'; }

}

@media screen and ( max-width: 50em ) /* <= 800 */

{

.adsense { width: 468px; height: 60px; }

.adsense:before { content: '800'; }

}

@media screen and ( max-width: 33.75em ) /* <= 540 */

{

.adsense { width: 336px; height: 280px; }

.adsense:before { content: '540'; }

}

@media screen and ( max-width: 26.25em ) /* <= 420 */

{

.adsense { width: 250px; height: 250px; }

.adsense:before { content: '420'; }

}

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

Источник