Отзывчивый дизайн CSS, реклама AdSense на дисплее: нет

Google недавно представил новый формат адаптивной рекламы, который явным образом позволяет скрывать рекламу (для адаптивных объявлений Только).

Вот некоторые приемы, которых следует избегать:

• Скрытие рекламных блоков в любое время (например, display:none), если только вы не реализуете адаптивный рекламный блок.

Пример кода даже показывает, как это сделать, можно найти в руководства по Google AdSense.

<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   style="display:inline-block;"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Обратите внимание, что в этом примере кода Google есть ошибка. Вы должны переместить style=display:inline-block; часть в раздел. В противном случае встроенный стиль отображения переопределяет стиль отображения раздела.

Это можно эффективно сделать с помощью API DFP с использованием sizeMapping, что также позволяет показывать объявления разных размеров в зависимости от размера области просмотра.

Я ответил на аналогичный вопрос здесь, но по существу, если для данного разрешения вы нацеливаете размер объявления, которого не существует, реклама не будет показана, так как DFP не сможет предоставить рекламу.

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

googletag.cmd.push(function() {
    var mapLrgLeaderboard = googletag.sizeMapping().
        addSize([480, 320 ], [300, 250]). // when screen >= 480 x 320px use 300 x 250px 
        addSize([0, 0], [88, 88]). // 88 x 88px = non-existant ad size
        build();

    googletag.defineSlot('/12345678/Test-Large-Leaderboard', [[300, 250]], 'div-gpt-ad-123412341234-0').
        defineSizeMapping(mapLrgLeaderboard).
        addService(googletag.pubads());

    googletag.enableServices();
});

Я написал об этом небольшой пост (есть пара подводных камней, с которыми вы можете столкнуться, если будете руководствоваться только описанием Google), хотя это (выше) является сутью.

Надеюсь это поможет!

Тоби

Проблема в том, что если вы используете display: none, вы нарушаете Условия использования AdSense. . Это связано с тем, что, несмотря на то, что реклама скрыта, она по-прежнему считается просмотром для рекламодателей.

До сих пор Google очень медленно реагировал на это, но метод, который я применил и который многие сейчас применяют, заключается в определении ширины окна при загрузке страницы и либо инициировании AdSense, либо нет, в зависимости от размера окна.

У Labnol есть отличная статья по этому поводу.

По сути, ваш скрипт должен выглядеть примерно так:

<script type="text/javascript">
    // <![CDATA[
        var width = window.innerWidth || document.documentElement.clientWidth; google_ad_client = "ca-publisher-id";
        if (width >= 800) {
            google_ad_slot = "ad-unit-1";
            google_ad_width = 728;
            google_ad_height = 60;
        } else if ((width < 800) && (width > 400)) {
            google_ad_slot = "ad-unit-2";
            google_ad_width = 300;
            google_ad_height = 250;
        } else {
            google_ad_slot = "ad-unit-3";
            google_ad_width = 320;
            google_ad_height = 50;
        }
    // ]]>
</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">// <></script>

Расширяя это для вашего конкретного примера, вы должны определить ширину экрана до инициализации AdSense, используя что-то вроде:

var width = window.innerWidth || document.documentElement.clientWidth; google_ad_client = "ca-publisher-id";
if (width >= 480){
    // initalise Adsense here
}

для инициализации AdSense. Таким образом, это произойдет только тогда, когда ширина экрана больше 480 пикселей.

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

И последнее замечание: компания Google начала развертывать адаптивные объявления DFP.

AdSense выпустила новую адаптивную рекламу, которая заполняет максимально доступное пространство рекламой с лучшей конверсией. Это решает всю борьбу.