How To Add Google AdMob To Your iOS App

Google AdMob is an advertisement network for mobile apps, offered by Google. Basically, if you want to show some ads in your app and make money, you can use AdMob for that. Of course there are other options, but Google is certainly a trusted name in the business. Today we’ll look at how to add AdMob to an iOS app that I created for practicing times tables. You can see how the app was created here:

iOS Times Tables App – Part 1

Let’s get started!

Create a new app in AdMob

If you haven’t signed up for AdMob yet, check out how I did that for the Android version of this app. Assuming you have already signed up, go to https://admob.google.com/home/. We’re going to create a new app, so from the home page click “Add App”:

AdMob Home Page

Then we’re going to give AdMob a few basic details about the app:

App successfully created!

The app now has its own page in AdMob. The plan is to create a basic banner on the practice page, so we’ll create a single “Ad Unit”. Click on “Add Ad Unit”:

Make sure to select “Banner” on this page:

Give it a name on the next page and click “Create ad unit”:

We’ve successfully created an app and a place to show ads within it! Now on to the next step, integrating the Google AdMob SDK.

Installing the AdMob SDK

We’re going to do this with CocoaPods, as it’s the easiest and quickest way (in my humble opinion) to get external stuff. If you don’t have CocoaPods, check out their installation guide. Assuming CocoaPods is installed, we’re going to add CocoaPods to the Times Tables Xcode project that we used to create the app by creating a Podfile. CocoaPods describes this file in their Adding Pods to an Xcode Project guide.

From the terminal, cd your way to root directory of the app. Create a file called Podfile that looks like this, according to the Google AdMob SDK quick start guide:

target 'TimesTables' do

pod 'Google-Mobile-Ads-SDK'

end

If you haven’t updated CocoaPods in a while, you might need to update:

sudo gem install cocoapods

Then run this command to install the SDK:

pod install --repo-update

At this point, the SDK should be installed! You’ll now need to abandon the project file and start using the newly created workspace file called TimesTables.xcworkspace.

The next step is to edit the project’s Info.plist file to include your AdMob app ID. Following the same Google AdMob SDK quick start guide at section “Update your Info.plist”, we’re going to copy and paste the long XML snippet they show there into Info.plist.

You can edit the plist file from Xcode, but I found it hard to copy and paste anything. I’d recommend just opening with an external editor like TextEdit and pasting it in that way. Info.plist is not in the app’s root directory, it’s in a directory that should have the name of your app that holds your swift files. The directory for this particular app is called TimesTables.

You’ll need to find your AdMob app ID from the AdMob console and replace the dummy one they show here. Your app ID can be found from the “All Apps” AdMob page I showed at the very top of this post.

Now that we have made the required plist changes, we’ll add this snippet to didFinishLaunchingWithOptions in AppDelegate.swift, or more likely, if you’re on iOS 13 or above it’ll be in the SceneDelegate.swift in willConnectTo:

GADMobileAds.sharedInstance().start(completionHandler: nil)

Make sure you import the SDK at the very top of the file to which you added the above snippet:

import GoogleMobileAds

We have successfully downloaded and installed the AdMob SDK in our app!

Showing ads in the ad unit

Our next step is to actually show some ads in the ad unit we created in AdMob. Following Google’s AdMob iOS guide, we’ll add a new global variable to hold the banner. Add this to the top of the TableViewController (see the app code if you need) like this:

import GoogleMobileAds //Import the SDK

class TimesTableViewController: UIViewController {

var bannerView: GADBannerView = GADBannerView(adSize: GADAdSizeBanner) //Create the banner

//class continues from here

Then we’ll write a function to set it up. I used programmatic constraints with autolayout here but you can do anything you want to position it:

func setupBanner() {
    view.addSubview(bannerView) // Add to the view
    bannerView.translatesAutoresizingMaskIntoConstraints = false //Turn on autolayout
    bannerView.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor).isActive = true // X: same as view center
    bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true // Y: attach bottom to view bottom
    bannerView.adUnitID = "ca-app-pub-3940256099942544/6300978111" //Google test banner ad unit ID
    bannerView.rootViewController = self //Google says do this so we do it
    bannerView.load(GADRequest()) //load an ad
}

Make sure to call this function from viewDidLoad:

override func viewDidLoad() {
    super.viewDidLoad()
    setupBanner()
    //There's more stuff here in the actual app, but you get the idea.
}

Try it out!

Our banner is looking great!

The Times Tables App running in the iOS simulator

Leave a Reply

Your email address will not be published.