Adaptive sticky banner (SwiftUI)

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 how to integrate an adaptive sticky 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 sticky banner in SwiftUI:

  • Create a BannerState with the size BannerSize.sticky(width:) (by default, the width is taken from the container) and an AdRequest with the ad unit ID.
  • Add Banner(state:) to the view hierarchy, passing that BannerState.
  • Subscribe to events via the .onAdLoad, .onAdFailure modifiers, and optionally .onAdClick, .onAdImpression.
  • Pass additional settings if you are working via Adfox (via AdRequest parameters inside BannerState).
  • Position the banner in the desired area of the screen using SwiftUI tools (for example, at the bottom of a VStack, via safeAreaInset, overlay).

Adaptive sticky 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 sticky banners to work correctly, set the width via BannerSize.sticky(width:) and the parent container constraints. Incorrect size fixing may result in incorrect ad rendering.

  3. Adaptive sticky 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 sticky 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(state:) with BannerState(size: .sticky(width:), request:) for a sticky banner. When width: nil, the width is constrained to the container width (analogous to calculating via BannerAdSize.sticky(containerWidth:) in UIKit).

  6. For the same device and width, the resulting ad area is stable after loading.

  7. The adaptive sticky banner height will not exceed 15% of the screen height and will be at least 50dp.

Creating and displaying the banner

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

You will also need the ad unit ID (adUnitId) obtained from the Boost interface.

Example SwiftUI screen:

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 Banner appears in the hierarchy with a set BannerState and when a new BannerState instance is assigned: each call to BannerState(size:request:) creates a new state and starts a load.

To receive notifications about successful or failed ad loading, as well as to track lifecycle events, use the onAdLoad, onAdFailure, and other 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.

The following example shows how to initiate loading of an adaptive sticky banner. After a successful load, .onAdLoad is called:

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)
        }
    }
}

Displaying ads

After a successful ad load, place Banner in the desired position in the interface. In SwiftUI, this can be, for example:

  • Fixed position in the layout — VStack with the banner at the bottom or top, with Spacer() to push it to the edge.
  • SwiftUI tools — safeAreaInset(edge: .bottom), overlay(alignment:), etc.

In UIKit, the native view has displayAtTop(in:) and displayAtBottom(in:) methods. In SwiftUI, equivalent behavior is achieved by placing Banner in the hierarchy (for example, the banner at the bottom of the root ZStack or VStack above the content).

Example: banner at the bottom of the screen above the content:

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 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.

Warning

Before publishing your app to the store, make sure you replace the demo ad unit ID with a real one obtained from the Boost interface.

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 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 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

Previous
Adaptive inline banner
Next
Interstitial ads