Уявіть: ви запускаєте додаток. Банер стрибає вниз, зсуваючи контент. Або на планшеті він виглядає як вузька смужка — дохід падає. Користувачі скаржаться на незручність, а App Store відхиляє збірку через перекриття home indicator. Такі проблеми виникають при неправильній інтеграції банерів. Ми вирішили їх у десятках проєктів і виробили підхід, який гарантує стабільну роботу без стрибків та крешів. Адаптивні банери AdMob — сучасний стандарт. Згідно з документацією Google, правильне резервування місця під банер виключає зсув контенту та покращує користувацький досвід. У цій статті розберемо, як вибрати правильний формат, зарезервувати місце та уникнути типових помилок. Покажемо код для iOS та Android. Також порівняємо популярні формати банерів та обговоримо, чому адаптивний банер приносить у 1.5 рази більше доходу, ніж фіксований 320×50.
Проблеми, які ми вирішуємо
- Стрибок контенту: після завантаження банера контент зміщується, користувач випадково натискає на рекламу, що погіршує UX.
- Неправильний розмір: фіксований банер 320×50 на сучасних екранах займає лише 70–80% ширини, залишаючи порожні поля.
- Ігнорування safe area: банер наїжджає на home indicator на iPhone — Apple відхиляє додаток.
- Відсутність паузи в фоні: без обробки життєвого циклу можливі креші (IllegalStateException на Android).
- Недостатнє тестування: банер може обрізатися або відображатися некоректно на окремих пристроях.
Як запобігти стрибку контенту?
Основна причина стрибка контенту — відсутність зарезервованого місця під банер. Використовуємо адаптивний банер (Anchored Adaptive Banner) від Google AdMob. Рішення: на етапі верстки встановити контейнер з фіксованою висотою (або constraint), але зробити його невидимим. Після завантаження банера (onAdLoaded) динамічно виставити висоту та зробити видимим. Нижче приклади коду.
Android (Kotlin)
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, adContainerWidth) adView.setAdSize(adSize) adView.adUnitId = "/YOUR_AD_UNIT_ID" adView.adListener = object : AdListener() { override fun onAdLoaded() { val height = adView.adSize.getHeightInPixels(context) adView.layoutParams.height = height adView.visibility = View.VISIBLE } } iOS (Swift)
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSize(forWidth: viewWidth) bannerView.adSize = adaptiveSize bannerView.adUnitID = "/YOUR_AD_UNIT_ID" bannerView.translatesAutoresizingMaskIntoConstraints = false let heightConstraint = bannerView.heightAnchor.constraint(equalToConstant: 0) NSLayoutConstraint.activate([heightConstraint]) // Після onAdLoaded: heightConstraint.constant = bannerView.adSize.size.height UIView.animate(withDuration: 0.3) { self.view.layoutIfNeeded() } Чому адаптивні банери приносять більше доходу?
Фіксований банер 320×50 — пережиток епохи iPhone 4. На сучасних екранах він займає лише 70–80% ширини, залишаючи порожні поля. Адаптивний банер (Anchored Adaptive) розтягується на всю ширину контейнера, висота автоматично підбирається від 50 до 90 dp. За даними Google AdMob, перехід на адаптивні банери підвищує eCPM в середньому на 25–30%. Ми підтверджуємо це на практиці: у 90% проєктів дохід після переходу зріс. Адаптивні банери приносять у 1.5 рази більше доходу, ніж фіксовані. Для порівняння:
| Тип банера | Розміри | Переваги | Недоліки |
|---|---|---|---|
| Фіксований (BANNER) | 320×50, 728×90 | Проста інтеграція | Застарілий, погано на планшетах, низький eCPM |
| Адаптивний (Anchored Adaptive) | Авто: 50–90 dp | Ефективне використання місця, високий eCPM | Вимагає програмного розрахунку висоти |
| Розумний (Smart Banner) | Залежить від екрану | Автоматично підлаштовується | Застарів з версії 19.x — не підтримується |
Як правильно керувати життєвим циклом банера?
Банер необхідно коректно обробляти при переході додатка в фон і назад.
| Событие | Android | iOS |
|---|---|---|
| Додаток у фоні | onPause() → adView.pause() | applicationWillResignActive → bannerView.pause() |
| Додаток активний | onResume() → adView.resume() | applicationDidBecomeActive → bannerView.resume() |
| Знищення | onDestroy() → adView.destroy() | deinit → bannerView.removeFromSuperview() |
Автооновлення банера за замовчуванням 60 секунд (налаштовується тільки в консолі AdMob). Якщо потрібна інша частота — використовуйте ручний таймер з викликом pause/resume.
Як правильно розмістити sticky-банер?
Sticky-банер кріпиться до нижнього краю екрану. На iOS обов'язково враховуйте safe area insets:
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true На Android використовуйте OnApplyWindowInsetsListener для отримання нижнього відступу. Якщо в додатку є tab bar, розміщуйте банер над ним, але не нижче safe area. Це вимога App Store Review Guidelines.
Процес роботи
- Аналітика: вивчаємо макети, визначаємо місця під банери.
- Проектування: вибираємо розміри, резервуємо місце в layout.
- Інтеграція: вбудовуємо SDK, кодуємо відображення.
- Тестування: перевіряємо на 5+ реальних пристроях різних розмірів.
- Деплой: завантажуємо в стор з рекомендаціями по консолі AdMob.
Отримайте консультацію з інтеграції банерів — ми допоможемо налаштувати монетизацію правильно.
Що входить у роботу з інтеграції банерів?
- Аналіз макетів і підбір оптимального формату банера (адаптивний, фіксований, sticky).
- Інтеграція AdMob SDK з резервуванням місця та обробкою життєвого циклу.
- Налаштування таргетингу та частоти оновлення в консолі AdMob.
- Тестування на пристроях різних розмірів і версій ОС.
- Документація з інтеграції та рекомендації по консолі.
- Навчання команди замовника роботі з AdMob.
- Підтримка протягом 2 тижнів після деплою.
Терміни та результат
Інтеграція банерів займає від 1 до 2 днів, включаючи тестування. Гарантуємо стабільну роботу без стрибків і крешів. Середній приріст доходу після переходу на адаптивні банери становить 25–30%. При трафіку 500 000 показів на місяць додатковий дохід може бути значним. Зв'яжіться з нами у формі зворотного зв'язку для оцінки вашого проєкту.
Типові помилки (і як їх уникнути)
- Захардкоджена висота — завжди використовуйте getHeightInPixels / adSize.height.
- Відсутність резерву місця — контент стрибає, рейтинг падає.
- Ігнорування safe area — відхилення при рев'ю.
- Застаріла версія AdMob — оновлюйте SDK до останньої.
Замовте інтеграцію банерів — отримайте стабільну монетизацію без головного болю.