Решение проблемы с ошибкой adsbygoogle.push() error: No slot size for availableWidth=0 в рекламных блоках AdSense

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

На одном из сайтов после добавления рекламного блока он не появился. Несмотря на то, что сейчас вновь созданные блоки AdSense появляются практически сразу (а не через 10-15 минут как раньше), я не придал этому особого значения. Подумал, что это новый алгоритм, который был введён в декабре 2017 года (и с которым на многих сайтах связано резкое снижение показов рекламы), либо вернулась старая задержка.

Но когда блок не появился и через сутки, то я полез в консоль браузера (вызывается нажатием F12) и увидел там ошибку:

Uncaught
"adsbygoogle.push() error: No slot size for availableWidth=0"
name:"TagError"
stack:"TagError: adsbygoogle.push() error: No slot size for availableWidth=0↵    at Tg (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:36255)↵    at Ug (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:35158)↵    at ci (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:59005)↵    at ii (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:62235)↵    at ji (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:62126)↵    at Di (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:67669)↵    at https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:65970↵    at Qd (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:15004)↵    at Wd (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:17553)↵    at Ei (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:1:65949)"
__proto__:Error

Скриншот:

У меня там ещё одна ошибка, которая вызвана плагином WordPress, она не имеет отношения к рассматриваемой проблеме.

Ошибка возникает из-за того, что код AdSense размещён в блоке, который слишком мал для блока рекламы. Такое может происходить при помещении в динамически генерируемый HTML, перед выполнением кода Google нужно убедиться, что DOM готов и является видимым.

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

Варианты решения проблемы:

Использовать рекламный блок фиксированного размера

Если вы используете адаптивный дизайн, то этот вариант вам подойдёт только если вы вставите небольшой блок, либо с помощью @media или других приёмов будете показывать рекламные блоки разного размера для разных разрешений экрана.

Поместить рекламный блок в контейнер фиксированного размера

Рекламный код можно поместить в div или в другой элемент:

<div style="min-width: 150px;min-height: 50px;">
[ЗДЕСЬ РЕКЛАМНЫЙ БЛОК]
</div>

У этого метода есть минус – не смотря на реальное разрешение экрана, адаптивный блок никогда не будет больше размера, чем вы указали в параметрах min-width и min-height.

Показывать блок рекламы после того, как DOM готов

В коде каждого рекламного блока имеется строка:

 (adsbygoogle = window.adsbygoogle || []).push({});

Если эту строку заменить на:

$(document).ready(function(){(adsbygoogle = window.adsbygoogle || []).push({})})

То код блока будет запускаться после готовности DOM. Данный метод требует jQuery и срабатывает не для всех случаев.

Вариант не требующий jQuery:

window.onload = function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
}

И ещё один вариант (только для современных браузеров):

document.addEventListener("DOMContentLoaded", function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
});

Варианты, не требующие jQuery, также срабатывают не всегда – зависит от конкретной причины вашей проблемы.

В Angular:

$timeout(function () {
    (adsbygoogle = window.adsbygoogle || []).push({});
});

Выводить блок рекламы с задержкой

Иногда оказывается достаточным установить небольшую задержку на отрисовку блока. Для этого строку из рекламного кода

 (adsbygoogle = window.adsbygoogle || []).push({});

замените на строку:

setTimeout(function(){(adsbygoogle = window.adsbygoogle || []).push({})}, 1000);

Убрать конфликты стилей

Ещё одной причиной проблемы может стать использование платформ (фреймворков), к примеру, Bootstrap, которые создают классы с такими же названиями, которые используете вы для своих элементов. Это может привести к смешению стилей и проблемам при отображении объявлений.

Добавление ширины и высоты для адаптивных элементов

Можно установить ширину и высоту адаптивных элементов ins примерно следующим образом:

ins {
    min-width: 300px;
    min-height: 50px;
}

Удаление невидимых слоёв

Этот вариант я не совсем понимаю, но возможно именно вам он поможет. Он требует jQuery и заключается в удалении других невидимых слоёв:

$(document).ready(function(){
  var $analyticsOff = $('.adsbygoogle:hidden');
  var $analyticsOn = $('.adsbygoogle:visible');

  $analyticsOff.each(function() {
    $(this).remove();
  });
  $analyticsOn.each(function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
  });
});

Размещение рекламного блока AdSense рядом с другим динамическим элементом

У меня оказался довольно сложный случай и предыдущие способы мне не помогли, а вставлять блок фиксированного размера мне не хотелось. Поэтому я попробовал разместить код AdSense рядом с другим динамическим элементом – и это сработало! Также я добавил задержку, заменил на строку:

setTimeout(function(){(adsbygoogle = window.adsbygoogle || []).push({})}, 1000);

В результате проблема полностью исчезла.

Размещение рекламного блока AdSense рядом с текстом

Хотя мой плагин автоматической вставки кода Adsense для WordPress (называется Quick Adsense) вставляет блоки в статью, т.е. рядом с текстом, тем не менее, при стандартных настройках он оборачивает рекламный блок в div. Если разместить рядом с рекламным блоком любой достаточной длинный текст, то блок начинает отображаться. Можно размещать пробелы под блоком:

         
         
         
....................

и это также работает.

Также блок будет показываться, если вы найдёте функцию WordPress под названием <?php the_content(); ?> (она выводит содержимое статьи) и поставите блок перед ней.

Решение проблемы: не показывается рекламный блок Adsense через плагин WordPress Quick Adsense

По умолчанию в настройках форм для вставки рекламных блоков атрибут alignment установлен на значение «Слева»:

В результате на сайте рекламный блок получается обёрнутым в:

<div style="float:left;margin:0px 0px 0px 0;">

</div>

Если убрать выравнивание (установить alignment на «Нет»), то это решает проблему и рекламные блоки снова начинают показываться.

Если вы используете подобные плагины (Angular и т.д.) – попробуйте аналогичные действия.