Решение проблемы с ошибкой adsbygoogle.push() error: No slot size for availableWidth=0 в рекламных блоках AdSense
16.01.2018
Иногда во время довольно рутинных действий, таких как вставка блоков рекламы на сайт, появляются необычные ошибки. Об одном из таких случаев и способах решения проблемы я расскажу в данной заметке.
На одном из сайтов после добавления рекламного блока он не появился. Несмотря на то, что сейчас вновь созданные блоки 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 и т.д.) – попробуйте аналогичные действия.
Билеты на автобусы, паромы и поезда, в том числе стыковочные маршруты:
Авиабилеты на международные и местные направления по минимальным ценам:
Связанные статьи:
- Объявление «Поисковая система»: почему ничего не найдено и почему не показывает рекламу (100%)
- Как убрать предупреждение «Не рискуйте своими доходами: чтобы избежать их снижения, исправьте проблемы с файлом ads.txt» (85.1%)
- Что выгоднее, иностранный трафик с AdSense или российский трафик с AdSense + РСЯ? (78.1%)
- Выгоднее ли нативные блоки рекламы AdSense обычных? (78.1%)
- Какой доход даёт «рекомендуемый контент» AdSense? (78.1%)
- Как работают банковские карты (ч. 1): как узнать информацию по номеру карты (RANDOM - 50%)