【iOS】アプリにAdMobを導入してみる

# はじめに

個人開発しているアプリに広告を表示したく調べてやってみた内容をまとめました。
今回はAdMobを使ってみました。

> Google AdMob はアプリの収益化にご利用いただけるモバイル広告プラットフォームです。

利用する上での条件はこちら
> Xcode 13.2.1 以降を使用していること
iOS 10.0 以降をターゲットとしていること
推奨: AdMob アカウントを作成して、アプリを登録します。

公式ドキュメントを参考にやっていきます。

https://developers.google.com/admob/ios/quick-start?hl=ja

# 環境
Xcode 14.1

# 内容
### AdMob アカウントを作成する
https://support.google.com/admob/answer/7356219?hl=ja&visit_id=637511357698277783-4004852503&rd=1#step1

- ステップ 1: AdMob アカウントを作成する
- ステップ 2: Google アカウントを確認する
- ステップ 3: お支払い情報を入力する

支払い情報はお支払いタブから入力できます
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/0d8e19a1-c9dc-d3f7-1d05-16e21a046637.png">

### アプリを登録する
すべてのアプリ画面から今回はiOSを選択して進めていく

<img width="250" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/5a01fc40-dfc9-b00c-fc33-89e007fb5866.png"><img width="250" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/a2bca0fe-2fb9-9e39-7712-4d89a4965c5e.png">

AppStore公開済みのアプリなので検索したら表示されました

<img width="250" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/d6fb82f5-edd8-348f-c710-7b8457ec3732.png"><img width="250" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/e5d92f87-50e2-f2d0-ff01-c3940158e8ad.png">

<details><summary>審査提出後のステップ</summary>

https://support.google.com/admob/answer/9363762?hl=ja

- app-ads.txt を設定
    - ステップ 1: デベロッパー サイトを開設する
    - ステップ 2: app-ads.txt ファイルを作成する
    - ステップ 3: デベロッパー サイトで app-ads.txt ファイルを公開する
    - ステップ 4: AdMob による app-ads.txt ファイルのクロールと検証が終わるのを待つ
    - ステップ 5: app-ads.txt ファイルが AdMob アカウントで検証済みであることを確認する

この作業は必須ではなさそうですが、リリース後対応した方が良さそうですね

https://sunny10side.com/admob-app-ads-txt/

</details>

### Mobile Ads SDK をインポートする

CocoaPodsを使って`pod install --repo-update`でインポートしていきます

```ruby: Podfile
pod 'Google-Mobile-Ads-SDK'
```

エラーが出る場合はターミナルを`Rosettaを使用して開く`(Finderのターミナルを右クリックから`情報を見る`で変更)にチェックを入れて再度インポートしてみるといけるかもしれません

Swift Package Managerを使う場合は

https://developers.google.com/admob/ios/quick-start?hl=ja#spm

### Info.plistに追加する

`SKAdNetworkIdentifier`には対象のものを追加する

https://developers.google.com/admob/ios/3p-skadnetworks?hl=ja


```xml
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
</array>
```

> キーポイント: 実際のアプリでは、上記の ID ではなく実際のAdMob アプリ ID を使用することが重要です。ただし、Hello World アプリで SDK を試すだけであれば、上記のサンプルのアプリ ID を使用できます。

`ca-app-pub-3940256099942544~1458002511` この値を開発用で使う
リリース用の　`GADApplicationIdentifier`はアプリ設定画面から確認して入れておく

<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/16da6e6d-2ea6-7bba-5670-24720604ce83.png">

リリースと開発で値を変えるには
`User-Defined`で設定値を定義してInfo.plistに`$(ADMOB_APP_ID)`を追加する

<img width="600" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/8569d84f-8c49-42ef-782a-952144299ead.png"><img width="600" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/6a8a6a7d-6a10-a26c-2f7b-34e394a81594.png">

```xml: Info.plist
<key>GADApplicationIdentifier</key>
<string>$(ADMOB_APP_ID)</string>
```

さらに`Debug`と`Release`以外に設定を追加したい場合は
以前こちらの記事を書きました👇

https://qiita.com/yoshitaka/items/737a0b96786adfc92845

### Mobile Ads SDK を初期化する

```diff_swift
+ import GoogleMobileAds

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(_ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

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

    return true
  }
}
```

> :::note alert
> 警告
startWithCompletionHandler: の呼び出し時に、Mobile Ads SDK またはメディエーション パートナーの SDK によって広告のプリロードが行われる場合があります。欧州経済領域（EEA）内のユーザーから同意を得る必要がある場合は、リクエスト固有のフラグ（tagForChildDirectedTreatment や tag_for_under_age_of_consent など）を設定するか、広告が読み込まれる前になんらかの対応策を取ったうえで、Mobile Ads SDK を初期化するようにしてください。
:::

とのことなので、リリース状況によって注意が必要です

### 広告フォーマットを選択する

[いくつか種類がありますが](https://developers.google.com/admob/ios/quick-start?hl=ja#select_an_ad_format)、今回はバナーを選択します。

> デバイス画面の上部か下部に表示される長方形の広告です。 ユーザーがアプリを操作している間は画面に残り、一定の時間が経過すると自動的に更新されます。モバイル広告を初めてお使いの場合は、この広告から始めるのが最適です。

### [バナーを実装する](https://developers.google.com/admob/ios/banner?hl=ja)

> アプリの開発とテストでは必ずテスト広告を使用し、配信中の実際の広告は使用しないでください。実際の広告でテストすると、アカウントが停止される場合があります。

[テスト広告ID](https://developers.google.com/admob/ios/test-ads?hl=ja) `ca-app-pub-3940256099942544/2934735716` を開発で使用

リリース用の広告IDを取得する

<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/fa6d3ba8-e18a-7b56-9313-d67ecfbe5ccc.png"><img width="250" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/f758d78e-40e8-26fa-ccd2-0f1739f3cde7.png">

設定はデフォルトのままにして完了。広告IDを取得する
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/c5d8bad0-ce1a-2e57-1464-a5da4fb1ddc5.png"><img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/c17db319-e1fe-2bf6-bd65-be9e3fe1f55d.png">

#### GADBannerView を作成

Storyboaedに`View`を追加して`GADBannerView`を指定

<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/7af5f1e4-b818-db68-f2a1-8160d71bc0b1.png">

対象のViewControllerに紐付けておく
```diff_swift: ViewController
+    import GoogleMobileAds

+    @IBOutlet weak var bannerView: GADBannerView!
```

#### GADBannerView プロパティを設定

> 注: 広告ユニット ID は AdMob 管理画面で作成され、広告が表示されるアプリ内の場所を表します。たとえば、2 つのビュー コントローラでバナー広告を表示する場合、それぞれにひとつずつ広告ユニットを作成できます。

```diff_swift
override func viewDidLoad() {
    super.viewDidLoad()
    ...

+   bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
+   bannerView.rootViewController = self
}
```

上記の実装でテスト表示はできるが
広告IDも開発用とリリース用で別々の値を取得する必要があるので
`GADApplicationIdentifier`と同じように`User-Defined`で定義

<img width="600" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/95400ee3-03dd-e64f-9c10-1ed673b131e8.png"><img width="600" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/b214c84a-33ee-9e3b-9014-b230504ef3ed.png">

```swift
Bundle.main.object(forInfoDictionaryKey: "AdMobSettingViewBannerAdUnitId") as? String
```
を`bannerView.adUnitID`に渡すようにする


#### 広告を読み込む

```diff_swift
override func viewDidLoad() {
    super.viewDidLoad()
    ...

    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.rootViewController = self
+   bannerView.load(GADRequest())
}
```

#### その他
[`GADBannerViewDelegate`を実装する](https://developers.google.com/admob/ios/banner?hl=ja#ad_events
)ことで広告表示のライフサイクルイベントで処理を追加することができる


##### 以上の実装で

無事テスト用の広告が表示されました👏
[サイズについてはこちらを参照](https://developers.google.com/admob/ios/banner?hl=ja#banner_sizes)したが、[アダプティブ バナー](https://developers.google.com/admob/ios/banner/adaptive?hl=ja)とすることで自動調整されるようです
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/1a96293d-c48b-93c2-e035-92ca8bde774f.png">

# さいごに
広告表示の実装は思っていたより簡単でした。
SwiftUIで実装したアプリに導入して、また気付きポイントあればまとめてみたいと思います。

# 参考

https://qiita.com/am10/items/008d1314c1e4df18ab75