---
metadata:
  - name: generator
    content: Diplodoc Platform v5.55.0
alternate:
  - https://ads.yandex.com/helpcenter/en/dev/ios/swiftui/adaptive-inline-banner.md
  - https://ads.yandex.com/helpcenter/ru/dev/ios/swiftui/adaptive-inline-banner.md
  - https://ads.yandex.com/helpcenter/zh/dev/ios/swiftui/adaptive-inline-banner.md
  - href: en/dev/ios/swiftui/adaptive-inline-banner.md
    type: text/markdown
    title: Markdown version
  - href: ../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/en/llms.txt

[//]: # (This page is also translated into Brazilian Portuguese — pt-BR)

<!--
Used in Boost: boost/ru/ad-monetization/dev/ios
-->

# Adaptive inline banner (SwiftUI)

<!-- source: en/dev/_includes/adaptive-inline-banner.md -->
An adaptive inline banner is a flexible banner ad format that ensures maximum efficiency by optimizing ad size for each device.
<!-- endsource: en/dev/_includes/adaptive-inline-banner.md -->

<!-- source: en/dev/_includes/adaptive-inline-banner.md -->
With this ad type, developers can set the maximum allowable ad width and height, and the system determines the optimal ad size automatically. To choose the best ad size, adaptive inline banners use a maximum height instead of a fixed one. This helps improve performance.
<!-- endsource: en/dev/_includes/adaptive-inline-banner.md -->

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

{% cut "Appearance" %}

<img src="https://yastatic.net/s3/doc-binary/src/docs/support/mobile-ads/en/monetization/_images/banner-inline-en-ex.png" width="200">

{% endcut %}

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 {#pre}

<!-- source: en/dev/_includes/pre-ios.md -->
1. Follow the SDK integration steps described in [Quick start](https://ads.yandex.com/helpcenter/en/dev/ios/quick-start.md).
2. [Initialize](https://ads.yandex.com/helpcenter/en/dev/ios/quick-start.md#init) your ad SDK in advance.
3. Make sure you're running the latest [Yandex Mobile Ads SDK](https://ads.yandex.com/helpcenter/en/dev/platforms.md) version. If you're using mediation, make sure you're also running the latest version of the [unified build](https://ads.yandex.com/helpcenter/en/dev/platforms.md).
<!-- endsource: en/dev/_includes/pre-ios.md -->

## Implementation {#implement}

Key steps for integrating an adaptive inline banner in SwiftUI:

- Create a `BannerState` with the size `BannerSize.inline(width:maxHeight:)` 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](https://ads.yandex.com/helpcenter/en/dev/ios/target-adfox.md) if you are working via Adfox (via `AdRequest` parameters inside `BannerState`).
- Display the ad: loading starts when `Banner` appears on screen with a set `BannerState`; upon successful loading, the ad height is updated.

## Adaptive inline banner integration notes {#features}

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(state:)` with `BannerState(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.inline(width: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(state:)` to the SwiftUI hierarchy and pass a `BannerState` with the size `.inline(width:maxHeight:)` and an `AdRequest` with the ad ID.

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:

```swift
import SwiftUI
import YandexMobileAds

struct InlineBannerView: 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: .inline(width: 320, maxHeight: 320),
                    request: AdRequest(adUnitID: "R-M-XXXXX-YY")
                )
            }
        }
    }
}
```

## Loading ads

Loading starts when `Banner` with a set `BannerState` appears in the hierarchy 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 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](https://ads.yandex.com/helpcenter/en/dev/ios/target.md).

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

```swift
struct InlineBannerView: View {
    @State private var bannerState: BannerState?

    func loadAd() {
        bannerState = BannerState(
            size: .inline(width: 320, maxHeight: 320),
            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 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.

```swift
struct InlineBannerView: View {
    @State private var bannerState: BannerState?

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

                if let bannerState {
                    Banner(state: bannerState)
                        .onAdLoad { _ in }
                        .onAdFailure { _ in }
                }
            }
            .padding()
        }
    }
}
```

## Testing adaptive inline banner integration {#test}

### Using demo blocks for ad testing

<!-- source: en/dev/_includes/test-ios-inline-banner.md -->
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`.

{% note warning %}

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

{% endnote %}

You can find the list of available demo ad placement IDs in the [Demo ad units for testing](https://ads.yandex.com/helpcenter/en/dev/ios/demo-blocks.md) section.
<!-- endsource: en/dev/_includes/test-ios-inline-banner.md -->

### Verifying correct ad integration

<!-- source: en/dev/_includes/test-integration-ios.md -->
You can test your ad integration using the native Console tool.

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

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

<img src= "https://yastatic.net/s3/doc-binary/src/dev/mobile-ads/common/integration-ios-2.png">
<!-- endsource: en/dev/_includes/test-integration-ios.md -->

## Additional resources {#resources}

* <!-- source: en/dev/_includes/github-pubdev-links.md -->
  Link to [GitHub](https://github.com/yandexmobile/yandex-ads-sdk-ios/blob/master/Examples/YandexMobileAdsExample/YandexMobileAdsExample/Yandex/Banner/InlineBannerViewController.swift).
  <!-- endsource: en/dev/_includes/github-pubdev-links.md -->