Adaptive sticky banner

An adaptive sticky banner is a small, automatically updated ad placed at the bottom or top of the app screen. It doesn't overlap the main content and is often used in gaming apps.

The adaptive sticky banner delivers maximum performance by optimizing the ad size for each device. With this ad type, developers can set the maximum allowable ad width, and the system determines the optimal ad size automatically.

Appearance

This guide shows you how to integrate an adaptive sticky banner into an iOS app using SwiftUI. Besides code samples and instructions, it contains recommendations and links to additional resources.

Prerequisite

1. Follow the SDK integration steps described under Quick start.
2. First, you need to initialize the advertising SDK.
3. Make sure you're using the latest version of the Yandex Mobile Ads SDK, and if you're using mediation, the latest version of the unified build.

Implementation

Key steps to integrate an adaptive sticky banner via SwiftUI:

1. Create a BannerState with the size BannerSize.sticky(width:) (the container's width is used by default) and an AdRequest containing your ad unit ID.
2. Add Banner(state:) to your View hierarchy, passing this BannerState.
3. Subscribe to events using the .onAdLoad and .onAdFailure modifiers, and optionally .onAdClick and .onAdImpression if needed.
4. Pass additional settings via the AdRequest parameters inside BannerState if you're working with Adfox.
5. Position the banner where you want it on the screen using SwiftUI layout tools — for example, at the bottom of a VStack, using safeAreaInset, or as an overlay.

Features of adaptive sticky banner integration

1. If the .onAdFailure callback returns an error, don't try to load a new ad again. If you have to, limit the number of ad loading retries to avoid unsuccessful requests and connection issues.

2. To make sure your adaptive sticky banners work properly, set the width using BannerSize.sticky(width:) and set up the parent container's constraints. Setting the wrong size constraints can cause ads to render incorrectly.

3. Adaptive sticky banners work best when utilizing the full available width. In most cases, this will be the full width of the device screen. Consider the padding parameters set in your app and the display's safe area.

4. Adaptive sticky banners are designed for placement in scrollable content. Their height can be the same as the device screen or limited by the maximum height, depending on the API.

5. To use a sticky banner in SwiftUI, call Banner(state:) with BannerState(size: .sticky(width:), request:). Passing width: nil restricts the banner to the container width, which matches the behavior of BannerAdSize.sticky(withContainerWidth:) in UIKit.

6. Once loaded, the final ad area remains consistent for the same device and specified width.

7. The height of an adaptive sticky banner must be at least 50 dp but no more than 15% of the screen height.

Creating and displaying a banner

To display banner ads, add Banner(state:) and pass a BannerState configured with the .sticky(...) size and an AdRequest.

You'll need the ad unit ID (adUnitId) from the Boost interface.

SwiftUI screen example:

import SwiftUI
import YandexMobileAds

struct StickyBannerView: View {
    @State private var bannerState: BannerState?

    var body: some View {
        VStack {
            if let bannerState {
                Banner(state: bannerState)
                    .onAdLoad { _ in
                        // Ad loaded successfully
                    }
                    .onAdFailure { error in
                        // Load error
                    }
            }

            Button("Load banner") {
                bannerState = BannerState(
                    size: .sticky(),
                    request: AdRequest(adUnitID: "R-M-XXXXX-YY")
                )
            }
        }
    }
}

Loading ads

Loading starts when the Banner appears in the hierarchy with a defined BannerState, or when you swap in a new BannerState instance. Every call to the BannerState(size:request:) initializer creates a new state and triggers a load.

Use modifiers to track lifecycle events and receive notifications about successful or failed ad loads. For example, you can use onAdLoad and onAdFailure.

You can expand the ad request parameters using AdRequest. To do this, pass information about the user's interests, page context, location, and other additional data in the request. Context can greatly improve ad relevance. To learn more, see Ad targeting.

Example: How to initialize an adaptive sticky banner

The .onAdLoad modifier is called after a successful ad load:

struct StickyBannerView: View {
    @State private var bannerState: BannerState?

    func loadAd() {
        bannerState = BannerState(
            size: .sticky(),
            request: AdRequest(adUnitID: "R-M-XXXXX-YY")
        )
    }

    var body: some View {
        VStack {
            if let bannerState {
                Banner(state: bannerState)
                    .onAdLoad { _ in }
                    .onAdFailure { _ in }
            }
            Button("Load", action: loadAd)
        }
    }
}

Ad display

After a successful ad load, position the Banner where you want it in your UI. For example:

• For a fixed position in your layout, use a VStack with a Spacer() to pin the banner to the top or bottom.
• Alternatively, use SwiftUI tools like safeAreaInset(edge: .bottom) or overlay(alignment:).

In UIKit, you can use the displayAtTop(in:) and displayAtBottom(in:) methods of the native view. In SwiftUI, you achieve the same behavior by placing the Banner in your hierarchy (for example, at the bottom of a root ZStack or a VStack layered over your content).

For example

Placing the banner over content at the bottom of the screen:

struct StickyBannerView: View {
    @State private var bannerState: BannerState?

    var body: some View {
        ZStack(alignment: .bottom) {
            ScrollView {
                Text("Content")
            }
            if let bannerState {
                Banner(state: bannerState)
                    .onAdLoad { _ in }
                    .onAdFailure { _ in }
            }
        }
    }
}

Testing adaptive sticky banner integration

Using demo ad units for ad testing

Use test ads to check your ad integration and the app itself. To make sure that test ads are returned for each ad request, you can use a special demo ad placement ID.

Demo adUnitId: demo-banner-yandex.

For the list of all available demo ad placement IDs, see Demo ad units for testing.

Testing ad integration

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

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

YandexAds.enableLogging()

To view SDK logs, go to the Console tool and set Subsystem = com.mobile.ads.ads.sdk. You can filter logs by category or 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.