--- title: Banner Ads description: 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. ```swift let adSize = AdSize.getAdaptiveBanner(forMaxWidth: 360) ``` ```objc CASSize *adSize = [CASSize getAdaptiveBannerForMaxWidth:360]; ``` 2. **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. ```swift let adSize = CASSize.getInlineBanner(width: 360, maxHeight: 400) ``` ```objc CASSize *adSize = [CASSize getInlineBannerWithWidth:360 maxHeight:400]; ``` 3. **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. ```swift let adSize = CASSize.getSmartBanner() ``` ```objc CASSize *adSize = [CASSize getSmartBanner]; ``` 4. **Medium Rectangle** has a fixed size of 300x250. ```swift let adSize = CASSize.mediumRectangle ``` ```objc CASSize *adSize = CASSize.mediumRectangle; ``` 5. **Leaderboard** has a fixed size of 728x90 and is allowed on tablets only. ```swift let adSize = CASSize.leaderboard ``` ```objc CASSize *adSize = CASSize.leaderboard; ``` 6. **Standard banner** has a fixed size of 320x50 and is the minimum ad size. ```swift let adSize = CASSize.banner ``` ```objc CASSize *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. ```swift class MyViewController: UIViewController, CASBannerDelegate { var bannerView: CASBannerView! override func viewDidLoad() { super.viewDidLoad() let adSize = CASSize.banner bannerView = CASBannerView(casID: MyAppDelegate.casID, size: adSize, origin: .zero) bannerView.delegate = self bannerView.isAutoloadEnabled = true addBannerViewToView() } func addBannerViewToView() { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) NSLayoutConstraint.activate([ bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor), bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor) ]) } } ``` ```objc @interface MyViewController : UIViewController @property (nonatomic, strong) CASBannerView *bannerView; @end @implementation MyViewController - (void)viewDidLoad { [super viewDidLoad]; CASSize *adSize = CASSize.banner; self.bannerView = [[CASBannerView alloc] initWithCasID: MyAppDelegate.casID size:adSize origin:CGPointZero]; self.bannerView.delegate = self; self.bannerView.isAutoloadEnabled = YES; [self addBannerViewToView]; } - (void)addBannerViewToView { self.bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:self.bannerView]; [NSLayoutConstraint activateConstraints:@[ [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor], [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor] ]]; } @end ``` 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. You can add the `CASBannerView` module to a storyboard or xib file. When using this method, be sure to only add position constraints on the banner. For example, when displaying an adaptive banner at the bottom of the screen, set the bottom of the banner view equal to the top of the Bottom Layout Guide, and set the `centerX` constraint equal to the `centerX`of the superview. The banner's ad size and CAS ID is still set programmatically: ```swift class MyViewController: UIViewController, CASBannerDelegate { @IBOutlet var bannerView: CASBannerView! override func viewDidLoad() { super.viewDidLoad() let bannerDelegate: CASBannerDelegate = self bannerView.delegate = bannerDelegate bannerView.casID = MyAppDelegate.casID bannerView.adSize = AdSize... bannerView.isAutoloadEnabled = true } } ``` ```objc @interface MyViewController : UIViewController @property (weak, nonatomic) IBOutlet CASBannerView *bannerView; @end @implementation MyViewController - (void)viewDidLoad { [super viewDidLoad]; self.bannerView.delegate = self; self.bannerView.casID = MyAppDelegate.casID; self.bannerView.adSize = CASSize.banner; self.bannerView.isAutoloadEnabled = YES; } @end ``` Banner ads view must be placed in the [Safe Area](https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/#layout-guides-and-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. ```swift 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). } ``` ```objc - (void)bannerAdViewDidLoad:(CASBannerView *)view { // Invokes this callback when ad loaded and ready to present. } - (void)bannerAdView:(CASBannerView *)adView didFailWith:(CASError *)error { // Invokes this callback when an error occurred with the ad. // - To see a description of the error, see `CASError.message`. } - (void)bannerAdViewDidRecordClick:(CASBannerView *)adView { // Invokes this callback when a user clicks the ad. } - (void)bannerAdView:(CASBannerView *)adView willPresent:(id _Nonnull)impression { // Legacy, same as new didRecordImpression(AdContentInfo). } ``` Note that the reference to `delegate` is weak and can be removed from memory. ## Optional Placement name An optional placement name for the ad instance that helps categorize and track statistics across different ad placements. The placement name should be set before loading the ads. Maximum 100 characters allowed for the placement name. ```swift bannerView.placement = "BestPlace" ``` ```objc bannerView.placement = @"BestPlace"; ``` ## 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 `CASBannerView`class. ```swift bannerView.loadAd() ``` ```objc [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. ```swift bannerView.isAutoloadEnabled = false ``` ```objc bannerView.isAutoloadEnabled = NO; ``` 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. ```swift override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransition(to: size, with: coordinator) bannerView.adSize = AdSize... if bannerView.isAutoloadEnabled == false { bannerView.loadAd() } } ``` ```objc - (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id)coordinator { [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator]; self.bannerView.adSize = [CASSize getAdaptiveBannerForMaxWidth:size.width]; if (!self.bannerView.isAutoloadEnabled) { [self.bannerView loadAd]; } } ``` ## Banner Ad visibility The banner is a normal view so you can feel free to change the visibility with the following method: ```swift bannerView.isHidden = true ``` ```objc bannerView.hidden = YES; ``` ## 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: ```swift bannerView.refreshInterval = interval ``` ```objc bannerView.refreshInterval = interval; ``` We recommend using optimal automatic refresh interval 30 seconds, by default. To disable refresh ad use following method: ```swift bannerView.disableAdRefresh(); ``` ```objc [self.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. ```swift deinit { bannerView.destroy() } ``` ```objc - (void)dealloc { [self.bannerView destroy]; } ``` ## Check Ad availability Use `isAdLoaded` to check whether an ad is currently loaded. ```swift if bannerView.isAdLoaded { // ... } ``` ```objc if (bannerView.isAdLoaded) { // ... } ``` ## Samples - [SwiftUI Banner Ad View](https://github.com/cleveradssolutions/CAS-iOS/blob/master/DemoApp%20SwiftUI/CASSwiftUIDemoApp/BannersAd/BannerAdView.swift) - [SwiftUI Adaptive Banner Ad Container View](https://github.com/cleveradssolutions/CAS-iOS/blob/master/DemoApp%20SwiftUI/CASSwiftUIDemoApp/BannersAd/AdaptiveBannerContainerView.swift) - [Swift Banner Ad UIViewController](https://github.com/cleveradssolutions/CAS-iOS/blob/master/DemoApp%20Swift/CASSample/BannerAd/BannerVC.swift) - [Objective-C Banner Ad UIViewController](https://github.com/cleveradssolutions/CAS-iOS/blob/master/DemoApp%20Objective-C/CASSample/BannerAd/BannerVC.m)