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

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

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

Проблема

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Аргументы

Для монетизации 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 байт после минификации и сжатия.

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

HTML

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

CSS

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

К счастью, 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:

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

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

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

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

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

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

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

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

Автор: Osvaldas Valutis

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Научиться

Метки:

Похожие статьи:

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

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

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

  1. Артем

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

  2. Иван

    Хотелось бы узнать, у этого плагина есть шаг загрузки, т.е. чтобы реклама грузилась не во время попадания на экран, а чуть ранее, допустим на 100px?

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

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

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

Я не робот.

Spam Protection by WP-SpamFree