От автора: Вы потрудились над оптимизацией своего сайта, добавили такие вещи как Google Maps с ленивой загрузкой, и вам интересно, есть ли еще что-то, что можно сделать. К примеру, можно ли как-то улучшить загрузку рекламы? Хорошие новости – кое-что сделать можно. Можно не тратить тарифный план пользователя и загружать рекламу только, когда она попадает на экран. Также можно подгонять размер рекламы под экран устройства. Было бы неплохо с вашей стороны. Это было бы не просто адаптивно, а ответственно.
Проблема
В Google Adsense файл рекламы вместе со скриптом загружается автоматически, что может непомерно замедлить отрисовку других важных вещей: стилей, шрифтов и других скриптов.
Более того, правильный размер рекламы определяется только после загрузки рекламы. То есть если пользователь уменьшит окно браузера или перевернет планшет, размер рекламы останется прежним, и в большинстве случаев она не влезет в экран.
Аргументы
Для монетизации Google Adsense учитывает множество факторов, однако кликабельность играет главную роль в доходах. Поэтому ориентир на кликах, а не просто просмотрах в долгосрочной перспективе может привести к росту доходов. Увеличить количество кликов можно, придав сайту вид, заслуживающий доверия пользователя. Получить доверие можно, разграничив приоритет, какую часть сайта загружать первой. Если показывать сначала рекламу и только потом контент, за которым пришел пользователь, можно занизить количество кликов по рекламе и впечатления от сайта.
По логике вещей Google Adsense не должен отслеживать просмотры рекламы, если она не попала в область просмотра. Не знаю, есть ли в Google Adsense такой тип проверки, но технология основана на JS, так что у них есть все средства.
Для пользователей смартфонов и планшетов обычное дело постоянно переключаться между портретным и альбомным режимами, пока они не подстроят вид под себя. Если предоставить подходящие размеры рекламы под все режимы экрана, вероятность клика может увеличиться.
Решение
Я создал JS плагин. Он использует ленивую загрузку для рекламы:
Неважно, сверху или снизу экрана находится реклама, она не подгрузится, пока не попадет в область просмотра. Плагин также меняет размер рекламы:
Баннер загружается под конкретное разрешение.
JavaScript
Сам плагин – это совсем чуть-чуть JS кода. Я сделал две версии: чистый JS и JQuery. Плагин называется adsenseLoader. Скачать файлы можно отсюда:
adsenseloader.js; независимый (IE 9+). 1.1KB после минификации и сжатия.
jquery.adsenseloader.js; использует jQuery. 835 байт после минификации и сжатия.
Инициализация плагина:
|
1 2 3 4 5 |
// vanilla var instance = new adsenseLoader( '.adsense' ); // принимаемые типы аргумента: Selector String, Element, NodeList, Array // jQuery $( '.adsense' ).adsenseLoader(); |
Плагин можно кастомизировать. Настройки по умолчанию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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 в состояние по умолчанию. Функцию можно вызвать на все объекты, а можно на отдельные элементы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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' ); |
И наконец, можно изменить еще пару опций, которые повлияют на все объекты плагина. Функцию можно вызвать откуда угодно, но она спроектирована, чтобы ее вызывали до создания объектов плагина. Опции по умолчанию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 мы будем задавать ширину и высоту контейнера точно под ожидаемые размеры рекламы. С помощью медиа запросов и псевдоэлементов мы зададим направляющие для плагина, который чуть позже сможет определять, когда необходимо изменить размер или перезагрузить рекламу.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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()
Вы можете показать процесс загрузки несколькими способами: добавив плейсхолдер-изображение, текст, рамку, фон или что-либо другое, что подходит под ваш дизайн и будет отображаться до загрузки рекламы:
Нам необходимо добавить пару HTML тегов и стилей, которые добавят перекрывающий слой с текстом «Loading…».
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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 */ } |
С помощью колбэк функции onLoad() можно добавить класс adsense—loaded, который прячет элемент .adsense__loading:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 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' ) } }); |
Спасибо, что прочитали статью и за то, что вы ответственный веб-дизайнер/разработчик.
Автор: Osvaldas Valutis
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (5)