Adding Google Mobile Ads (Admob) to your SwiftUI app in iOS 14.5

A guide to adding v8 of the Google Mobile Ads SDK to your SwiftUI app and preparing it for iOS 14.5.

Patrick Haertel
Geek Culture

--

Introduction

As more apps are built with SwiftUI, I wanted to provide an easy way for integrating Admob right into your app. In this guide, you’ll learn exactly how everything works. If you’d rather just drag and drop the code right into your app, that works too! (https://github.com/patrickhaertel/SwiftUIMobileAds)

I had planned on releasing this as a Cocoapod as well so integrating it would be even easier, but I ran into some issues. If these are resolved, check the aforementioned GitHub link for installation instructions.

Check this out to see how well this integrates into SwiftUI:

Let’s get started

Setting up the Google Mobile Ads SDK

Preparing your app for Admob is no small step, but I’ll walk you through it. Be sure to reference Google’s official documentation here, as well.

Create a new app in your Admob dashboard. Save your App Identifier as you’ll need it shortly.

Import the SDK using Cocoapods

pod 'Google-Mobile-Ads-SDK'

Update your info.plist file as specified here. You need to provide the SKAdNetworkItems so that you can still show relevant ads to your users even if they don’t opt into app tracking in iOS 14.5. In addition to those keys, you also need to set your App Transport Security settings, as shown below.

<key>NSAppTransportSecurity</key> 
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSAllowsArbitraryLoadsForMedia</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
</dict>

With that out of the way, we can finally start coding. The first thing you need to do is initialize the Google Mobile Ads SDK. Because we are building for SwiftUI, I will be using the SwiftUI Lifecycle. You could do this in ApplicationDidFinishLaunchWithOptions if you prefer the App Delegate.

Awesome! The SDK is now initialized. All we have left is to make the views.

Banner Ad (Adaptive)

We can get started by creating a UIViewController for the BannerAd.

To use your newly created UIViewController in SwiftUI you need to create a UIViewControllerRepresentable.

Now your Banner Ad is a SwiftUI view, but we still need to set some things up so you can add it to your app. Let’s create a new SwiftUI View called SwiftUIBannerAd. This view will manage the position and frame of your Ad.

And that's it! You can add your ad to your app. I recommend that you do this by placing it at the highest level of a ZStack. (Refer back to the example at the beginning)

When testing your ad, be sure to set the adUnitId to the banner test ad unit id:

ca-app-pub-3940256099942544/2934735716

You may have noticed that I use NotificationCenter and UIApplication to get the safe area as well as the orientation. While you could use a GeometryReader to do this, I would not recommend it for a production app. In testing my own SwiftUI app, WidgeTube, I have found that GeometryReader is simply unreliable for production. Too often, it is the root of crashes in SwiftUI’s Attribute Graph. While some people have found ways to avoid this, by experimenting with the order of the view stack, I decided it is best to altogether avoid using GeometryReader.

Interstitial Ad

First, we need to create an InterstitialAdObject. This object will handle the loading of the Interstitial Ads within your app.

We will now use this object to create an InterstitialAdView. This view will be a UIViewControllerRepresentable as well as a GADFullScreenContentDelegate.

In a minute, we will create the Full Screen Modifier to present this view. For now, we’ll leave what we have and create the rewarded ad (If you aren’t creating a rewarded ad skip to Full Screen Modifier).

When testing, use the interstitial test ad unit id:

ca-app-pub-3940256099942544/4411468910

Rewarded Ad

Creating the rewarded ad is almost identical to the interstitial ad. The only difference is that for the rewarded ad we need to create a function that will be run when the reward is granted.

Just like the Interstitial Ad, we need to create a RewardedAdObject to handle the loading of the ads.

And now, we will use this object to create the RewardedAdView.

Now that we have our views, we need an easy way to present them in our application. For this, we will create a custom modifier similar to the .sheet() modifier.

When testing, use the rewarded test ad unit id:

ca-app-pub-3940256099942544/1712485313

Full Screen Modifier

Let's get started by creating our view that will be created by the modifier.

Now, the last thing we need to do is add the modifier itself.

congrats emoji

Congrats, that's it! Now, you can easily integrate Admob/Google Mobile Ads into your SwiftUI app as shown below.

Credits

Inspired by this article from Michael Barney Jr.

I learned how to do this while creating my app, WidgeTube.

--

--