AdMob

はじめに 先日、初めてReact Nativeを触ってみたというポスト をしました。 まずはAndroidアプリを公開したいと考えており、組織アカウントとして登録するためにDUNS Numberの取得申請中でございます。 （東京商工リサーチで申請し、7営業日程たちますが、まだ音沙汰なしです。。） スマホアプリで収益を得たいと考えていますが、まずは一番ハードルが低そうな広告収入を目指していきます。 今回は、Expoで作ったAndroidアプリに、react-native-google-mobile-adsライブラリを使ってAdMobを設置する手順をご紹介します。 1. AdMobの設定手順 Google AdMobのアカウント作成とアプリ登録 AdMob（https://admob.google.com/ ）にアクセスし、ユーザー登録します。 その後、アプリを追加します。 プラットフォームは「Android」を選択、まだストアにアプリを公開していないので、「いいえ」を選択。 アプリの名前を入力し、「アプリを追加」をクリック。 アプリの作成が完了しました。「完了」をクリック。 広告ユニットの作成 次は、広告ユニットを作成します。「広告ユニットを追加」をクリック。 広告のフォーマットがいくつかあります。起動時に全面表示するものだったり、全部見たら報酬を得られる系のものだったり。今回は、単純に画面の一部に広告が表示されればよいため、「バナー」を選択。 広告ユニット名には、自分で識別できるように適当に名前を付けて、「広告ユニットの作成」をクリック。 広告ユニットの作成が完了したら、アプリIDと広告ユニットIDが表示されるので、コピーしておきます。 （こちらの画像の広告ユニットIDは、すでに無効となっています） 2. Expoアプリへの実装 ライブラリのインストール react-native-google-mobile-adsをインストールします。最新バージョン（v15）をインストールしたところ後続手順でビルドエラーが発生したため、v14でインストールするようにしました。 npx expo install [email protected] app.jsonの設定 react-native-google-mobile-adsをインストールすると、app.jsonに"react-native-google-mobile-ads"の記載が追加されていると思います。 その部分を、以下のように修正します。 [ "react-native-google-mobile-ads", { "android_app_id": "ca-app-pub-6970209880901801~7980726474" // アプリIDを設定します } ] 開発ビルドの作成 広告を使用するには、Expo Goのみでは対応できないので、開発ビルドを行う必要があります。 npx eas-cli build --profile development ビルドが完了したら、表示されているQRコードをスマホで読み取ってリンクに飛び、Installボタンを押してダウンロードおよびインストールを行います。 その後、npx expo startで開発サーバーを起動した上で、アプリを起動しておきます。 広告コンポーネントの実装 実際に、アプリに広告を配置してみます。 アプリの初回起動時に、SDKの初期化を行う必要があるようです。 とりあえずホーム画面においてuseEffectで初回時のみ初期化するようにしてみました。 もしかしたらもっといいやり方があるかもしれません。 参考までに。 ...