adsbygoogle.push() error: No slot size for availableWidth=0 : Создание сайтов и поисковая оптимизация (SEO)

OlegON · █ 06.09.2018 11:09

При установке объявления от AdSense столкнулся с такой вот ошибкой (напоминаю, что объявления о своих ошибках пишут в консоли, которая вызывается в Chrome по F12 или Ctrl-Alt-J)

Цитата:

message
:
"adsbygoogle.push() error: No slot size for availableWidth=0"
name
:
"TagError"
stack
:
"TagError: adsbygoogle.push() error: No slot size for availableWidth=0

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

Вариантов решения проблемы не так уж и много:

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

Код:

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

2. Поместить блок Adsense в фиксированный блок
Рекламный код можно поместить в div или в другой элемент:
<div style="min-width:300px;min-height:600px;">
[ЗДЕСЬ БЛОК Adsense]
</div>
У этого метода есть минус – не смотря на реальное разрешение экрана, адаптивный блок никогда не будет больше размера, чем вы указали в параметрах min-width и min-height.

3. Показывать блок только после загрузки страницы (готовности DOM)
В коде каждого рекламного блока имеется строка:

Код:

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

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

Код:

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

или вариант с JQuery

Код:

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

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

Код:

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

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

Код:

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

4. Выводить блок рекламы с задержкой
Ту же самую строку

Код:

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

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

Код:

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

В данном случае код вывода AdSense сработает через секунду. Не очень красивое решение, особенно для медленных каналов связи.

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

Возможно, что причина связана с вмешательством каких-то дополнительных плагинов (например, в Wordpress) в итоговую верстку страницы, причем, в исходном коде страницы может быть незаметно. Обязательно проверьте такую возможность.