[iOS][Swift][App] 整合 Google AdMob 到 iOS App

Photo by Ketut Subiyanto

我在整合 Google AdMob 時卡了超久，Google 了也沒找到很直接能解決的方法，想說在此做個記錄，讓以後的我能照著做，也讓遇到類似問題的人能夠有個解法，以下是參考 官方說明 做的

第一動，Import the Mobile Ads SDK

先在 xocde project 的根目錄下（.xcodeproj 檔案的路徑）執行 pod init，這樣就能產生一個 Podfile 檔案，若沒安裝 cocopods 可以 follow 這裡 安裝，然後再按照 這裡 的做法，加

pod 'Google-Mobile-Ads-SDK'

在 Podfile 檔案，然後執行下面，記得此時要將 xcode 關閉

pod install --repo-update

這邊我遇到一個問題

[!] Unable to determine the platform for the `your project name` target.

解決方法是將 Podfile 檔案裡的第二行 uncomment 就可以了，完成後如下

platform :ios, '9.0'

第二動，Update your Info.plist

遇到的第一個問題是，我找不到 Info.plist 檔案

參考 這邊，原來 info.plist 變成了 project 設定裡的 tab

然後將 GADApplicationIdentifier (1個) 和 SKAdNetworkItems (49個) 輸入（如下圖紅框）

第三動，建立 banner structure 來呼叫顯示廣告

import GoogleMobileAds
struct BannerVC: UIViewControllerRepresentable {
    var bannerID: String
    var width: CGFloat

    func makeUIViewController(context: Context) -> UIViewController {
        let view = GADBannerView(adSize: GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(width))

        let viewController = UIViewController()
        view.adUnitID = bannerID
        
        view.rootViewController = viewController
        viewController.view.addSubview(view)

#if false
        /* Simulator */
        let request = GADRequest()
        let extras = GADExtras()
        extras.additionalParameters = ["suppress_test_label": "1"]
        request.register(extras)
        view.load(request)
#else
        /* Real device */
        view.load(GADRequest())
#endif
        
        return viewController
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

struct Banner: View {
    var bannerID: String
    var width: CGFloat

    var size: CGSize {
        return GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(width).size
    }

    var body: some View {
        BannerVC(bannerID: bannerID, width: width)
            .frame(width: size.width, height: size.height)
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
        Banner(bannerID: "ca-app-pub-3940256099942544/2934735716", width: UIScreen.main.bounds.width)
    }
} 

實作方式如上，這邊用的 bannerID 是測試使用的，請參考這邊，順利的話就可以看到下面的畫面

Simulator

若不想在 Simulator 上看到 "Test mode" 的字樣，將上面程式的 /* Simulator */ 上的 if false 改成 if true，就可將之移除如下圖，這功能在你上架 app 提供截圖時會用到

若是跑在實機上的話，上述的程式記得改成 if false，會看到如下畫面

Note

若想 build 在 Mac 上會遇到 No such module 'GoogleMobileAds' 的 error，這個問題我也想知道解答，歡迎提供給我，謝謝

環境

• Mac Mini M1
• Xcode Version 14.3 (14E222b)
• iPhone 12 Pro Max (16.6)

Reference

• COCOAPODS getting-start (link)
• Mobile Ads SDK (iOS) Get Started (link)