Всё началось с того, что при подключении с мобильного устройства на мой сайт, у меня не выводился полностью баннер гугла в шапке сайта с расширением 728×90.
Тогда я подумал, а вот бы было чудесно, если бы баннер мог ориентироваться на расширение устройства, через которое посетитель попадает на мой сайт.
Тогда-то я и узнал, что у гугла появился адаптивный блок, который как раз и решает мою проблему. Зайдя в в Гугл Адсенс-> Мои объявления, решил создать тот самый Адаптивный блок. Единственное, что смутило меня так это то, что он является бета. Ну, думаю попробую, всегда можно вернутся к старому блоку.
Вроде создал, скопировал ссылку этого адаптивного блока и решил разместить у себя в файле header.php в шапке сайта.
Ссылка получилась подобного вида:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Адаптивный блок -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-хххххххххххх"
data-ad-slot="указываете ваш номер"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Удалил предыдущую ссылку на блок с расширением 728×90, и на её место вставил новый адаптивный блок.
После этого сохранил обновленный файл header.php и решил взглянуть на новый блок.
Обновив свою страницу несколько раз я так и не увидел нового блока, решил немного подождать, т.к иногда объявления на новых блоках появляются ни сразу.
Через полчаса ожидания я понял видимо причина ни в этом. Быстрого ответа в поддержке гугл адсенс я не нашел, из-за многих ссылочных переходов на разные страницы, я решил найти ответ в просторах интернета. Поискав около часа, это меня порядка взбесило, т.к на многих сайтах было написано про адаптивные блоки, примерно тоже самое , что и на самом гугл адсенс.
Ну, да ладно, всё таки я решил пройтись по всем ссылкам гугла, дабы найти решение, и я его нашел, оказалось всё просто.
Если не срабатывает этот блок, то нужно добавить еще привязку:
<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
Предыдущий скрипт на автомате, должен определять разрешение экрана, но если этого он не делает, нужно расписать ему подробно, это всё добавляется в файл header.php, находишь там строку style type=»text/css» :
<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-ххххххххххх"
data-ad-slot="указываете ваш номер"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
А вот сам блок размещаешь уже ни в этом файле, а где Вам нужно.
После этого адаптивный блок появился на сайте, проверив его на разных разрешениях экрана, я понял, что работает он великолепно. Если не знаете как сделать проверку сайта на разных разрешениях экрана, то в браузере Мозилла эта функция встроена, называется Адаптивный дизайн. Ниже показано как его найти
Ну, на этом пожалуй всё. Если, что-то не понятно, прошу пишите в комментариях.
Очень полезно то что я искал. Благодарю !
Не работает , скажите пожалуйста куда конкретно нужно вставить код ?
немного подправил, перечитай.
В последнем примере тэг style не закрыт
<style type="text/css"
спасибо! Подправил!
Ещё можно сделать так что бы на смартах и планшетах показывалась в одном месте, а на десках в другом. Для этого меняем «max» на «min».
.adslot_1 {display:none}
@media only screen and (max-width:1024px){.adslot_1 {display:block}}
(adsbygoogle = window.adsbygoogle || []).push({});