Adaptive inline banner (SwiftUI)

Adaptive inline banners are a flexible format of banner advertising, providing maximum efficiency by optimizing the size of the ad on each device.

This ad type lets developers set a maximum allowable width and height for the ad, though the optimal ad size is still determined automatically. To select the best ad size, built-in adaptive banners use the maximum height rather than the fixed height. That provides room for improving performance.

This format is typically used in feed-based apps or where keeping the primary focus on the ad is acceptable.

Appearance

This guide shows how to integrate an adaptive inline banner into an iOS app using SwiftUI. In addition to code examples and instructions, it provides recommendations on using this ad format and links to additional resources.

Prerequisite

1. Follow the SDK integration steps described in Quick start.
2. Initialize your ad SDK in advance.
3. Make sure you're running the latest Yandex Mobile Ads SDK version. If you're using mediation, make sure you're also running the latest version of the unified build.

Implementation

Key steps for integrating an adaptive inline banner in SwiftUI:

• Add Banner with the size BannerSize.inline(width:maxHeight:) to the view hierarchy.
• Subscribe to events via the .onAdLoad, .onAdFailure modifiers, and optionally .onAdClick, .onAdImpression.
• Pass an AdRequest with the ad unit ID to Banner.
• Pass additional settings if you are working via Adfox (via AdRequest parameters).
• Display the ad: loading starts when Banner appears on screen; upon successful loading, the ad height is updated.

Adaptive inline banner integration notes

1. Attempting to load a new ad upon receiving an error in the .onAdFailure callback is strongly discouraged. If you need to load an ad from .onAdFailure, limit the number of reload attempts to avoid continuous failed ad requests in case of network connection restrictions.

2. For adaptive inline banners to work correctly, set the size via SwiftUI: use BannerSize.inline(width:maxHeight:) and the parent container constraints (width, padding). Fixing only the outer frame without accounting for the adaptive height may result in incorrect ad rendering.

3. Adaptive inline banners work best when using the full available width. In most cases, this will be the full screen width of the device. Make sure to account for any app padding and display safe areas.

4. The adaptive inline banner is designed for placement in scrollable content. The banner height can match the device screen height or be limited to a maximum height, depending on the API.

5. In SwiftUI, use Banner(size: .inline(width:maxHeight:), request:) for an inline banner. The width parameter is the available container width, maxHeight is the maximum allowed ad height (analogous to calculating via BannerAdSize.inlineSize(withWidth:maxHeight:) in UIKit).

6. For the same device and size parameters, the resulting ad area is stable: after loading, the height is reflected in the internal Banner layout.

Creating and displaying the banner

To display banner ads, add Banner with the size .inline(width:maxHeight:) and an AdRequest with the ad ID to the SwiftUI hierarchy.

It is recommended to set width to the screen width or the parent container width, accounting for padding and safe area.

You will also need the ad unit ID (adUnitId) obtained from the Yandex Advertising Network interface.

Example SwiftUI screen:

import SwiftUI
import YandexMobileAds

struct InlineBannerView: View {
    @State private var adRequest: AdRequest?

    var body: some View {
        VStack {
            if let request = adRequest {
                Banner(size: .inline(width: 320, maxHeight: 320), request: request)
                    .onAdLoad { _ in
                        // Ad loaded successfully
                    }
                    .onAdFailure { error in
                        // Load error
                    }
            }

            Button("Load banner") {
                adRequest = AdRequest(adUnitID: "R-M-XXXXX-YY")
            }
        }
    }
}

Loading ads

Loading starts when Banner with a non-nil request appears in the hierarchy and when AdRequest changes to a new instance.

To receive notifications about successful or failed loading, as well as to track clicks and impressions, use the onAdLoad, onAdFailure, onAdClick, onAdImpression modifiers.

You can extend the ad request parameters via AdRequest by passing user interest data, page context data, location, or other additional data. Additional contextual data in the request can significantly improve ad quality. For more information, see Ad targeting.

Example: set a new AdRequest to load (.onAdLoad is called after a successful load):

struct InlineBannerView: View {
    @State private var adRequest: AdRequest?

    func loadAd() {
        adRequest = AdRequest(adUnitID: "R-M-XXXXX-YY")
    }

    var body: some View {
        VStack {
            if let request = adRequest {
                Banner(size: .inline(width: 320, maxHeight: 320), request: request)
                    .onAdLoad { _ in }
                    .onAdFailure { _ in }
            }
            Button("Load", action: loadAd)
        }
    }
}

Displaying ads

After a successful load, the ad is displayed inside Banner; the size is updated after the creative is received. Place Banner in the desired location in the feed or stack, for example in a ScrollView + VStack with the appropriate padding.

struct InlineBannerView: View {
    @State private var adRequest: AdRequest?

    var body: some View {
        ScrollView {
            VStack {
                // Feed content
                Text("Content")

                if let request = adRequest {
                    Banner(size: .inline(width: 320, maxHeight: 320), request: request)
                        .onAdLoad { _ in }
                        .onAdFailure { _ in }
                }
            }
            .padding()
        }
    }
}

Testing adaptive inline banner integration

Using demo blocks for ad testing

We recommend using test ads to test your ad integration and your app itself.

To guarantee that test ads are returned for every ad request, we created a special demo ad placement ID. Use it to check your ad integration.

Demo adUnitId: demo-banner-yandex.

You can find the list of available demo ad placement IDs in the Demo ad units for testing section.

Verifying correct ad integration

You can test your ad integration using the native Console tool.

To view detailed logs, call the YMAMobileAds class's enableLogging method.

YMAMobileAds.enableLogging()

To view SDK logs, go to the Console tool and set Subsystem = com.mobile.ads.ads.sdk. You can also filter logs by category and error level.

If you're having problems integrating ads, you'll get a detailed report on the issues and recommendations for how to fix them.

Additional resources

• Link to GitHub.