Як змінити код адаптивного оголошення

Якщо код адаптивного оголошення задовольняє не всі потреби, можна модифікувати його відповідно до вимог вашого адаптивного сайту. У наведених нижче прикладах показано, як це зробити.

Важливо

• Якщо ви вперше редагуєте код оголошення й раніше не працювали з медіазапитами CSS, рекомендуємо ознайомитися з прикладом коду точного розміру рекламного блоку для різних типів пристроїв.
• Якщо ви вже знаєте, як працювати з медіазапитами CSS, можете відразу переходити до розділу Розширені функції коду адаптивного оголошення.

Примітка. У цій статті наведено приклади допустимих змін коду оголошень AdSense. Ви не порушите правила програми AdSense, якщо змінюватимете код свого адаптивного оголошення, як описано нижче.

Як задати точний розмір рекламного блоку для різних типів пристроїв

Нижче показано, як змінити адаптивний код, щоб задати конкретний розмір рекламних блоків для трьох типів пристроїв, тобто мобільних телефонів, планшетів і комп’ютерів. Цей приклад можна застосовувати, навіть не маючи досвіду з використання медіазапитів CSS чи редагування коду оголошень AdSense.

Нижче подано модифікований код адаптивного оголошення, який установлює точні розміри рекламних блоків для різних типів пристроїв.

• Для пристроїв з екраном шириною до 500 пікселів: рекламний блок розміром 320 x 100.
• Для пристроїв з екраном шириною 500–799 пікселів: рекламний блок розміром 468 x 60.
• Для пристроїв з екраном шириною від 800 пікселів: рекламний блок розміром 728 x 90.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Щоб застосувати цей зразок коду на своєму сайті, виконайте наведені нижче дії.

1. Створіть рекламний блок медійного оголошення в обліковому записі AdSense і виберіть варіант Адаптивний у розділі "Розмір оголошення". Знайдіть у коді адаптивного оголошення та занотуйте наведену нижче інформацію.
   • Ідентифікатор видавця, наприклад ca-pub-1234567890123456.
   • Ідентифікатор рекламного блоку (data-ad-slot), наприклад 1234567890.
2. Виконайте зі зразком коду описані нижче дії.
   • Замініть усі вирази example_responsive_1 на унікальні назви, наприклад Home_Page, front_page_123 тощо.
     Примітки

     • Унікальна назва може містити лише букви англійського алфавіту (A–Z), цифри та символи підкреслення. Назва має починатися з букви.
     • Під час кожного адаптування цього зразка коду використовуйте нову унікальну назву.
   • Замініть значення ca-pub-1234567890123456 на власний ідентифікатор видавця.
   • Замініть значення 8XXXXX1 на ідентифікатор вашого рекламного блоку.
3. Виберіть розміри рекламного блоку для різних типів пристроїв.
   • Якщо вас влаштовують використані в прикладі коду розміри рекламних блоків, вносити додаткові зміни не потрібно.
   • Якщо потрібно вказати інші розміри для рекламних блоків, у зразку коду виконайте наведені нижче дії.
     • Замініть значення 320px і 100px, указавши ширину й висоту рекламного блоку для пристроїв, які мають екран шириною до 500 пікселів.
     • Замініть значення 468px і 60px, указавши ширину й висоту рекламного блоку для пристроїв, які мають екран шириною 500–799 пікселів.
     • Замініть значення 728px і 90px, указавши ширину й висоту рекламного блоку для пристроїв, які мають екран шириною від 800 пікселів.
4. Скопіюйте змінений код оголошення та вставте його в HTML-код сторінки, на якій воно має відображатися.
   Примітка. Після цього перевірте, як оголошення відображаються на різних пристроях, і переконайтеся, що вони правильно адаптуються до розмірів екрана.

Розширені функції коду адаптивного оголошення

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

Примітка. Радимо використовувати ці розширені функції, лише якщо ви вмієте самостійно змінювати код оголошення.

Як налаштувати змінну ширину й фіксовану висоту рекламного блоку

У коді CSS можна налаштувати необхідну висоту та змінну ширину адаптивного рекламного блоку, як описано нижче.

Приклад

Нижче показано, як задати в коді адаптивного оголошення фіксовану висоту 90 пікселів і змінну ширину від 400 до 970 пікселів.
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Як налаштувати точний розмір рекламного блоку для різних типів пристроїв

У коді CSS можна задати конкретний розмір адаптивного рекламного блоку, як описано в прикладі нижче.

Приклад

Якщо ви знаєте оптимальні розміри адаптивного рекламного блоку для кожного типу пристроїв, їх можна задати за допомогою медіазапитів CSS3. У прикладі нижче показано, як відредагувати код оголошення, щоб використовувати медіазапити CSS3.
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@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:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

У правилах @media використовується синтаксис CSS3, і вони підтримуються в усіх сучасних веб-переглядачах. Зверніть увагу, що встановлення розміру рекламного блоку в зовнішньому файлі таблиці стилів CSS офіційно не підтримується.

Як приховати рекламний блок

Іноді, зокрема на мобільних пристроях менших розмірів, показувати оголошення недоцільно. Щоб приховати рекламний блок, установіть параметр для медіазапитів CSS, який заборонятиме запити оголошень і показ реклами. У поданому нижче прикладі показано, як внести потрібні зміни.

Приклад

Щоб показувати оголошення лише на пристроях з екранами певного розміру, скористайтеся специфікацією CSS. У прикладі нижче показано, як додати в код медіазапити CSS3, щоб оголошення не відображалися на екранах певних розмірів.
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@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"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

У цьому прикладі оголошення не відображатимуться, якщо ширина екрана пристрою менша ніж 400 пікселів.

Не забувайте дотримуватися наших правил щодо місць розміщення оголошень. Пам’ятайте, що правила нашої програми забороняють вносити значні зміни в рекламний код.