ReactNative+ExpoのAndroidアプリにAdMobの広告を貼る方法

はじめに

前回ReactNativeとExpoフレームワークを使ってAndroidアプリをGooglePlayに公開する方法をまとめました。今回はアプリの中に広告を設置して収益化する方法を備忘録としてまとめようと思います。

ドキュメントの量が多かったのと一番簡単そうだったという理由から、アプリに設置する広告はAdMobにしたいと思います。アプリの審査が通っていない場合でも広告のテストは可能です。

AdMob広告作成

アプリ作成

まずはここからGoogle AdMobに「申し込み」を行いログインして下さい。

ログイン出来たら「アプリを追加」します。「プラットフォーム」を「Android」に、「アプリストアに登録されていますか？」を「いいえ」にします。既にGooglePlayで公開済みの方は「はい」として下さい。

「アプリ名」は分かりやすい名前を入力します。「アプリを追加」を押下すると今回適用する広告のアプリが追加される筈です。

広告ユニット作成

「広告ユニットを追加」から新しく広告を追加・設定していきます。今回は「バナーフォーマット」を選択してみます。任意の「広告ユニット名」を入力して残りの項目は基本推奨されている設定で問題無いかと思います。

無事広告ユニットが作成出来ると「広告ユニットID」が発行されます。また「アプリの設定」から「アプリID」を確認出来ます。これらは後で使用するので控えておきましょう。

AndroidアプリにAdMobを組み込む

AdMobとの連携はExpoのライブラリを使用すると簡単です。

$ expo install expo-ads-admob

app.jsonを編集します。

{
  "expo": {
    "android": {
      "config": {
        "googleMobileAdsAppId": "[アプリID]"
      }
    },
  }
}

App.tsxを編集します。お好きな所に広告を設置して下さい。

この時注意して欲しいのですが広告を作ってからしばらく時間が経過していない場合は上手く広告が配信されない可能性があります。したがって下記で入力する「広告ユニットID」は自動生成されているであろうテスト用のIDを入力するとエミュレータでもレイアウトの確認などが行なえます。

import { Platform } from 'react-native';

export default function App() {
  return (
    <View>
      <AdMobBanner
        adUnitID={
          Platform.select({
            android:"[広告ユニットID]", // Platformを使うとiOSの広告を貼る時に共通化出来る。
          })
        }
      />
    </View>
  );
}

AndroidManifest.xmlを編集します。

<manifest package="expo.core">
  <application>
      <meta-data
          android:name="com.google.android.gms.ads.APPLICATION_ID"
          android:value="[アプリID]"/>
  </application>
</manifest>

GooglePlay設定

最後にGooglePlayの方でも広告配信を行うアプリであるという項目にチェックを入れておきましょう。

以上です。

コメントを残す