Адаптивна Adsense реклама з ледачою завантаженням

30

Від автора: Ви потрудилися над оптимізацією свого сайту, додали такі речі як 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.1 KB після минификации і стиснення.

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 реклама с ленивой загрузкой

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