Адаптивная Adsense реклама с ленивой загрузкой

Адаптивная Adsense реклама с ленивой загрузкой

От автора: Вы потрудились над оптимизацией своего сайта, добавили такие вещи как Google Maps с ленивой загрузкой, и вам интересно, есть ли еще что-то, что можно сделать. К примеру, можно ли как-то улучшить загрузку рекламы? Хорошие новости – кое-что сделать можно. Можно не тратить тарифный план пользователя и загружать рекламу только, когда она попадает на экран. Также можно подгонять размер рекламы под экран устройства. Было бы неплохо с вашей стороны. Это было бы не просто адаптивно, а ответственно.

Проблема

В Google Adsense файл рекламы вместе со скриптом загружается автоматически, что может непомерно замедлить отрисовку других важных вещей: стилей, шрифтов и других скриптов.

Адаптивная Adsense реклама с ленивой загрузкой

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

Адаптивная Adsense реклама с ленивой загрузкой

Аргументы

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

По логике вещей Google Adsense не должен отслеживать просмотры рекламы, если она не попала в область просмотра. Не знаю, есть ли в Google Adsense такой тип проверки, но технология основана на JS, так что у них есть все средства.

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

Решение

Я создал JS плагин. Он использует ленивую загрузку для рекламы:

Адаптивная Adsense реклама с ленивой загрузкой

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

Адаптивная Adsense реклама с ленивой загрузкой

Баннер загружается под конкретное разрешение.

JavaScript

Сам плагин – это совсем чуть-чуть JS кода. Я сделал две версии: чистый JS и JQuery. Плагин называется adsenseLoader. Скачать файлы можно отсюда:

adsenseloader.js; независимый (IE 9+). 1.1KB после минификации и сжатия.

jquery.adsenseloader.js; использует jQuery. 835 байт после минификации и сжатия.

Инициализация плагина:

// vanilla
var instance = new adsenseLoader( '.adsense' ); // принимаемые типы аргумента: Selector String, Element, NodeList, Array
 
// jQuery
$( '.adsense' ).adsenseLoader();

Плагин можно кастомизировать. Настройки по умолчанию:

var options =
{
    laziness: 1,
    /*
        @int (<=0)
        Тут задается тип ленивой загрузки рекламы: (высота окна) * laziness . К примеру:
        0 – загрузка рекламы начинается при малейшем попадании блока рекламы в область просмотра;
        1 – загрузка рекламы начинается, когда расстояние от края до блока с рекламой больше высоты этого блока;
        2 – 2x от окна, и т.д.		
    */
 
    onLoad: false
    /*
        @bool
        Колбэк функция, запускающаяся после полной загрузки рекламы.
        Передается один аргумент рекламы (объект). К примеру:
        onLoad: function( ad )
        {
            alert( ad.getAttribute( 'data-ad-slot' ) + ' ad is loaded' );
        }
    */
};
 
// vanilla
var instance = new adsenseLoader( '.adsense', options );
 
// jQuery
$( '.adsense' ).adsenseLoader( options );

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

// vanilla
var instance = new adsenseLoader( '.adsense', options );
 
instance.destroy();
// или
document.querySelectorAll( '.adsense' )[ 0 ].adsenseLoader( 'destroy' );
 
 
// jQuery
$( '.adsense' ).adsenseLoader( options );
 
$( '.adsense' ).adsenseLoader( 'destroy' );
// или
$( '.adsense' ).eq( 0 ).adsenseLoader( 'destroy' );

И наконец, можно изменить еще пару опций, которые повлияют на все объекты плагина. Функцию можно вызвать откуда угодно, но она спроектирована, чтобы ее вызывали до создания объектов плагина. Опции по умолчанию:

var options =
{
    scriptUrl: '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
    /*
        @string (url)
        URL для исполняющего скрипт файла Google Adsense
    */
 
    throttle: 250
    /*
        @int (miliseconds)
        Определяет частоту перерасчетов в плагине, когда 
	меняется размер окна браузера или прокручивается экран.
        250 значит, что перерасчеты будут происходить 4 раза в секунду.
    */	
};
 
// vanilla
adsenseLoaderConfig( options );
 
// jQuery
$.adsenseLoaderConfig( options );

HTML

Тут нужно упростить кусок кода Adsense, оставив только два параметра и перенеся их в контейнер:

CSS

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

.adsense {
    width: 970px;
    height: 90px;
    display: block;
}
.adsense:before { display: none !important; }
.adsense ins    { width: 100%; height: 100%; display: block; }
 
@media screen and ( max-width: 1024px ) {
    .adsense        { width: 728px; height: 90px; }
    .adsense:before { content: '1024'; }
}
 
@media screen and ( max-width: 800px ) {
    .adsense        { width: 468px; height: 60px; }
    .adsense:before { content: '800'; }
}

/* и т.д. */

К счастью, Adsense умеет сам подбирать размеры баннера под переданные разрешения. Свойства width и height в селекторе .adsense говорят Adsense, какие ждать размеры.

С помощью медиа запросов и псевдоэлемента :before мы говорим плагину, когда необходимо перезагрузить рекламу. JS часть проверяет изменение значения content. Реклама перезагружается сразу после обнаружения изменения. В медиа запросах можно использовать любые целые числа. В моих примерах я приравнял ширину в медиа запросах для упрощения работы с кодом.
Изменение размера баннеров разбивается на два этапа: логика в CSS и исполнение в JS.

Демо

Если вы используете средства блокирования рекламы, которые блокируют Adsense, вы ничего не увидите. Посмотрите демо Lazy-Loading Responsive Adsense Ads от Osvaldas (@osvaldas) на CodePen. Будем рады, если вы присоединитесь к проекту на GitHub.

Размещение нескольких блоков рекламы

Быстрый совет, как управлять несколькими блоками рекламы разных размеров. К примеру, у нас два баннера: один в контенте и другой в сайдбаре. Им можно присвоить разные классы.

Теперь можно прописать общие стили для .adsense и индивидуальные стили для .adsense—main и .adsense—sidebar:

.adsense{
    display: block;
}
.adsense:before     { display: none !important; }
.adsense ins        { width: 100%; height: 100%; display: block; }
 
.adsense--main      { width: 728px; height: 90px; }
.adsense--side      { width: 336px; height: 280px; }
 
@media screen and ( max-width: 1024px ){
    .adsense--main          { width: 468px; height: 60px; }
    .adsense--main:before   { content: '1024'; }
}
 
@media screen and ( max-width: 800px ){
    .adsense--side          { width: 250px; height: 250px; }
    .adsense--side:before   { content: '800'; }
}

Индикация загрузки рекламы или преимущества onLoad()

Вы можете показать процесс загрузки несколькими способами: добавив плейсхолдер-изображение, текст, рамку, фон или что-либо другое, что подходит под ваш дизайн и будет отображаться до загрузки рекламы:

Адаптивная Adsense реклама с ленивой загрузкой

Нам необходимо добавить пару HTML тегов и стилей, которые добавят перекрывающий слой с текстом «Loading…».

.adsense {
    position: relative;
}
    .adsense__loading {
        width: 100%;
        height: 100%;
        background-color: rgba( 255, 255, 255, .9 );
        display: table; /* for vertical centering */
        position: absolute;
        top: 0;
        left: 0;
    }
    .adsense--loaded .adsense__loading { display: none; }
 
        .adsense__loading span {
            text-align: center;
            vertical-align: middle; /* for vertical centering */
            display: table-cell; /* for vertical centering */
        }

Адаптивная Adsense реклама с ленивой загрузкой

С помощью колбэк функции onLoad() можно добавить класс adsense—loaded, который прячет элемент .adsense__loading:

// vanilla
var instance = new adsenseLoader( '.adsense',
{
    onLoad: function( ad )
    {
        if( ad.classList )
            ad.classList.add( 'adsense--loaded' ); // IE 10+
        else
            ad.className += ' ' + 'adsense--loaded'; // IE 8-9
    }   
});
 
// jQuery
$( '.adsense' ).adsenseLoader(
{
    onLoad: function( $ad )
    {
        $ad.addClass( 'adsense--loaded' )
    }
});

Адаптивная Adsense реклама с ленивой загрузкой

Спасибо, что прочитали статью и за то, что вы ответственный веб-дизайнер/разработчик.

Автор: Osvaldas Valutis

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

Комментарии (1)

  1. Артем

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree