# Banner/MREC Ads

## What are Banner/MREC Ads?

Banner or Medium Rectangle (MREC) Ad Units display a rectangular creative within an app. They occupy a portion of the app layout and stay on the screen as the users interact with the app. Refer to the [Ad Size](#a-d-size) section for a list of supported ad sizes for Banner/MREC Ad Units.

## What are Audio Banner Ads?

Audio Banner Ad Units display a rectangular creative with an accompanying audio component within an app. HyprMX provides an optional interface to receive callbacks notifying your application of interruptions to the Audio Stream by an Audio Banner Ad and when the Ad audio is finished to clear the interruption. All sizes supported for Banner/MREC Ads are supported in Audio Banner Ads.

#### Refresh Requirements <a href="#bannerads6.0.0-initializeinitializeabannerview" id="bannerads6.0.0-initializeinitializeabannerview"></a>

An Audio Banner Ad must remain on screen for the duration of the audio playback. To ensure the banner placement is not refreshed until the audio is complete, please set the refresh interval in your mediator's dashboard to 30 seconds or greater.

## How to Display Banner Ads

### Integrate & Initialize HyprMX <a href="#bannerads6.0.0-initializeinitializeabannerview" id="bannerads6.0.0-initializeinitializeabannerview"></a>

Before you start, make sure you have correctly integrated and initialized the HyprMX SDK. To integrate and initialize HyprMX, see our [Setup Guide](/sdk-integration-guides/ios.md).

### Initialize a BannerView <a href="#bannerads6.0.0-initializeinitializeabannerview" id="bannerads6.0.0-initializeinitializeabannerview"></a>

BannerViews are initialized with their [placement name](#placement-name) and [ad size](#a-d-size). &#x20;

#### **Placement Name**

HyprMX utilizes placements to load and display an ad. Placements are used to represent a point in your application's workflow where you'd like to show an ad, and placement names are a string that identifies individual banner placements in your application.&#x20;

{% hint style="info" %}
If you don't have your placement information, please reach out to your account manager to configure your banner placements. In return, they will provide the names of the new placements.
{% endhint %}

#### **Ad Size**

Banners are initialized using one of the pre-defined ad sizes.

| **Constant**                | **Size** |
| --------------------------- | -------- |
| HyprMXAdSizeShort           | 300x50   |
| HyprMXAdSizeBanner          | 320x50   |
| HyprMXAdSizeMediumRectangle | 300x250  |
| HyprMXAdSizeLeaderboard     | 728x90   |
| HyprMXAdSizeSkyScraper      | 160x600  |

To initialize a new BannerView:

{% tabs %}
{% tab title="Swift" %}

```swift
let bannerView:HyprMXBannerView = HyprMXBannerView(placementName: "Banner", adSize: kHyprMXAdSizeBanner)
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
HyprMXBannerView *bannerView = [[HyprMXBannerView alloc] initWithPlacementName:@"Banner" adSize:kHyprMXAdSizeBanner];
```

{% endtab %}
{% endtabs %}

HyprMXBannerViews are not retained in memory by the HyprMX SDK. You can retain the view by adding it to the view stack by calling `self.view.addSubview()`, or you can store the Banner in a local variable in your controller until you're ready to add it to the view.

{% tabs %}
{% tab title="Swift" %}

```swift
class ViewController: UIViewController, HyprMXBannerDelegate, HyprMXInitializationDelegate
var bannerView:HyprMXBannerView?

override func viewDidLoad() {
    super.viewDidLoad()
    self.bannerView = HyprMXBannerView(placementName: "Banner", adSize: kHyprMXAdSizeBanner)
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
@interface ViewController ()
@property (strong, nonatomic) HyprMXBannerView *bannerView;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.bannerView = HyprMXBannerView *bannerView = [[HyprMXBannerView alloc] initWithPlacementName:@"Banner" adSize:kHyprMXAdSizeBanner];
}
```

{% endtab %}
{% endtabs %}

### Adding Banners to your View <a href="#bannerads6.0.0-add_viewaddingbannerstoyourview" id="bannerads6.0.0-add_viewaddingbannerstoyourview"></a>

Add your BannerView to your View and configure its frame to match your requested ad size. You can configure the frame directly or use Constraints like any other UIVie&#x77;**.**

**Example Using Constraints:**

{% tabs %}
{% tab title="Swift" %}

```swift
override func viewDidLoad() {
    super.viewDidLoad()
    self.bannerView = HyprMXBannerView(placementName: "Banner", adSize: kHyprMXAdSizeBanner)
    
    // Add constraints to control the view's size
    self.bannerView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(self.bannerView)
    self.bannerView.widthAnchor.constraint(equalToConstant: self.bannerView.adSize.width).isActive = true
    self.bannerView.heightAnchor.constraint(equalToConstant: self.bannerView.adSize.height).isActive = true
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
- (void)viewDidLoad {
    [super viewDidLoad];
    self.bannerView = HyprMXBannerView *bannerView = [[HyprMXBannerView alloc] initWithPlacementName:@"Banner" adSize:kHyprMXAdSizeBanner];
    
    // Add constraints to control the view's size
    self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:bannerView];
    [self.bannerView.widthAnchor constraintEqualToConstant:self.bannerView.adSize.width].active = YES;
    [self.bannerView.heightAnchor constraintEqualToConstant:self.bannerView.adSize.height].active = YES;
}

```

{% endtab %}
{% endtabs %}

**Example setting the BannerView's Frame:**

{% tabs %}
{% tab title="Swift" %}

```swift
override func viewDidLoad() {
    super.viewDidLoad()
    self.bannerView = HyprMXBannerView(placementName: "Banner", adSize: kHyprMXAdSizeBanner)
    
    // Set the bannerView's frame and add to the UI
    self.bannerView.frame = CGRect.init(x: 0, y: 0, width: self.bannerView.adSize.width, height: self.bannerView.adSize.height)
    self.view.addSubview(self.bannerView)
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
- (void)viewDidLoad {
    [super viewDidLoad];
    self.bannerView = HyprMXBannerView *bannerView = [[HyprMXBannerView alloc] initWithPlacementName:@"Banner" adSize:kHyprMXAdSizeBanner];
    
    // Set the bannerView's frame and add to the UI
    self.bannerView.frame = CGRectMake(0, 0, self.bannerView.adSize.width, self.bannerView.adSize.height);
    [self.view addSubview:self.bannerView];
}


```

{% endtab %}
{% endtabs %}

For best visibility, you should horizontally center your `HyprMXBannerView` in your screen. For example, you can accomplish this using a constraint.

{% tabs %}
{% tab title="Swift" %}

```swift
bannerView.centerXAnchor.constraint(equalTo:self.view.safeAreaLayoutGuide.centerXAnchor).isActive = true;
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
[bannerView.centerXAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.centerXAnchor].active = YES;
```

{% endtab %}
{% endtabs %}

### Loading Ads <a href="#bannerads6.0.0-loading_adsloadingadvertisements" id="bannerads6.0.0-loading_adsloadingadvertisements"></a>

To load a banner ad, run the following.

{% tabs %}
{% tab title="Swift" %}

```swift
let success = await bannerView.loadAd()
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
[bannerView loadAdWithCompletion:^(BOOL success) {}];
```

{% endtab %}
{% endtabs %}

If successful, your bannerView will load an ad and render it in its view. To receive lifecycle callbacks, implement the `HyprMXBannerDelegate` protocol and set a `placementDelegate` on your bannerView.

### Setting a HyprMXBannerDelegate (Optional) <a href="#bannerads6.0.0-delegatesettingahyprmxbannerdelegate-optional" id="bannerads6.0.0-delegatesettingahyprmxbannerdelegate-optional"></a>

To receive lifecycle callbacks on your `HyprMXBannerView`, implement the `HyprMXBannerDelegate` protocol. All methods are optional and you can implement the methods you would like to receive callbacks for.

{% tabs %}
{% tab title="Swift" %}

```swift
bannerView.placementDelegate = self
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
bannerView.placementDelegate = self
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
HyprMX holds a weak reference to the placement delegate, so you must be sure to retain the delegate.
{% endhint %}

See below for available methods.

{% tabs %}
{% tab title="Swift" %}

```swift
/** Called when the user clicks on the bannerView */
func adWasClicked(_ bannerView: HyprMXBannerView) {
}
 
/** Called when a banner click will open a full-screen modal */
func adDidOpen(_ bannerView: HyprMXBannerView) {
}
     
/** Called when a full-screen modal has been closed */
func adDidClose(_ bannerView: HyprMXBannerView) {
}
 
/** Called when a banner click will open another application */
func adWillLeaveApplication(_ bannerView: HyprMXBannerView) {
}

/** Called when the banner is visible on screen */
func adImpression(_ bannerView: HyprMXBannerView) {
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
/** Called in response to loadAd when an ad was loaded */
-(void)adDidLoad:(HyprMXBannerView *)bannerView {
}
 
/** Called in response to loadAd when there was an error loading an ad */
-(void)adFailedToLoad:(HyprMXBannerView *)bannerView error:(NSError *)error {
}
 
/** Called when the user clicks on the bannerView */
-(void)adWasClicked:(HyprMXBannerView *)bannerView {
}
 
/** Called when a banner click will open a full-screen modal */
-(void)adDidOpen:(HyprMXBannerView *)bannerView {
}
 
/** Called when a full-screen modal has been closed */
-(void)adDidClose:(HyprMXBannerView *)bannerView {
}
 
/** Called when a banner click will open another application */
-(void)adWillLeaveApplication:(HyprMXBannerView *)bannerView {
}

/** Called when the banner is visible on screen */
-(void)adImpression:(HyprMXBannerView *)bannerView {
}
```

{% endtab %}
{% endtabs %}

### Audio Banner Ad Event Callbacks (Optional) <a href="#bannerads6.0.0-initializeinitializeabannerview" id="bannerads6.0.0-initializeinitializeabannerview"></a>

#### Setting an Audio Delegate on HyprMX <a href="#bannerads6.0.0-initializeinitializeabannerview" id="bannerads6.0.0-initializeinitializeabannerview"></a>

To receive audio event callbacks, implement the HyprMXAudioChangeDelegate Protocol and set your delegate object to `HyprMX.audioChangeDelegate`. HyprMX retains weak references to delegates to be sure to retain the delegates.

{% tabs %}
{% tab title="Swift" %}

```swift
class YourHyprMXAudioChangeDelegate: <superclass>, HyprMXAudioChangeDelegate {
    func adAudioWillStart() {}
    func adAudioDidEnd() {}
}

let hyprAudioChangeDelegate = YourHyprMXAudioChangeDelegate()

HyprMX.audioChangeDelegate = hyprAudioChangeDelegate
```

{% endtab %}

{% tab title="Objective-C" %}

<pre class="language-objectivec"><code class="lang-objectivec">@implementation YourHyprMXAudioChangeDelegate 
- (void)adAudioWillStart {}
- (void)adAudioDidEnd {}
@end

<strong>@property(strong, nonatomic) YourHyprMXAudioChangeDelegate *hyprAudioChangeDelegate = [YourHyprMXAudioChangeDelegate new];
</strong>
HyprMX.audioChangeDelegate = hyprAudioChangeDelegate;
</code></pre>

{% endtab %}
{% endtabs %}

#### Handling Interruptions <a href="#bannerads6.0.0-initializeinitializeabannerview" id="bannerads6.0.0-initializeinitializeabannerview"></a>

When an Audio Banner Ad begins playing, you will receive a `adAudioWillStart` callback from your `audioChangeDelegate`. You should use this callback to pause your Application's current audio players.&#x20;

{% tabs %}
{% tab title="Swift" %}

```swift
var myAudioPlayer: AVAudioPlayer
func adAudioWillStart() {
    myAudioPlayer?.pause()
}
```

{% endtab %}

{% tab title="Objective-C" %}

<pre class="language-objectivec"><code class="lang-objectivec"><strong>@property(strong, nonatomic) AVAudioPlayer *myAudioPlayer; 
</strong>- (void)adAudioWillStart {
    [self.myAudioPlayer pause];
}
</code></pre>

{% endtab %}
{% endtabs %}

#### Clearing Interruptions <a href="#bannerads6.0.0-initializeinitializeabannerview" id="bannerads6.0.0-initializeinitializeabannerview"></a>

When an Audio Banner Ad has completed playback, you will receive a `adAudioDidEnd` callback from your `audioChangeDelegate`.  You should use this callback to resume the AudioSession within your app and resume your application's audio players.

{% tabs %}
{% tab title="Swift" %}

```swift
var myAudioPlayer: AVAudioPlayer
func adAudioDidEnd() {
    try? AVAudioSession.sharedInstance().setActive(true)
    myAudioPlayer?.play()
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
@property(strong, nonatomic) AVAudioPlayer *myAudioPlayer; 
- (void)adAudioDidEnd {
    [[AVAudioSession sharedInstance] setActive:YES error:nil];
    [self.myAudioPlayer play];
}
```

{% endtab %}
{% endtabs %}

### Updating Ad Size / Reloading <a href="#bannerads6.0.0-updatingupdatingadsize-reloading" id="bannerads6.0.0-updatingupdatingadsize-reloading"></a>

You can reload another banner at any time by calling `loadAd()` on the bannerView. You can also update your `adSize` before loading a new ad by updating the `bannerView.adSize` property.

A common use case for this is updating to a new size and reloading in response to a device rotatio&#x6E;**.**

**To update Ad Size and Reload Ad on completion of size change:**

{% tabs %}
{% tab title="Swift" %}

```swift
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    coordinator.animate { context in
    } completion: { context in
    
        // Update your banner's adSize to the new desired size
        self.bannerView.adSize = kHyprMXAdSizeLeaderBoard
        
        // Load a new banner ad
        self.bannerView.loadAd()
    }
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id <UIViewControllerTransitionCoordinator>)coordinator {
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
    [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    } completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
        
        // Update your banner's adSize to the new desired size
        self.bannerView.adSize = kHyprMXAdSizeLeaderBoard;
        
        // Load a new banner ad
        [self.bannerView loadAd]
    }];
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.hyprmx.com/sdk-integration-guides/ios/ad-formats/banner-mrec-ads.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.