Banner ads

    • Banner ads are rectangular ads that occupy a portion of an app's layout and can be anchored or inline.

    • This guide focuses on implementing anchored adaptive banner ads, which optimize size based on device width.

    • It is crucial to use test ads during development to avoid account suspension.

    • Banner ads are displayed using the GADBannerView object, which can be created programmatically or in Interface Builder.

    • You can listen for banner ad lifecycle events using the GADBannerViewDelegate .
    Select platform: Android iOS Unity Flutter

    Banner ads are rectangular ads that occupy a portion of an app's layout. They stay on screen while users are interacting with the app, either anchored at the top or bottom of the screen or inline with content as the user scrolls. Banner ads can refresh automatically after a certain period of time. See Overview of banner ads for more information.

    This guide shows you how to get started with anchored adaptive banner ads , which maximizes performance by optimizing the ad size for each device using an ad width you specify.

    Anchored adaptive banner

    Anchored adaptive banner ads are fixed aspect ratio ads rather than the regular fixed size ads. The aspect ratio is similar to 320x50 industry standard. Once you specify the full width available, it returns an ad with optimal height for that width. The optimal height doesn't change across requests from the same device, and the surrounding views don't need to move when the ad refreshes.

    Prerequisites

    Always test with test ads

    When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

    The easiest way to load test ads is to use our dedicated test ad unit ID for iOS banners:

    ca-app-pub-3940256099942544/2435281174

    It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

    For more information about how the Mobile Ads SDK's test ads work, see Test Ads .

    Create a GADBannerView

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

    Programmatically

    A GADBannerView can also be instantiated directly. The following example creates a GADBannerView :

    Swift

      // Initialize the BannerView. 
 bannerView 
  
 = 
  
 BannerView 
 () 
 bannerView 
 . 
 translatesAutoresizingMaskIntoConstraints 
  
 = 
  
 false 
 view 
 . 
 addSubview 
 ( 
 bannerView 
 ) 
 // This example doesn't give width or height constraints, as the ad size gives the banner an 
 // intrinsic content size to size the view. 
 NSLayoutConstraint 
 . 
 activate 
 ([ 
  
 // Align the banner's bottom edge with the safe area's bottom edge 
  
 bannerView 
 . 
 bottomAnchor 
 . 
 constraint 
 ( 
 equalTo 
 : 
  
 view 
 . 
 safeAreaLayoutGuide 
 . 
 bottomAnchor 
 ), 
  
 // Center the banner horizontally in the view 
  
 bannerView 
 . 
 centerXAnchor 
 . 
 constraint 
 ( 
 equalTo 
 : 
  
 view 
 . 
 centerXAnchor 
 ), 
 ]) 
 
      BannerSnippets 
 . 
 swift

    SwiftUI

    To use a BannerView , create a UIViewRepresentable :

      private 
  
 struct 
  
 BannerViewContainer 
 : 
  
 UIViewRepresentable 
  
 { 
  
 typealias 
  
 UIViewType 
  
 = 
  
 BannerView 
  
 let 
  
 adSize 
 : 
  
 AdSize 
  
 init 
 ( 
 _ 
  
 adSize 
 : 
  
 AdSize 
 ) 
  
 { 
  
 self 
 . 
 adSize 
  
 = 
  
 adSize 
  
 } 
  
 func 
  
 makeUIView 
 ( 
 context 
 : 
  
 Context 
 ) 
  
 - 
>  
 BannerView 
  
 { 
  
 let 
  
 banner 
  
 = 
  
 BannerView 
 ( 
 adSize 
 : 
  
 adSize 
 ) 
  
 banner 
 . 
 adUnitID 
  
 = 
  
 "ca-app-pub-3940256099942544/2435281174" 
  
 banner 
 . 
 load 
 ( 
 Request 
 ()) 
  
 banner 
 . 
 delegate 
  
 = 
  
 context 
 . 
 coordinator 
  
 return 
  
 banner 
  
 } 
  
 func 
  
 updateUIView 
 ( 
 _ 
  
 uiView 
 : 
  
 BannerView 
 , 
  
 context 
 : 
  
 Context 
 ) 
  
 {} 
  
 func 
  
 makeCoordinator 
 () 
  
 - 
>  
 BannerCoordinator 
  
 { 
  
 return 
  
 BannerCoordinator 
 ( 
 self 
 ) 
  
 } 
 
      BannerContentView 
 . 
 swift

    Add your UIViewRepresentable to the view hierarchy, specifying height and width values:

      var 
  
 body 
 : 
  
 some 
  
 View 
  
 { 
  
 Spacer 
 () 
  
 // Request an anchored adaptive banner with a width of 375. 
  
 let 
  
 adSize 
  
 = 
  
 currentOrientationAnchoredAdaptiveBanner 
 ( 
 width 
 : 
  
 375 
 ) 
  
 BannerViewContainer 
 ( 
 adSize 
 ) 
  
 . 
 frame 
 ( 
 width 
 : 
  
 adSize 
 . 
 size 
 . 
 width 
 , 
  
 height 
 : 
  
 adSize 
 . 
 size 
 . 
 height 
 ) 
 } 
 
      BannerContentView 
 . 
 swift

    Objective-C

      // Initialize the GADBannerView. 
 self 
 . 
 bannerView 
  
 = 
  
 [[ 
 GADBannerView 
  
 alloc 
 ] 
  
 init 
 ]; 
 self 
 . 
 bannerView 
 . 
 translatesAutoresizingMaskIntoConstraints 
  
 = 
  
 NO 
 ; 
 [ 
 self 
 . 
 view 
  
 addSubview 
 : 
 self 
 . 
 bannerView 
 ]; 
 // This example doesn't give width or height constraints, as the ad size gives the banner an 
 // intrinsic content size to size the view. 
 [ 
 NSLayoutConstraint 
  
 activateConstraints 
 : 
 @[ 
  
 // Align the banner's bottom edge with the safe area's bottom edge 
  
 [ 
 self 
 . 
 bannerView 
 . 
 bottomAnchor 
  
 constraintEqualToAnchor 
 : 
 self 
 . 
 view 
 . 
 safeAreaLayoutGuide 
 . 
 bottomAnchor 
 ], 
  
 // Center the banner horizontally in the view 
  
 [ 
 self 
 . 
 bannerView 
 . 
 centerXAnchor 
  
 constraintEqualToAnchor 
 : 
 self 
 . 
 view 
 . 
 centerXAnchor 
 ], 
 ] 
 ]; 
 
      BannerSnippets 
 . 
 m

    Interface Builder

    You can add a GADBannerView 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.

    Set the ad size

    Set the GADSize struct to an anchored adaptive banner type with a specified width:

    Swift

      // Request an anchored adaptive banner with a width of 375. 
 bannerView 
 . 
 adSize 
  
 = 
  
 currentOrientationAnchoredAdaptiveBanner 
 ( 
 width 
 : 
  
 375 
 ) 
 
      ViewController 
 . 
 swift

    Objective-C

      // Request an anchored adaptive banner with a width of 375. 
 self 
 . 
 bannerView 
 . 
 adSize 
  
 = 
  
 GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth 
 ( 
 375 
 ); 
 
      ViewController 
 . 
 m

    Load an ad

    Once the GADBannerView is in place and its properties, such as adUnitID , are configured, it's time to load an ad. This is done by calling loadRequest: on a GADRequest object:

    Swift

      bannerView 
 . 
 load 
 ( 
 Request 
 ()) 
 
      ViewController 
 . 
 swift

    SwiftUI

      banner 
 . 
 adUnitID 
  
 = 
  
 "ca-app-pub-3940256099942544/2435281174" 
 banner 
 . 
 load 
 ( 
 Request 
 ()) 
 
      BannerContentView 
 . 
 swift

    Objective-C

      [ 
 self 
 . 
 bannerView 
  
 loadRequest 
 : 
 [ 
 GADRequest 
  
 request 
 ]]; 
 
      ViewController 
 . 
 m

    GADRequest objects represent a single ad request, and contain properties for things like targeting information.

    Refresh an ad

    If you configured your ad unit to refresh, you don't need to request another ad when the ad fails to load. Google Mobile Ads SDK respects any refresh rate you specified in the AdMob UI. If you haven't enabled refresh, issue a new request. For more details on ad unit refresh, such as setting a refresh rate, see Use automatic refresh for Banner ads .

    Handle orientation changes

    When your app's screen orientation changes, such as from portrait mode to landscape, the available width for the banner often changes as well. To make sure you display an appropriately sized ad for the new layout, request a new banner. If your banner width is static, or if your layout constraints can handle the resize, skip this step.

    Swift

      override 
  
 func 
  
 viewWillTransition 
 ( 
  
 to 
  
 size 
 : 
  
 CGSize 
 , 
  
 with 
  
 coordinator 
 : 
  
 UIViewControllerTransitionCoordinator 
 ) 
  
 { 
  
 coordinator 
 . 
 animate 
 ( 
 alongsideTransition 
 : 
  
 { 
  
 _ 
  
 in 
  
 // Load a new ad for the new orientation. 
  
 }) 
 } 
 
      BannerSnippets 
 . 
 swift

    Objective-C

      - 
 ( 
 void 
 ) 
 viewWillTransitionToSize: 
 ( 
 CGSize 
 ) 
 size 
  
 withTransitionCoordinator 
 :( 
 id<UIViewControllerTransitionCoordinator> 
 ) 
 coordinator 
  
 { 
  
 [ 
 coordinator 
  
 animateAlongsideTransition 
 :^ 
 ( 
 id<UIViewControllerTransitionCoordinatorContext> 
  
 context 
 ) 
  
 { 
  
 // Load a new ad for the new orientation. 
  
 } 
  
 completion 
 : 
 nil 
 ]; 
 } 
 
      BannerSnippets 
 . 
 m

    Ad events

    Through the use of GADBannerViewDelegate , you can listen for lifecycle events, such as when an ad is closed or the user leaves the app.

    Register for banner events

    To register for banner ad events, set the delegate property on GADBannerView to an object that implements the GADBannerViewDelegate protocol. Generally, the class that implements banner ads also acts as the delegate class, in which case, the delegate property can be set to self .

    Swift

      bannerView 
 . 
 delegate 
  
 = 
  
 self 
     ViewController 

     
     
 . 
 swift

    SwiftUI

      banner 
 . 
 delegate 
  
 = 
  
 context 
 . 
 coordinator 
     BannerContentView 

     
     
 . 
 swift

    Objective-C

      self 
 . 
 bannerView 
 . 
 delegate 
  
 = 
  
 self 
 ; 
 
      ViewController 
 . 
 m

    Implement banner events

    Each of the methods in GADBannerViewDelegate is marked as optional, so you only need to implement the methods you want. This example implements each method and logs a message to the console:

    Swift

      func 
  
 bannerViewDidReceiveAd 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 print 
 ( 
 #function 
 ) 
 } 
 func 
  
 bannerView 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 , 
  
 didFailToReceiveAdWithError 
  
 error 
 : 
  
 Error 
 ) 
  
 { 
  
 print 
 ( 
 #function 
  
 + 
  
 ": " 
  
 + 
  
 error 
 . 
 localizedDescription 
 ) 
 } 
 func 
  
 bannerViewDidRecordClick 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 print 
 ( 
 #function 
 ) 
 } 
 func 
  
 bannerViewDidRecordImpression 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 print 
 ( 
 #function 
 ) 
 } 
 func 
  
 bannerViewWillPresentScreen 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 print 
 ( 
 #function 
 ) 
 } 
 func 
  
 bannerViewWillDismissScreen 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 print 
 ( 
 #function 
 ) 
 } 
 func 
  
 bannerViewDidDismissScreen 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 print 
 ( 
 #function 
 ) 
 } 
 
      ViewController 
 . 
 swift

    Objective-C

      - 
 ( 
 void 
 ) 
 bannerViewDidReceiveAd: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 { 
  
 NSLog 
 ( 
 @"bannerViewDidReceiveAd" 
 ); 
 } 
 - 
 ( 
 void 
 ) 
 bannerView: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 didFailToReceiveAdWithError: 
 ( 
 NSError 
  
 * 
 ) 
 error 
  
 { 
  
 NSLog 
 ( 
 @"bannerView:didFailToReceiveAdWithError: %@" 
 , 
  
 [ 
 error 
  
 localizedDescription 
 ]); 
 } 
 - 
 ( 
 void 
 ) 
 bannerViewDidRecordImpression: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 { 
  
 NSLog 
 ( 
 @"bannerViewDidRecordImpression" 
 ); 
 } 
 - 
 ( 
 void 
 ) 
 bannerViewWillPresentScreen: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 { 
  
 NSLog 
 ( 
 @"bannerViewWillPresentScreen" 
 ); 
 } 
 - 
 ( 
 void 
 ) 
 bannerViewWillDismissScreen: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 { 
  
 NSLog 
 ( 
 @"bannerViewWillDismissScreen" 
 ); 
 } 
 - 
 ( 
 void 
 ) 
 bannerViewDidDismissScreen: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 { 
  
 NSLog 
 ( 
 @"bannerViewDidDismissScreen" 
 ); 
 } 
 
      ViewController 
 . 
 m

    See the Ad Delegate example for an implementation of banner delegate methods in the iOS API Demo app.

    Swift Objective-C

    Use cases

    Here are some example use cases for these ad event methods.

    Add a banner to the view hierarchy once an ad is received

    You may want to delay in adding a GADBannerView to the view hierarchy until after an ad is received. You can do this by listening for the bannerViewDidReceiveAd: event:

    Swift

      func 
  
 bannerViewDidReceiveAd 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 // Add banner to view and add constraints. 
  
 addBannerViewToView 
 ( 
 bannerView 
 ) 
 }

    Objective-C

      - 
 ( 
 void 
 ) 
 bannerViewDidReceiveAd: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 { 
  
 // Add bannerView to view and add constraints as above. 
  
 [ 
 self 
  
 addBannerViewToView 
 : 
 self 
 . 
 bannerView 
 ]; 
 }

    Animate a banner ad

    You can also use the bannerViewDidReceiveAd: event to animate a banner ad once it's returned, as shown in the following example:

    Swift

      func 
  
 bannerViewDidReceiveAd 
 ( 
 _ 
  
 bannerView 
 : 
  
 BannerView 
 ) 
  
 { 
  
 bannerView 
 . 
 alpha 
  
 = 
  
 0 
  
 UIView 
 . 
 animate 
 ( 
 withDuration 
 : 
  
 1 
 , 
  
 animations 
 : 
  
 { 
  
 bannerView 
 . 
 alpha 
  
 = 
  
 1 
  
 }) 
 }

    Objective-C

      - 
 ( 
 void 
 ) 
 bannerViewDidReceiveAd: 
 ( 
 GADBannerView 
  
 * 
 ) 
 bannerView 
  
 { 
  
 bannerView 
 . 
 alpha 
  
 = 
  
 0 
 ; 
  
 [ 
 UIView 
  
 animateWithDuration 
 : 
 1.0 
  
 animations 
 :^ 
 { 
  
 bannerView 
 . 
 alpha 
  
 = 
  
 1 
 ; 
  
 }]; 
 }

    Pause and resume the app

    The GADBannerViewDelegate protocol has methods to notify you of events, such as when a click causes an overlay to be presented or dismissed. If you want to trace whether these events were due to ads, register for these GADBannerViewDelegate methods.

    To catch all types of overlay presentations or external browser invocations, not just those that come from ad clicks, your app is better off listening for the equivalent methods on UIViewController or UIApplication . Here is a table showing the equivalent iOS methods that are invoked at the same time as GADBannerViewDelegate methods:

    GADBannerViewDelegate method iOS method
    bannerViewWillPresentScreen: UIViewController's viewWillDisappear:
    bannerViewWillDismissScreen: UIViewController's viewWillAppear:
    bannerViewDidDismissScreen: UIViewController's viewDidAppear:

    Additional resources

    Examples on GitHub

    Next steps

    Collapsible banners

    Collapsible banner ads are banner ads that are initially presented as a larger overlay, with a button to collapse the ad to a smaller size. Consider using it to further optimize your performance. See collapsible banner ads for more details.

    Inline adaptive banners

    Inline adaptive banners are larger, taller banners compared to anchored adaptive banners. They are of variable height, and can be as tall as the device screen. Inline adaptive banners are recommended over anchored adaptive banner ads for apps that place banner ads in scrollable content. See inline adaptive banners for more details.

    Explore other topics

    Design a Mobile Site
    View Site in Mobile | Classic
    Share by: