Banner/MREC Ads
HyprMX supports Banner/MREC and Audio Banner Ad Units. This guide shows how to display these Banner Ads in your application.
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 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 delegate 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
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
Before you start, make sure you have correctly integrated and initialized the HyprMX SDK. To integrate and initialize HyprMX, see our Setup Guide.
Initialize a BannerView
BannerViews are initialized with their placement name and ad size.
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.
Ad Size
Banners are initialized using one of the pre-defined ad sizes.
Constant
Size
kHyprMXAdSizeShort
300x50
kHyprMXAdSizeBanner
320x50
kHyprMXAdSizeMediumRectangle
300x250
kHyprMXAdSizeLeaderBoard
728x90
kHyprMXAdSizeSkyScraper
160x600
To initialize a new BannerView:
let bannerView:HyprMXBannerView = HyprMXBannerView(placementName: "Banner", adSize: kHyprMXAdSizeBanner)
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.
class ViewController: UIViewController, HyprMXBannerDelegate, HyprMXInitializationDelegate
var bannerView:HyprMXBannerView?
override func viewDidLoad() {
super.viewDidLoad()
self.bannerView = HyprMXBannerView(placementName: "Banner", adSize: kHyprMXAdSizeBanner)
}
Adding Banners to your View
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 UIView.
Example Using Constraints:
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
}
Example setting the BannerView's Frame:
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)
}
For best visibility, you should horizontally center your HyprMXBannerView
in your screen. For example, you can accomplish this using a constraint.
bannerView.centerXAnchor.constraint(equalTo:self.view.safeAreaLayoutGuide.centerXAnchor).isActive = true;
Loading Ads
To load a banner ad, run the following.
let success = await bannerView.loadAd()
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)
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.
bannerView.placementDelegate = self
See below for available methods.
/** 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) {
}
Audio Banner Ad Event Callbacks (Optional)
Setting an Audio Delegate on HyprMX
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.
class YourHyprMXAudioChangeDelegate: <superclass>, HyprMXAudioChangeDelegate {
func adAudioWillStart() {}
func adAudioDidEnd() {}
}
let hyprAudioChangeDelegate = YourHyprMXAudioChangeDelegate()
HyprMX.audioChangeDelegate = hyprAudioChangeDelegate
Handling Interruptions
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.
var myAudioPlayer: AVAudioPlayer
func adAudioWillStart() {
myAudioPlayer?.pause()
}
Clearing Interruptions
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.
var myAudioPlayer: AVAudioPlayer
func adAudioDidEnd() {
try? AVAudioSession.sharedInstance().setActive(true)
myAudioPlayer?.play()
}
Updating Ad Size / Reloading
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 rotation.
To update Ad Size and Reload Ad on completion of size change:
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()
}
}
Last updated