вставка номера клиента и блока AdSense

Эта статья не будет томительно долгой, но может оказаться полезной для тех, кто желает вывести разные блоки 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, для его работы надо:

  1. Указать свой data-ad-client (идентификационный номер клиента),
  2. Вставить во втором и третьем сегменте data-ad-slot конкретного блока,
  3. Установить желаемую ширину экрана для переключения,
  4. Установить размеры для фиксированного блока.

Для начала выберите, какие блоки вы хотите показывать для десктопа, для мобильных рекомендую выводить адаптивную либо нативную рекламу. Далее заходите в «Мои объявления» AdSense, ищите или создаёте блок для десктопа и копируете с его скрипта номер клиента и слота.

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

Лично мне с таким скриптом работать удобнее, чем строить каскады стилей @media через CSS для вывода рекламы. В ближайшее время хочу поэкспериментировать и сделать через скрипт вывод трёх-четырёх разных рекламных блоков. Так можно подобрать максимально эффективный вариант для каждой группы разрешений, но и это решение мне нравится больше, чем CSS.