Как я пытался разместить адаптивный блок на свой сайт


Всё началось с того,  что при подключении с мобильного устройства на мой сайт, у меня не выводился полностью баннер гугла в шапке сайта с расширением 728×90.

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

Тогда-то я и узнал, что у гугла появился адаптивный блок, который как раз и решает мою проблему. Зайдя в в Гугл Адсенс-> Мои объявления, решил создать тот самый Адаптивный блок. Единственное, что смутило меня так это то, что он является бета. Ну, думаю попробую, всегда можно вернутся к старому блоку.

Адаптивный блок Google Adsence

Вроде создал, скопировал ссылку этого адаптивного блока и решил разместить у себя в файле 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>

А вот сам блок размещаешь уже ни в этом файле, а где Вам нужно.

После этого адаптивный блок появился на сайте, проверив его на разных разрешениях экрана, я понял, что работает он великолепно. Если не знаете как сделать проверку  сайта на разных разрешениях экрана, то в браузере Мозилла эта функция встроена, называется Адаптивный дизайн. Ниже показано как его найти

Адаптивный дизайн браузера Фаерфокс


Ну, на этом пожалуй всё. Если, что-то не понятно, прошу пишите в комментариях.

6 Comments

Add Yours →

Очень полезно то что я искал. Благодарю !

Не работает , скажите пожалуйста куда конкретно нужно вставить код ?

В последнем примере тэг 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({});

Добавить комментарий