Banner Ads

This guide shows you how to integrate banner ads from CAS into an iOS app.

Banner ad units display rectangular ads that occupy a portion of an app's layout. They can refresh automatically after a set period of time. This means users view a new ad at regular intervals, even if they stay on the same screen in your app. They're also the simplest ad format to implement.

Banner ads are displayed in CASBannerView objects, so the first step toward integrating banner ads is to include a CASBannerView in your view hierarchy. This is typically done either with the layout or programmatically.

Below is a diagram showing the ad lifecycle.

Diagram

Get the Ad size

To load a banner ad, you need to specify the ad size. To do this, choose one of the methods for obtaining an CASSize from the list below:

  1. Adaptive banner ads have a fixed aspect ratio for the maximum width. The adaptive size calculates the optimal height for that width with an aspect ratio similar to 320x50.
let adSize = AdSize.getAdaptiveBanner(forMaxWidth: 360)
  1. Inline banner ads have a desired width and a maximum height, useful when you want to limit the banner's height. Inline banners are larger and taller compared to adaptive banners. They have variable height, including Medium Rectangle size, and can be as tall as the device screen.
let adSize = CASSize.getInlineBanner(width: 360, maxHeight: 400)
  1. Smart ad size selects the optimal dimensions depending on the device type. For mobile devices, it returns 320x50, while for tablets, it returns 728x90. In the UI, these banners occupy the same amount of space regardless of device type.
let adSize = CASSize.getSmartBanner()
  1. Medium Rectangle has a fixed size of 300x250.
let adSize = CASSize.mediumRectangle
  1. Leaderboard has a fixed size of 728x90 and is allowed on tablets only.
let adSize = CASSize.leaderboard
  1. Standard banner has a fixed size of 320x50 and is the minimum ad size.
let adSize = CASSize.banner

Create Ad View

The first step toward displaying a banner is to create CASBannerView in the layout.

The CASBannerView can be instantiated directly. In this case, we instantiate the banner with desired ad size and CAS ID.

class MyViewController: UIViewController, CASBannerDelegate {
    var bannerView: CASBannerView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let adSize = AdSize...
        bannerView = CASBannerView(casID: MyAppDelegate.casID, adSize: adSize)      
        let bannerDelegate: CASBannerDelegate = self
        bannerView.delegate = bannerDelegate
        bannerView.isAutoloadEnabled = true
        
        addBannerViewToView()
    }

    func addBannerViewToView() {
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(bannerView)
        view.addConstraints([
            NSLayoutConstraint(item: bannerView,
                              attribute: .bottom,
                              relatedBy: .equal,
                              toItem: view.safeAreaLayoutGuide,
                              attribute: .bottom,
                              multiplier: 1,
                              constant: 0),
            NSLayoutConstraint(item: bannerView,
                              attribute: .centerX,
                              relatedBy: .equal,
                              toItem: view,
                              attribute: .centerX,
                              multiplier: 1,
                              constant: 0)
            ])
    }
}

This example doesn't give width or height constraints, as the provided ad size gives the banner an intrinsic content size to size the view.

Banner ads view must be placed in the Safe Area to avoid being obscured by rounded corners, sensor housing, and the Home indicator.

Receive Ad events

To further customize the behavior of your ad, you can hook onto a number of events in the ad's lifecycle: loading, failing, clicking, and so on. You can listen for these events through the CASBannerDelegate protocol.

func bannerAdViewDidLoad(_ view: CASBannerView) {
  // Invokes this callback when ad loaded and ready to present.
}

func bannerAdView(_ adView: CASBannerView, didFailWith error: CASError) {
  // Invokes this callback when an error occurred with the ad.
  // - To see a description of the error, see `CASError.message`.
}

func bannerAdViewDidRecordClick(_ adView: CASBannerView) {
  // Invokes this callback when a user clicks the ad.
}

func bannerAdView(_ adView: CASBannerView, willPresent impression: CASImpression) {
  // Legacy, same as new didRecordImpression(AdContentInfo).
}

Note that the reference to delegate is weak and can be removed from memory.

Load Ad

Once the ad view is in place, the next step is to load an ad. That's done with the loadAd() method in the CASBannerViewclass.

bannerView.loadAd()

Autoload Ad mode

If enabled, the ad will automatically load new content when the current ad is dismissed or completed. Additionally, it will automatically retry loading the ad if an error occurs during the loading process.

bannerView.isAutoloadEnabled = false

By default enabled.

Handle Orientation Changes

When using an CASSize based on screen width, you should recalculate the size whenever the device orientation changes and reload the banner ad to match the new layout.

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    bannerView.adSize = AdSize...  
    if bannerView.isAutoloadEnabled == false {
      bannerView.loadAd()
    }
}

Banner Ad visibility

The banner is a normal view so you can feel free to change the visibility with the following method:

bannerView.isHidden = true

Ad refresh interval

The ad view’s automatic refresh interval determines how often a new ad request is generated for that ad view. You have the option to set a custom refresh interval longer than 10 seconds or to disable the Automatic refresh option for the ad view.

Change the banner automatic refresh interval using the following method:

bannerView.refreshInterval = interval

We recommend using optimal automatic refresh interval 30 seconds, by default.

To disable refresh ad use following method:

bannerView.disableAdRefresh();
  • The automatic refresh occurs only if the banner is visible on screen.
  • The isAutoloadEnabled has no effect on refreshing the banner ad.

Release ad resource

Be sure to release ad resources if you’re no longer going to use the ad view.

deinit {
  bannerView.destroy()
}

Check Ad availability

Use isAdLoaded to check whether an ad is currently loaded.

if bannerView.isAdLoaded {
}