[iPhone] アプリにAdMob広告を貼る(Firebase)

iOSでもGoogleのAdMobは選択肢の1つです。更にGoogleではFirebaseを使って詳細な解析ができるサービスを提供しています。
 

 

Swift 4.1
Xcode 9.4.1

 

AdMob Firebase

 
今までAdMobはSDKを入れて設定するだけでしたが、Googleはより詳細な解析ができるFirebase版を提供しています。
ただ元々のSDKによるAdMobもまだ使えます。
 

 

Firebase を iOS プロジェクトに追加する

 
Firebase を iOS プロジェクトに追加する こちらに従ってすすめます。
 
事前準備:

  • Xcode 8.0 以降、Swift3.0以降のアプリの開発を開始してバンドル識別子を決める
    • バンドル識別子とは「Bundle Identifier」あるいはBundle IDです。例えばこのようなもの:com.example.TestAdMobBannerFireBase
    • Bundle IDの設定は iOS App IDs を登録するを参考に

アプリに Firebase を追加する:

    • Firebaseへの登録が必要で、そこでBundle IDを使います。最終的にはFirebase 構成ファイル GoogleService-Info.plist を取得します。

Firebase プロジェクトを作成:
Firebase Console に入ります。(以下フォームかよく変更されるのであくまでも例です)
プロジェクトを作成します。あるいは既にあればそのプロジェクトを選択
 
firebase_b01
 
新規プロジェクトをクリックしてプロジェクトの作成を始めます。これ以降はプロジェクトにアプリを追加していきます。またAndroidのプロジェクトも作成できるので、わかりやすい名前にするといいでしょう。
 
プロジェクト名とその他を入力し
記載された内容に同意してチェックを入れる
 
firebase_b02
 
プロジェクトを用意できました。プロジェクトに iOS アプリを追加します。
 

 
iOS バンドル名に先に作成したprojectの「Bundle ID」を設定します。
App Store IDは分からない場合は省略
 
firebase_b04
 
「GoogleService-Info.plistをダウンロード」をクリックして、ファイルをプロジェクトに追加します。
注)Xcodeで「Add Files to ‘TestAdMob’」のようにプロジェクト内に追加します。コピペするだけでは後でエラーになります。
 
firebase_b05
 
後で設定しますので、これ以降は説明だけ読んで流れを理解しておくだけで大丈夫です。
 
firebase_b06
 
XcodeのAppDelegateにFIRApp.configure() の初期化コードを追加しないといけないようです。
 
firebase_b07
 
Firebaseの設定は終了ですが、以下の画面になった場合はアプリができていないのであればスキップします。
 
firebase_b08
 
これで終了ですが後でアプリを追加するときは「別のアプリを追加」から新しく作成できます。
 
firebase_b09

 

SDKを追加する

 
CocoaPod:
設定を行います。まずcocapodsのインストールができるかの確認です。Macの「アプリケーション」「ユーティリティ」にあるターミナルを起動でプロジェクトのレベルに入って以下のコマンドを入力します。

これが例えば以下のように Successfully installed… と通れば問題ないです。pod installに進んでください。
 

 
Passwordは使っているMacのパスワードです。
 
このようなエラーとなった場合、Linuxの知識が多少必要になり解決が難しくなりますがとりあえず、

これを試してみてください

それでも解決しない場合は、こちらで設定をしてください。
CocoaPods を導入、rubyを設定をする
 
 
pod install:
ここはからは、Firebaseに登録での説明の内容になります。
ターミナルでprojectの .xcodeproj があるレベルに入ります。

podをinitするとPodfileが作成されます。Finderでプロジェクトを見てください。
 

 
このファイルをエディターで開いて以下のように記述しなおします。
‘ TestAdMob’ の部分はproject名に合わせてください。
 

 
これで「pod install」します。成功するとこのようになります。
 

 
[!]にあるように、Xcodeを全て閉じこのプロジェクトは今後「.xcworkspace」から起動させないとハマります!
 
firebase_b10
 
pod install が以下のエラーで終わった場合は、

 
以下を試してみてください
 

 
それでもダメならこれです(多少時間がかかります)

 

アプリでFirebaseを初期化する

 
Firebaseで初期化が必要だと言っていた箇所です。AppDelegateに追加します。

 
モジュールをインポートします。

 
アプリIDをここで設定します。
“ca-app-pub-3940256099942544~1458002511” はテスト用のアプリIDです。
テスト用の広告ユニットIDとは異なります(とても似ていますが〜と/の違いが目印です)

AppDelegate.swift

 

XcodeでFirebaseを設定する

 
ViewController.swiftに広告を表示させる設定を記述します。
 
GoogleMobileAdsをインポート

 
バナー広告の高さは
admobView.frame.height
から取得できるので、例えば画面の一番下に置くように設定して見ます。
 
iPhone X が登場してから「safe area」を意識しないといけなくなりました。そのため上44pix, 下34pixの調整が必要になるかもしれません。(これはバナー広告にとって悪夢ですが)
 
ViewController.swift

 
広告ユニットID & アプリID
FirebaseではAdMobのIDが2つ必要です。
以前のSDKを使ったものは、この広告ユニットIDだけでした。
 
AdMobにはアプリが登録済みという前提ですからこの段階ではまだ見られないかもしれません。
 
ホームから「アプリ」「すべてのアプリを表示」からAdMobに登録してIDを発行している一覧が出てきます。
 
firebase_b11
 
この中のアプリリストにアプリIDが表示されていて、「有効なアイテム…」というところをクリックすると広告ユニットIDがあります。
 
firebase_b12
 
とりあえず、テスト用のIDを使ってビルドするとことができます。本チャンの広告は表示に時間がかかります。
 
firebase_b13

 

Trouble shoot

 
NSCalendarsUsageDescription:
NSBluetoothPeripheralUsageDescription:

iTunes Connectへアップロードしてほっとした後にメールが届きました。

The app’s Info.plist must contain an NSCalendarsUsageDescription key with a string value explaining to the user how the app uses this data.

しかし、Googleの Release Note によれば

Apps no longer need to provide text for NSCalendarsUsageDescription and NSBluetoothPeripheralUsageDescription when updating apps for iOS 10.

ということでとっくの昔に解決しているはずなのに…

とりあえず、NSCalendarsUsageDescription他をInfo.plistにこんな感じで設定しましょう。

 

AdMobに申込む

 
初めての場合は AdMob – Google.co.jp にアクセスして「申し込む」をクリック
(以下内容は古いものですので公式の説明に沿ってやってください)
 
スクリーンショット 2016-01-26 18.38.02
 

アカウントの開設をします
 
AdMobのお申し込みこちらからもできます
 
アカウントが開設できたら、新しく広告IDを発行です
(表示画面は微妙に変化しますので注意してください)
 

 
アプリを選択
まだ公開していないのであれば手入力
 
広告フォーマットの選択
バナー/インターステーシャルなど、背景色の選択など
広告ユニットは後で自分がわかるように名前をつけます
 

 
Firebaseにリンクさせます。
 
screen-shot-2016-09-29-at-18-51-34
 
広告ユニットIDが発行されます
IDの形式は
ca-app-<publisherId>/<slotname>
のようになります
 
admob_b4
 
一旦作成したアプリを後からFirebaseにリンクすることもできます。
 
admob_firebase_reg_2
 

関連ページ:

誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:




ページのトップへ戻る

シェアする

  • このエントリーをはてなブックマークに追加

フォローする