# iOS > Integration guides > Banner

Source: https://help-display-sdk.equativ.com/ios/integration/banner.html

This page explains how to use the **Equativ Display SDK** to display a banner ad in your application.

---

## Overview

Banners are displayed using a [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) instance.

To load and display an ad using a banner view, you will need:

* A fully configured **Equativ Display SDK**.
* An instance of [`SASAdPlacement`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdPlacement.html), that will be used to perform ad calls to the delivery engine.
* An instance of [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html), that will load and display the banner creative.
* A view controller implementing the [`SASBannerViewDelegate`](https://help-display-sdk.equativ.com/ios/API/Protocols/SASBannerViewDelegate.html) protocol.

The next sections describe the whole process to load and display a banner.

You can also refer to the [samples](https://github.com/smartadserver/equativ-display-sdk-samples-ios) if you just want to copy/paste the complete integration.

## Importing the SDK

Before using the SDK, you must import the framework:

``` swift
import SASDisplayKit
```

## Configuring the SDK

The SDK needs to be configured before making any ad calls. You will have to call the method [`configure()`](https://help-display-sdk.equativ.com/ios/API/Classes/SASConfiguration.html#/c:objc(cs)SASConfiguration(im)configure) of [`SASConfiguration`](https://help-display-sdk.equativ.com/ios/API/Classes/SASConfiguration.html) shared instance to do so.

This method should be called as soon as possible. A good place to do it is in your application's delegate, in the `application(_:didFinishLaunchingWithOptions:)` method.

``` swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // ...

  // Configuring the SDK
  SASConfiguration.shared.configure()

  // ...
}
```

Note that any ad call performed before calling the [`configure()`](https://help-display-sdk.equativ.com/ios/API/Classes/SASConfiguration.html#/c:objc(cs)SASConfiguration(im)configure) method will fail.

## Creating a placement

You will need an _ad placement_ to perform an ad call.

Creating an ad placement is done by instantiating a [`SASAdPlacement`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdPlacement.html) object using a _site ID_, a _page ID_ and a _format ID_. You can also provide some additional information, like targeting informations (more information in the [API documentation](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdPlacement.html)).

``` swift
let adPlacement = SASAdPlacement(siteId: SOME_SITE_ID, pageId: SOME_PAGE_ID, formatId: SOME_FORMAT_ID)
```

> You can add several information to your _ad placements_ in order to **increase the monetization**.
>
> For instance you can provide a [_Seller Defined Audience_](https://help-display-sdk.equativ.com/sellerdefinedaudience.html.md) object, or a [_Supply Chain Object_](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdPlacement.html#/c:objc(cs)SASAdPlacement(py)supplyChainObjectString) if your are an inventory reseller.

For testing purposes, it is possible to instantiate generic ad placements that will always deliver an ad of a particular format. This is done by using the [`SASAdPlacement(testAd:)`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdPlacement.html#/c:objc(cs)SASAdPlacement(im)initWithTestAd:) initializer (check the [`SASAdPlacementTest`](https://help-display-sdk.equativ.com/ios/API/Enums/SASAdPlacementTest.html) enum for an exhaustive list of the formats you can get using test placements).

Don't forget to remove all test placements before releasing your app!

## Banner view instantiation and ad loading

A banner is displayed using a [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) view instance.

Note that you should always set the current `UIViewController` as the [`modalParentViewController`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html#/c:objc(cs)SASBannerView(py)modalParentViewController) of the banner view. The banner might not be able to expand or handle click events properly if you don't provide this information.

``` swift
// Instantiating the banner view
let bannerView = SASBannerView(frame: .zero)

// Setting the modal parent view controller
bannerView.modalParentViewController = self

// Adding the banner view to the current view controller
view.addSubview(bannerView)

// Add some constraints to position the view in your view hierarchy…
```

When the banner view is properly instantiated, an ad can be loaded using the _ad placement_ created earlier.

``` swift
bannerView.loadAd(with: adPlacement)
```

The ad will be automatically displayed when ready.

Note that it is recommended to hide the banner when the ad is loading or if the ad loading fails. You can also add the banner to the view hierarchy only when the ad loading is successful. To do so, you must listen to ad loading events, as described in the next section.

## Listening to ad loading events

You can listen to ad loading events (as well as other banner view events) by implementing the [`SASBannerViewDelegate`](https://help-display-sdk.equativ.com/ios/API/Protocols/SASBannerViewDelegate.html) protocol.

``` swift
bannerView.delegate = self
```

There is a lot of optional methods that can be implemented, but the two methods related to ad loading are required:
``` swift
func bannerView(_ bannerView: SASBannerView, didLoadWith adInfo: SASAdInfo) {
    print("Banner ad loaded with info: \(adInfo)")

    // Display your banner here and resize it using the `ratio` found in the `adInfo` parameter…
}

func bannerView(_ bannerView: SASBannerView, didFailToLoad error: Error) {
    print("Banner did fail to load with error: \(error)")
    
    // Hide your banner here if it was already displayed…
}
```

You can find all the delegate's methods in the [API documentation](https://help-display-sdk.equativ.com/ios/API/Protocols/SASBannerViewDelegate.html).

## Listening to ad audio events

You can listen to ad audio events (as well as other banner view events) by implementing the [`SASBannerViewDelegate`](https://help-display-sdk.equativ.com/ios/API/Protocols/SASBannerViewDelegate.html) protocol.

``` swift
bannerView.delegate = self
```

The two optional delegate methods related to ad audio are:

``` swift
func bannerViewWillStartAudioPlayback(_ bannerView: SASBannerView) {
    print("Banner video ad will start to play audio")

    // Equativ Display SDK is notifying your app that it will play audio. You could optionally
    // pause music and/or manipulate your audio session category depending on your apps design.
}

func bannerViewDidStopAudioPlayback(_ bannerView: SASBannerView) {
    print("Banner video ad did stop to play audio")

    // Equativ Display SDK is notifying your app that it has stopped playing audio. Depending 
    // on your apps design, you could resume music here and/or restore your audio session category.
}
```

> * The SDK does not modify the app’s audio session category, so the app should handle it within the delegate methods.
> * All video ads start muted and require user interaction to toggle audio.
> * Developers should ensure that any changes to the audio session category are reverted in the `dealloc` of the **ViewController**, because the `bannerViewDidStopAudioPlayback` delegate method will not be called if the banner view is deallocated before the end of the ad.

## Adapting the banner size to the creative size

Although the [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) instance takes care of resizing the creative to make it fit properly the banner view size while preserving its ratio, you can go further and resize the banner view to match the creative's width/height ratio hence eliminating empty spaces around the creative.

This is often the case when your [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) needs to deliver 300x50, 300x250 formats or even 16/9 video…

The current creative _aspect ratio_ can be fetched directly from the [`SASAdInfo`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdInfo.html) object retrieved in the `banner(_:didLoadWith:)` delegate method.

An easy way to use this ratio is to put an _aspect ratio_ constraint on the [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html). Note that the _aspect ratio_ property can be `nil` in some rare cases: if it happens use a default value like `320/50`.

``` swift
func bannerView(_ bannerView: SASBannerView, didLoadWith adInfo: SASAdInfo) {
    let ratio = adInfo.aspectRatio?.floatValue ?? 320/50
    NSLayoutConstraint.activate([
        bannerView.widthAnchor.constraint(equalTo: bannerView.heightAnchor, multiplier: CGFloat(ratio))
    ])
}
```

### Good practices

The usage of [`aspectRatio`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdInfo.html#/c:objc(cs)SASAdInfo(py)aspectRatio) is intended to work with responsive creatives. If your creative is not responsive, rendering issues may occur (huge blank space or cropped creative for instance). Here are some good practices in case you are handling non responsive creatives:

**If your creative is non-responsive and smaller than its reserved ad placement**

We suggest defining a hardcoded [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) size based on the given [`aspectRatio`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdInfo.html#/c:objc(cs)SASAdInfo(py)aspectRatio). For instance, if your [`aspectRatio`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdInfo.html#/c:objc(cs)SASAdInfo(py)aspectRatio) is `6.4` (320/50), it refers to a 320x50 format, so you can hardcode your [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) size to 320px width and 50px height. You can
do the same if your [`aspectRatio`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdInfo.html#/c:objc(cs)SASAdInfo(py)aspectRatio) is `1.2` (300/250), referring to 350x250 format.

Once you have your [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) with hardcoded size, you will be able to center it within the view reserved for your ad.

**If your creative is non-responsive and bigger than its reserved ad placement**

Unfortunately, in that case, the resulting ad will be cropped regardless, as the initial image is bigger than the reserved spot.

Check the [samples](https://github.com/smartadserver/equativ-display-sdk-samples-ios) to get more examples on how to integrate a banner view in different layouts (plain view controller, table views, …).

## Improving parallax ad rendering

The _banner view_ can be used to display _parallax ads_. A parallax ad is an inline ad which shows part of a full screen ad under the app content during scroll interactions. It supports images, agency scripts and HTML 5 creatives.

The [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) can automatically display this type of ads when integrated into any scrollable view **that inherits from `UIScrollView`**.

The creative displayed inside the parallax banner view will takes the whole screen by default (minus the app window _safe areas_). It means that part of the creative might be hidden by some UI elements of your app, such as:

* the navigation bar
* the tab bar
* any other custom UI elements that might cover the scroll view

You can prevent part of the ad to be hidden by the UI by defining _custom parallax margins_ on your [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html) instance by providing a [`SASParallaxMargins`](https://help-display-sdk.equativ.com/ios/API/Classes/SASParallaxMargins.html) instance to the [`parallaxMargins`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html#/c:objc(cs)SASBannerView(py)parallaxMargins) property:

    bannerView.parallaxMargins = SASParallaxMargins(left: 10, top: 50, right: 10, bottom: 20)

## Native ad in banner

Starting with **Equativ Display SDK** __v8.3.0__ it is possible to display native ad through [`SASBannerView`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html). You have nothing more to do than calling [`loadAd(with:)`](https://help-display-sdk.equativ.com/ios/API/Classes/SASBannerView.html#/c:objc(cs)SASBannerView(im)loadAdWithAdPlacement:) with a native ad [`SASAdPlacement`](https://help-display-sdk.equativ.com/ios/API/Classes/SASAdPlacement.html). You can use the native ad [test placements](https://help-display-sdk.equativ.com/ios/troubleshooting.html#test) to try it by yourself.

If you want to integrate native ad by using the more advanced integration, please check the [native ad integration article](https://help-display-sdk.equativ.com/ios/integration/native-ad.html.md).

## Video Header Ad - A specific way to implement your video banner

The _banner view_ can be used as a __video header ad__ format, following a specific integration in your application. To help you doing so, we have created integration samples and external classes to
add to your app to integrate this new __video header ad__ format as easily as possible. You'll find more information in the [dedicated article](https://help-display-sdk.equativ.com/creatives/video-header-ad.html.md).