DEV Community

Cover image for Implementing Ad Mob Banner Ads in Swift StoryBoard
Sarah Thompson
Sarah Thompson

Posted on

Implementing Ad Mob Banner Ads in Swift StoryBoard

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 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.

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

  # Pods for boredinchicago

  pod 'Google-Mobile-Ads-SDK'


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 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 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() {
        bannerView = GADBannerView(adSize: kGADAdSizeBanner)
        bannerView.adUnitID = "MYCOOLADPID_ITGOES_HERE"
        bannerView.rootViewController = self
        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
        [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, 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, it might be because Google hasn't registered your new ad unit and its ID. Just try back in an hour or so.

Top comments (0)