Google developer公式動画にAdMobバナー広告の導入方法を説明されていますので、まずは参考としてイメージを掴みましょう。
iPhoneアプリに、Google AdMobを入れるための準備、設定は別の記事でまとめられたね。実際に準備が整ったから、SwiftUIを使ってAdMobのバナー広告を入れるための方法をまとめていきたいと思うよ。
困った時のGoogle先生！というように調べてみたけど、cocoapodを使ったり、Verが古い時のソースコードだったりしたから、完全にSwiftUIだけのコードで実装しようとした時にはかなり苦労したわね。
そうなんだよ。まだまだ、完全にSwiftUIだけのコードの説明ページがないから苦労するよね。
機能もどんどん進化するから、常に最新の方法を確認しないといけないから、しっかりとノウハウを残しておくようにしよう。
このページは、以下のVerで作っていますので、このVerより古いものは、基本的に除外したいね。一応完成したからみなさんに紹介します。
Xcode Version 13.0 beta 3 (13A5192i)以上
iOS 15以上
そうね。今回は、iPhoneアプリでバナー広告が表示されるまで頑張りましょう。
注意事項として、本物のIDを使うと、テストの時にクリックすることで、垢BANされてしまうみたいだから、必ず、テスト用のIDに設定してからクリック操作するようにしましょうね。
Xcode SwiftUIだけで、Google AdMobを表示させよう。
Google AdMobは、モバイルアプリ開発者がアプリ内広告を表示し、収益を上げるためのプラットフォームです。バナー広告は、AdMobの広告形式の一つであり、ユーザーがモバイルアプリ内で広告を見るための一般的な方法です。
AdMobのバナー広告を実装する手順は次の通りです：
- AdMobアカウントの作成: AdMobを使用するには、Googleアカウントが必要です。Google AdMobのウェブサイトにアクセスし、アカウントを作成します。
- アプリの設定: AdMobを使用するアプリをAdMobに登録します。これにはアプリの情報を提供する必要があります。
- AdMobの広告ユニットの作成: AdMobダッシュボードから、バナー広告ユニットを作成します。広告ユニットには広告のサイズ、タイプ、表示条件などを指定できます。
- AdMob SDKの導入: アプリにAdMob SDKを統合します。これにより、AdMobから広告を受信し、表示するための機能が提供されます。SDKはiOS（SwiftまたはObjective-C）アプリに統合できます。
- バナー広告の配置: アプリ内の特定の画面にバナー広告を配置します。これにはAdMobから提供されるコードをアプリに統合する必要があります。
- テスト: 広告が正しく表示されることを確認し、広告が正常に動作することを確認します。AdMobはテスト広告を提供しています。
- リリースと収益化: アプリをApp StoreまたはGoogle Playにリリースし、ユーザーが広告をクリックすることにより収益を得ることができます。
AdMobは、広告の種類や表示条件をカスタマイズできるため、開発者はアプリのデザインに合わせて広告を調整できます。また、AdMobは広告のパフォーマンスを追跡し、収益を最大化するための分析ツールも提供しています。
以下の記事で、Google AdMobの基本設定までできるようになりました。これから色々な箇所にバナー広告をアプリに表示できるようになる必要があります。
まず手始めに、バナー広告から導入し、基本的な画面表示の際に、広告が表示されるようにしましょう。
完成形は以下のイメージです。
バナー広告は、アプリケーションのページに３つのサイズのバナー広告のいずれかを貼り付けることになります。広告の内容はAdMobにて自動で選定されるため、好きな広告を表示することはできません。
Google AdMob 広告【SwiftUI iOS広告】
実装コンセプト1：アプリにバナー広告を常に表示させる。
世の中のアプリケーションでは、導入時に無料のアプリが多くあります。
確かに、アプリが無料であるのは魅力的です。１円も払わなくてもアプリを使えるのですから。
でも、アプリ開発者からすると、せっかく良いものを作ってもお金を払ってくれないというのは寂しいものです。
もちろん、課金が可能なアプリが作れることは重要ですが、その分ソースコードの追加が必要となり、かなりアプリ開発初心者からすると壁が高い状況になります。
そこで、まずは、無料でアプリを提供することを前提に、徐々に機能を追加することでプログラミングの技術を上げて課金の対応することを考えたいと思います。
前提として、無料版は広告表示が出る。ただし、課金してくれた人には広告を出さない。という方針にしたいと思います。
常にアプリの下側に広告が出るというのは、アプリを使う側としてもうっとうしいかもしれませんが、背に腹は変えられません。良いアプリを作るという代償でバナー広告から収入を得られるようにさせてもらう作戦をとりたいと思います。
実装コンセプト2：サブスクリプションの課金をしてくれた人には、広告を表示させないようにする。
常にバナー広告を出せる状態になった後、別の記事で記載した、課金（アイテム購入と、サブスクリプション）による機能を導入し、この課金をしてくれた人には、広告を出さないようにする仕組みを入れたいと思います。
Meet StoreKit 2【SwiftUI iOS 課金】
ではどのようにすれば良いのか？となりますが、ここはまだ領域として達していないので、まずは、AdMob広告を好きな場所に表示させられる様にして下さい。
Xcodeで、SwiftUIでバナー広告を導入する
それでは、AdMobのバナー広告をiPhoneアプリに組み込んで行きましょう。
AdMobのバナー広告の設定をテスト用IDに変更する。
AdMobバナー広告の実装を急ぐがあまり、本番の設定をしたままテストを実施すると、不正利用と判断され垢BANされてしまうと言われています。そのため、まずはテスト用の広告が表示されるよう設定しましょう。
デモ広告ユニットのIDを調べる
テストを有効にする最も簡単な方法は、Google が提供するデモ広告ユニットを使用することです。
これらの広告ユニットは AdMob アカウントと関連付けられていないため、クリックしてもアカウントで無効なトラフィックが発生する恐れがありません。
重要なポイント: テストで使用するテスト ID は、アプリを公開する前に必ずご自身の広告ユニット ID に置き換えてください。
各フォーマットのテスト クリエイティブを参照するデモ広告ユニットを次に示します。
| 広告フォーマット | デモ広告ユニット ID |
|---|---|
| アプリ起動 | ca-app-pub-3940256099942544/ |
| バナー | ca-app-pub-3940256099942544/ |
| インタースティシャル | ca-app-pub-3940256099942544/ |
| インタースティシャル動画 | ca-app-pub-3940256099942544/ |
| リワード | ca-app-pub-3940256099942544/ |
| リワード インタースティシャル | ca-app-pub-3940256099942544/ |
| ネイティブ アドバンス | ca-app-pub-3940256099942544/ |
| ネイティブ アドバンス動画 | ca-app-pub-3940256099942544/ |
ソースコードを書いてみましょう。
ようやくソースコードを書く段階にきました。
ここからは、試してはエラー、試してはエラー。
ググってみると色々な実装があって、どれを使えば良いかわからない。
こんなループに入ります。
ソースコードの条件導入の条件は、独立して、アプリのコードに個別に織り込むのではなく、１ファイルに独立してコード部を定義しておき、利用したいところだけ、Callすることで表示するという方法にします。
この様に実装しておく事で色々な画面で広告表示の指示を出すだけの簡単な実装にする事が出来ます。
前述した通り、課金をしてもらった時は表示させないという方針を取りたいので、共通関数化しておき、その中で、課金だったらバナーを表示しない、非課金であればバナーを表示するというロジックを組みたいと思うからです。
色々な画面の部分にバラバラと入れてしまうと、修正漏れをしてしまうということでなるべくシンプルな設計を心がけたいと思っています。
Google AdMobに関係するロジックのみを1つのファイルに書き出し、本流のロジックが書いてあるのは、関数をCallするだけ。
そのため、抜き出したファイルだけ見れば、Google AdMobのバナーに関するロジックだけがあるという実装をしています。
探していたのは、この実装方法でした！！
でも注意してください。
この動画は、iOS15の実装方法ではエラーが発生します。
Googleの仕様が変わっているため、あくまでも実装のイメージを使って欲しいと思います。
バナーのサイズ
標準のバナーサイズについては、以下の表をご覧ください。
AdSizeの定数は以下のGADAdSizeBannerを選んでみたいと思います。
| サイズ（単位はポイント、幅×高さ） | 説明 | 対応デバイス | AdSize の定数値 |
|---|---|---|---|
| 320×50 | バナー | スマートフォン、タブレット | GADAdSizeBanner |
| 320×100 | バナー（大） | スマートフォン、タブレット | GADAdSizeLargeBanner |
| 300×250 | IAB レクタングル（中） | スマートフォン、タブレット | GADAdSizeMediumRectangle |
| 468×60 | IAB フルサイズ バナー | タブレット | GADAdSizeFullBanner |
| 728×90 | IAB ビッグバナー | タブレット | GADAdSizeLeaderboard |
| 指定された幅 × 最適な高さ | アダプティブ バナー | スマートフォン、タブレット | なし |
Cannot find ‘kGADAdSizeBanner’ in scopeのエラー解決方法
iOS15でのSwiftUIで実装サンプルを探しました。
Cannot find ‘kGADAdSizeBanner’ in scopeというエラーが出て、スペルも合っている状態でした。
なぜ他の人が成功しているサンプルコードをそのまま写したにもかかわらずエラーのCannot find ‘kGADAdSizeBanner’ in scopeが出てしまったのでしょうか？
答えは、GoogleのAdSizeの仕様が変わっており、kGADAdSizeBannerという変数が使えなくなり、GADAdSizeBannerという変数名に変わっているということでした。
ということで、なんとかバナー広告は完成しました。
次の広告にチャレンジしてみたいと思います。
Useful Resources: The Android test ads guide →
The iOS test ads guide →
The Unity test ads guide →
The Mobile Ads SDK support forum →
Watch more episodes of Mobile Ads Garage here →
【SwiftUI】Extra argument in call エラーの対処法
バナー広告を表示する際、Spacer()を入れて行間を取ろうと考えました。
バナー、バナー大、レクタングルの3つのサイズを、1つの関数をCallするだけで呼び出せるようになったので、あとは表示の工夫が課題になりました。
原因は、Spacer()が多すぎて、表示の問題になっていることが分かりましたので、Spacer()の数を減らして3つともに表示できることが確認できました。
以下のように、テスト広告として黒い箱（Test Mode）が表示されている状況でテスト・動作評価してくださいね。
さて、どうやって、スペース作ろうかなぁ。。。
コメント