Implementing Ad Mob Banner Ads in Swift StoryBoard
Tags: swift, storyboard, ios, xcode
Published: 2020-09-16 14:31:47

You've found yourself adding banner ads to your iOS application, maybe for fun or maybe for profit. Maybe you're just doing it to learn how, who am I to judge! (Especially since that's exactly what I was doing).




###Getting Setup
Assuming you have xCode downloaded and have created a new swift project, the next thing you want to do is to open your terminal and `cd` into that project's folder. You will next be installing [cocoaPods](https://www.appcoda.com/cocoapods/) `sudo gem install cocoapods` so it can take care of all the framework dependencies for adMod. Following this you will type `pod init` in your terminal. More details on pods and their functionality can be [found here](https://developers.google.com/admob/ios/quick-start).

 Next you will go into your project folder and open up `podfiles.txt`. You will want to edit that file to include `pod 'Google-Mobile-Ads-SDK'` and it will look like this:

```
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'myCoolProject' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for boredinchicago

  pod 'Google-Mobile-Ads-SDK'


end

```

Last thing is to run `pod install` in your terminal to install the pod we just added to that file. This will automatically download and add the framework to the project. You will want to completely close all of your xCode projects and then open up the new `myCoolProject.xcworkspace` project, which should be directly below the original xCode project.

Now you can check to make sure all these dependencies were installed by clicking the blue project file in the project navigator inside of xCode, then click Build Phases and look inside of Link Binary with Libraries to ensure that the Pod is in there.


##Set Up AdMod Account
Google has made this free sign up extremely straightforward - especially if you already have a gmail. You will want to [follow along](https://apps.admob.com/v2/home) their sign up set by step process until you have an AppID, it should look something like this `ca-app-pub-2222233333333444~4444444444`. Then you will be adding an ad unit to that app, make sure to select [banner](https://developers.google.com/admob/ios/banner) if that is the type of ad you want. It will assign a similarly long ad unit ID. Keep track of those two IDs as you will be adding it to your project.


##Adding AdMob to your Project
First thing first is to open up your `info.plist` file and add `GADApplicationIdentifier` as a new property in the left hand column. For its value add your AppId from AddMob.
Next go into your `AppDelegate.swift` and add `import GoogleMobileAds` to the import section. Next inside of your first application function, specifically the one that contains `didFinishLaunchingWithOptions` you will be adding the next option via this code `        GADMobileAds.sharedInstance().start(completionHandler: nil)
`.
The Pod install should have taken care of this next step, but go inside Build Settings, from the blue project link in the project navigator, and go down to `Other Linker Flags` and ensure that `-ObjC` is listed for both debug and release.

##Adding the Actual Ads to your Project

Go into whichever view controller you are wanting the ad on. At the top you're adding `import GoogleMobileAds` again. Then you will adopt the `GADBannerViewDelegate` protocol by adding it to the end of your class declaration. Somewhere in your class, but above your viewDidLoad function add `var bannerView: GADBannerView!` . Now your viewdidload method has a few additions to be adding to it as well. We can check out those below:

```
  override func viewDidLoad() {
        super.viewDidLoad()
        bannerView = GADBannerView(adSize: kGADAdSizeBanner)
        addBannerViewToView(bannerView)
        bannerView.adUnitID = "MYCOOLADPID_ITGOES_HERE"
        bannerView.rootViewController = self
        bannerView.load(GADRequest())
        bannerView.delegate = self
    }
```

Where the adUnitId param is being assigned to bannerView, make sure you are adding your Ad Unit ID not your App Unit ID, otherwise your project will start throwing errors. Underneath your viewDidLoad function you're going to be creating the banner view and its constraints towards the regular view controller.

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

##Making the Ads Responsive
Responsive is a little strong of a word, but if your app is going to be both for tablets and phones this is a must to keep the image of the ad crisp. There are a lot of available ad [sizes through ad mob](https://developers.google.com/admob/ios/banner#banner_sizes), so you can play around with what looks best to you.

320x50	- kGADAdSizeBanner
320x100	- kGADAdSizeLargeBanner
300x250	- kGADAdSizeMediumRectangle
468x60	- kGADAdSizeFullBanner
728x90	- kGADAdSizeLeaderboard

```
  if UIDevice.current.userInterfaceIdiom == .phone {
        // iPhone
        adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 320, height: 50))
        adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 320, height: 50)
    } else  {
        // iPad
        adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 468, height: 60))
        adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 468, height: 60)
    }
```



Wildly straightforward way to get ads onto your app. Now the hard part is getting people to actually download it!

If you have issues where there's [no ads showing up](https://stackoverflow.com/questions/39108558/admob-bannerview-request-error-no-ad-to-show), it might be because Google hasn't registered your new ad unit and its ID. Just try back in an hour or so.