Как правильно сделать отступы у рекламных блоков Google и Яндекс

При вставке рекламных блоков в статьи на сайте желательно их выделить, чтобы они не сливались с контентом. Самый простой способ — это сделать отступ между объявлением и текстом.

Как сделать вертикальный отступ в объявлениях Google Adsense

Типовой код рекламного объявления Google Adsense выглядит примерно следующим образом:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXX"
     data-ad-slot="YYYYYYYYYYYYYYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Здесь YYYYYYYYYYYY и XXXXXXXXXXXXXXX — уникальные коды вашего рекламного объявления.

Для того, чтобы сделать вертикальные отступы у рекламного объявления нужно изменить стиль оформления тега INS. Например так: margin: 20px 0;. В таком случае у рекламного блока Google Adsense будут отступы сверху и снизу величиной 20 пикселей. Вы можете использовать свое значение в зависимости от дизайна вашего сайта.

Отредактированный код рекламного объявления с вертикальными отступами будет выглядеть так:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; margin:20px 0;"
     data-ad-client="ca-pub-XXXXXXXXXXXXXX"
     data-ad-slot="YYYYYYYYYYYYYYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Как сделать отступы в объявлениях рекламной сети Яндекс (РСЯ)

Код RTB блока рекламной сети Яндекс выглядит следующим образом:

<div id="yandex_rtb_R-A-XXXXX-Y"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-XXXXXX-Y",
                renderTo: "yandex_rtb_R-A-XXXXXX-Y",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

Здесь XXXXXX-Y — это уникальный код рекламного объявления РСЯ.

Чтобы добавить отступы у объявления Яндекс нужно добавить стили к блоку DIV. Например такие же как и описанные выше стили рекламного объявления Google Adsense: margin: 20px 0;, которые добавят отступы сверху и снизу величиной в 20 пикселей.

Вариант кода вызова рекламного объявления РСЯ с вертикальными отступами будет выглядеть так:

<div id="yandex_rtb_R-A-XXXXX-Y" style="margin: 20px 0;"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-XXXXXX-Y",
                renderTo: "yandex_rtb_R-A-XXXXXX-Y",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

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

Как не нужно делать вертикальные отступы в рекламных объявлениях

Казалось бы, что проще всего сделать отступы, поместив рекламный блок во внешний блок DIV с указанным выше стилем margin: 20px 0;. Например так:

<div style="margin: 20px 0;">
Код рекламного объявления
Код рекламного объявления
...
Код рекламного объявления
</div>

Но у такого решения есть существенный недостаток. Когда посетитель использует блокировщик рекламы на вашем сайте образуются пустые места. Дело в том, что блокировщики удаляют рекламный код со всеми стилями, но они ничего не знают про внешний блок DIV, который при использовании блокировщика останется на странице и создаст разрыв 40 пикселей в тексте.

Поэтому используйте предложенные мною методы оформления отступов для объявлений РСЯ и Google Adsense и внешний вид вашего сайта не будет страдать при использовании блокировщиков рекламы.