Эта статья не будет томительно долгой, но может оказаться полезной для тех, кто желает вывести разные блоки Google AdSense для десктопов и мобильных устройств. Ещё вчера и тоже выбирал из двух вариантов – адаптивный блок или использование запросов @media в css, но задачу можно решить проще.
Что за ёж
Для этого предлагаю использовать единый скрипт, который вставляется на сайт через произвольный код HTML и выводит разные рекламные объявления для устройств с различной шириной экрана. Если с помощью стилей выводится один и тот же блок с разными размерами, то тут отличаются не только размеры, но и сами блоки.
Скрипт вывода
Вот этот скрипт:
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script> <script> if(document.getElementsByTagName("body")[0].offsetWidth>=900) { document.write('<ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-xxxxxxxx" data-ad-slot="xxxxxccx"></ins>'); }else{ document.write('<ins class="adsbygoogle" style="display:block; width: 100%;" data-ad-client="ca-pub-xxxxxxxxx" data-ad-slot="xxxxxxxx" data-ad-format="rectangle"></ins>'); } (adsbygoogle = window.adsbygoogle || []).push({}); </script>
Как видим он состоит из трёх основных частей – первая отвечает за ротацию в зависимости от разрешения дисплея, второй и третий берут на себя непосредственно отображение рекламы.
Настройка
Часть кода offsetWidth>=900 указывает, что первый блок выводится при разрешении больше либо равном 900 px, соответственно, на долю второго блока остаётся меньше разрешение. В данном примере для экранов более 900 пикселей показывается большой прямоугольник Нетборд 580 на 400 px, при меньшем разрешении пользователям предлагается адаптивный блок рекламы.
Скрипт рабочий и не нарушает правил пользования AdSense, для его работы надо:
- Указать свой data-ad-client (идентификационный номер клиента),
- Вставить во втором и третьем сегменте data-ad-slot конкретного блока,
- Установить желаемую ширину экрана для переключения,
- Установить размеры для фиксированного блока.
Для начала выберите, какие блоки вы хотите показывать для десктопа, для мобильных рекомендую выводить адаптивную либо нативную рекламу. Далее заходите в «Мои объявления» AdSense, ищите или создаёте блок для десктопа и копируете с его скрипта номер клиента и слота.
В нижнем блоке номер клиента остаётся тот же, меняется только № слота. Если выбираете для десктопа блок с фиксированными размерами, то точно их укажите с той части скрипта, которая отвечает за вывод первого блока, иначе будет меньше рекламодателей, значит меньше конкуренция и цена клика.
Лично мне с таким скриптом работать удобнее, чем строить каскады стилей @media через CSS для вывода рекламы. В ближайшее время хочу поэкспериментировать и сделать через скрипт вывод трёх-четырёх разных рекламных блоков. Так можно подобрать максимально эффективный вариант для каждой группы разрешений, но и это решение мне нравится больше, чем CSS.