Yandex реклама в SwiftUI проекте

Yandex реклама в SwiftUI проекте

Реклама является неотъемлемой частью многих мобильных приложений, обеспечивая монетизацию и поддерживая бесплатный доступ для пользователей. Яндекс предоставляет один из самых популярных рекламных SDK в России, предлагая разработчикам гибкие инструменты для интеграции рекламы. В данной статье мы рассмотрим, как интегрировать рекламу Яндекс в iOS-приложения, используя SwiftUI, что позволит вам использовать современные инструменты и подходы к разработке интерфейсов.

Официальная документация по библиотекам Yandex Mobile Ads для подключения на различные платформы - https://ads.yandex.com/helpcenter/ru/dev/platforms

Мы рассмотрим интеграцию Яндекс рекламы в IOS приложения.

К сожалению все официальные инструкции по интеграции IOS SDK и подключении рекламных блоков касаются приложений на базе UIKit. В то время как множество проектов используют SwiftUI для создания интерфейсов. Разберем как подключить Яндекс рекламу к SwiftUI проекту.

Интеграция Yandex IOS sdk в SwiftUI проект

Подключение SDK

Тут можно воспользоваться официальными инструкциями, поскольку интеграция ничем не отличается от интеграции в UIKit проект. Официальная инструкция - https://ads.yandex.com/helpcenter/ru/dev/ios/quick-start

Ниже описаны основные шаги для подключения через Swift Package Manager.

  • Добавим пакет Яндекс рекламы https://github.com/yandexmobile/yandex-ads-sdk-ios
  • через File → Add Packages

2. В настройках сборки Build Settings, в секции Linking, добавьте значение параметра Other Linker Flags = -ObjC.

Yandex реклама в SwiftUI проекте

Проверьте, что таргет слинкован с YandexMobileAdsPackage. Если таргет не слинкован, добавьте связь с библиотекой в секции Link Binary With Libraries через значок +.

Yandex реклама в SwiftUI проекте

3. Подключите YandexMobileAdsBundle.bundle из YandexMobileAds. Для этого:

Перейдите по ссылке для YandexMobileAds в секции .binaryTarget (Package Dependencies → YandexMobileAdsPackage → кликните на Package.swift → найдите ссылку для YandexMobileAds в секции .binaryTarget).

Yandex реклама в SwiftUI проекте

Откройте скачанный архив.

Yandex реклама в SwiftUI проекте

Подключите YandexMobileAdsBundle.bundle в Copy Bundle Resource фазу (Ваш таргет → Build Phases → Copy Bundle Resource → кнопка + → Add other → выберите YandexMobileAdsBundle.bundle → выберите пункты Copy items if needed и Create groups).

Yandex реклама в SwiftUI проекте
Yandex реклама в SwiftUI проекте

Инициализация библиотеки

В целом, в тестовом приложении реклама работает и без отдельной инициализации. Но, следуя правилам, стоит все же провести инициализацию. Для этого нужно вызывать метод initializeSDK класса MobileAds при запуске приложения. В SwiftUI проекте нет изначально сгенерированного AppDelegate класса. Поэтому создадим его сами и подключим через @UIApplicationDelegateAdaptor и внутри AppDelegate инициализируем MobileAds sdk как описано в официальной документации (https://ads.yandex.com/helpcenter/ru/dev/ios/quick-start#init).

Yandex реклама в SwiftUI проекте

Для примера использования рекламы попробуем подключить inline banner в свое SwiftUI приложение.

Подключение inline banner рекламного блокаПодключение inline banner рекламного блока

Яндекс реклама предоставляет различные типы баннеров, inline-баннер - один из них.

Адаптивный inline-баннер — гибкий формат баннерной рекламы, обеспечивающий максимальную эффективность за счет оптимизации размера рекламы для каждого устройства.

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

Официальная документация по данному типу рекламного баннера и его подключению в проект: https://ads.yandex.com/helpcenter/ru/dev/ios/adaptive-inline-banner

Рассмотрим подключение по шагам.

1. Инициализация и загрузка баннера

Сначала нужно создать класс InlineBannerViewController который будет загружать и показывать рекламный баннер соответствии с документацией. Напомним, что мы не можем просто использовать примеры из документации, потому что наш проект использует SwiftUI а не UIKit для построения интерфейсов.

Например, класс занимающийся загрузкой и показом inline баннера может выглядеть так:

Yandex реклама в SwiftUI проекте

2. Добавление методов делегата

Создаем методы делегата для обработки событий баннера. Показывать баннер в приложении нужно только после его загрузки с сервера. Методы делегата AdViewDelegate позволяют понять, был ли загружен баннер или произошла ошибка.

Yandex реклама в SwiftUI проекте

3. Создаем обертку для использования баннера в SwiftUI

Чтобы можно было использовать созданный класс в SwiftUI проекте нужно создать обертку UIViewControllerRepresentable для нашего класса InlineBannerViewController которая будет показывать наш баннер.

Yandex реклама в SwiftUI проекте

4. Показываем inline баннер в SwiftUI проекте

Мы создали структуру AdvertView, которая представляет класс InlineBannerViewController, который в свою очередь отвечает за загрузку и отображение баннера Яндекс рекламы.

Теперь можно использовать созданный AdvertView чтобы показать баннер в нашем SwiftUI проекте.

Yandex реклама в SwiftUI проекте

Заключение

Интеграция рекламных SDK в мобильные приложения — важная задача для многих разработчиков. В данной статье мы рассмотрели, как внедрить Яндекс рекламу в SwiftUI проект. Описанные шаги включают в себя подключение SDK, настройку проекта, и создание рекламных блоков. Следуя этим инструкциям, вы сможете эффективно интегрировать рекламу Яндекс, обеспечивая дополнительный источник дохода для вашего приложения. Надеемся, что этот материал поможет вам успешно реализовать данный функционал и улучшить ваш проект.

Примеры кода, использованные в статье, а также интеграцию полноэкранного баннера, можно посмотреть в проекте https://github.com/ninasaveljeva/yandexAdvSwiftUI

11
Начать дискуссию