- Принцип показу різних форматів рекламних блоків в залежності від ширини екрану
- Налаштування адаптивного рекламного блоку Google AdSense напоказ в залежності від ширини екрану
- Вставка рекламного коду в шаблон сайту
Вітаю, дорогі друзі. Сьогодні я розповім, як створити рекламний блок Google AdSense, які будуть мати особливий розмір в залежності від ширини екрану. Не плутайте зі звичайними адаптивними блоками.
Статистика показує, що різні формати рекламних блоків на одному і тому ж місці працюють по-різному. А з урахуванням розмірів екрану статистика також змінюється. І ті блоки, які показують хороший результат на екранах персональних комп'ютерів - не працюють на мобільних пристроях. Навіть адаптивні рекламні блоки показують результати нижче, ніж блоки з фіксованими розмірами. Але, і цьому є рішення.
Так як шаблони сучасних сайтів адаптивні (Адаптовані під мобільні пристрої), то і рекламні блоки вибираються адаптивні або ті, що вписуються в розміри мобільних пристроїв. Так реклама виглядає на сайті гармонійно і не вилазить за краї екрана. Тим самим не порушуючи дизайн сайту і зручності при перегляді на пристроях з маленьким екраном.
Так, чому адаптивні блоки приносять менший результат? Це залежить від багатьох факторів і одним з них є розмір. Так, блок 580х400 буде ефективніше, ніж той же адаптивний на цьому ж місці, який прийме розмір 728х90.
У мене на блозі під заголовком статті завжди був адаптивний блок 728х90, але я його замінив на 580х400. У підсумку по прибутковості він обійшов найприбутковіший, адаптивний блок в тілі статті.
Але, такий особливий розмір не підходить для смартфонів. І тому на маленьких екранах у мене виводиться блок 300х250, який прекрасно відображається на всіх мобільниках і показує кращий результат. Навіть краще адаптивного блоку.
Принцип показу різних форматів рекламних блоків в залежності від ширини екрану
Весь секрет полягає в особливій налаштування адаптивного блоку. Принцип побудований на медіазапросах і підборі потрібного формату рекламного блоку під певні розміри екрану.
Відштовхуватися потрібно від самого маленького екрану. Блок повинен поміщатися по ширині. Так, пристрої з екраном 3,2 дюйма мають ширину 320 пікселів. Таких пристроїв сьогодні вкрай мало, але відкидати їх теж не варто.
Я раджу для таких малюків вибрати розмір блоку 300х250. Якщо на вашому сайті немає відвідувачів з такими маленькими екранами, то ви можете вибрати розмір 336х280.
Другою точкою, при якій змінюється формат рекламного блоку, може бути 500px. А формат рекламного блоку може бути 468х60.
І тоді ми отримуємо, що на пристроях з шириною екрану до 500рх буде відображатися блок 300х250, а понад 500 пікселів - блок 468х60.
Наступна точка може бути, наприклад, 800 пікселів. І на екранах понад цієї ширини можна показувати великий формат рекламного блоку 580х400.
Медіазапросов може бути багато, але достатньо 2-3 щоб задовольнити потребу в показі оптимальних форматів під різні розміри екранів мобільних пристроїв.
А тепер від слів до справи.
Налаштування адаптивного рекламного блоку Google AdSense напоказ в залежності від ширини екрану
Отже, для реалізації задуманого нам знадобиться код адаптивного рекламного блоку. Як створювати рекламні блоки, я розповідав тут .
Ваше завдання створити в акаунті Адсенс адаптивний рекламний блок. З коду цього блоку знадобиться всього два параметри:
data-ad-client = "111- XXXXXXX11XX92»
data-ad-slot = »8XXXX61»
Ці параметри потрібні для вставки в загальний рекламний блок з медіазапросамі:
<Style>. adaptiv_block_1 {width: 300 px; height: 250 px; } @Media (min-width: 500 px) {. adaptiv_block_1 {width: 468 px; height: 60 px; }} @Media (min-width: 800 px) {. adaptiv_block_1 {width: 580 px; height: 400 px; }} </ Style> <script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </ script> <! - adaptiv_block_1 -> <ins class = "adsbygoogle adaptiv_block_1" style = "display: inline-block" data-ad-client = "111-XXXXXXX11XXX9" data-ad-slot = "8XXXXX1"> </ ins> <script> (adsbygoogle = window.adsbygoogle || []). push ({}); </ Script>
Де ви міняєте ідентифікатор клієнта і блоку (111- XXXXXXX11 XXX9 і 8XXXXX1) на свої значення. А також якщо створюєте кілька таких блоків, то обов'язково в наступному змініть і позначення блоку (adaptiv_block_1).
Опис рекламного коду:
- на пристроях з шириною екрану до 499рх - показується блок 300х250
- на пристроях з шириною екрану від 500 до 799рх - показується блок 468х60
- на пристроях з шириною екрану від 800рх - показується блок 580х400
Якщо ж ви будете використовувати інші розміри рекламних блоків і точки, при яких ці блоки будуть відображатися, - змініть їх значення (в коді виділені рожевим кольором).
Вставка рекламного коду в шаблон сайту
Вставити рекламний код на сайт ви можете будь-яким зручним для вас способом. Це може бути безпосередня вставка код в вихідний код шаблону або використання шорт кодів і функцій.
Докладно зупинятися не буду, зі способами розміщення коду на сайті ви можете ознайомитися за посиланням вище. Покажу лише код, який я використовую на своєму блозі, впевнений ви почерпнете ідею і для своїх сайтів.
Отже, для своєї теми я створив ось такий код, і додав його до функцій теми, для показу рекламного блоку під заголовками статей.
/ * Адаптивний блок adsense під заголовком статті * / add_action ( '__ before_content', 'adsense1', 100); function adsense1 () {if (! is_single ()) return; echo "<style> .pod_zagolovkom_stati {width: 300px; height: 250px;} @media (min-width: 580px) {.pod_zagolovkom_stati {width: 580px; height: 400px;}} </ style> <div id = 'center -ads '> <script async src =' // pagead2.googlesyndication.com/pagead/js/adsbygoogle.js '> </ script> <! - Блок під заголовком статті -> <ins class =' adsbygoogle pod_zagolovkom_stati ' style = 'display: inline-block' data-ad-client = '111-1952XXX157272092' data-ad-slot = '912XXX4160'> </ ins> <script> (adsbygoogle = window.adsbygoogle || []) .push ({}); </ script> </ div> "; }
Примітка: я додав умова! Is_single для показу блоку тільки під заголовками статей і уклав рекламний код в блок ДІВ з ідентифікатором id = 'center-ads', для якого в стилях додав вирівнювання по центру text-align: center;
Якщо буде використовувати мій код, змініть ідентифікатор клієнта і блоку на свої.
Друзі, ось і весь фокус з показом різних форматів рекламних блоків в залежності від ширини екрану. Беріть спосіб на озброєння і підвищуйте рівень доходу з ваших сайтів.
Якщо залишилися питання, буду радий відповісти на них в коментарях. Бажаю вам успіху!
З повагою, Максим Зайцев.
Так, чому адаптивні блоки приносять менший результат?
