Expoを使ったAdmobの実装

Expo

React Native

React Nativeで作るスマホアプリにAdmobを実装する方法の紹介です。

Admobはアプリにバナーなどの広告を掲載して収益化するための仕組みでGoogleが提供しています。ブログなどで利用するAdsenseのアプリ版と考えたほうが早いかと思います。

Expoを利用することで簡単に実装ができます。
他にもライブラリ等は有りますが、expo-ads-admobを利用するとても実装が簡単なのでおすすめです。

以下実装の紹介です。

expo-ads-admob

ドキュメント

モジュールのインストール

npm にてインストールを行います。expoのSDKを利用しているのであれば「expo」コマンドでインストールすることでSDKのバージョンに適したものがインストールされます。

expo install expo-ads-admob

app.jsonに設定を追加

admobで作成したアプリの「アプリ ID」をapp.jsonに追加する必要があります。 Admobの管理画面にて、アプリの追加とユニットの作成を行っておきましょう。

AndroidとiOSの設定部分にそれぞれ追加します。

  "android": {
    // ...
    "config": {
      // ...
      "googleMobileAdsAppId": "ca-app-pub-3940256099942544~3347511713" // sample id, replace with your own
    }
  },

  "ios": {
    // ...
    "config": {
      // ...
      "googleMobileAdsAppId": "ca-app-pub-3940256099942544~1458002511" // sample id, replace with your own
    }
  },

実装.1 バナー広告

バナー広告の実装例は以下です。 expoによる開発中はデベロップメントモードになることを利用して、開発中はテスト用の広告IDが利用されるようにしています。

その上でreact-nativeのPlatformを利用して、OSによる広告ユニットIDの出し分けを実装しています。それぞれの広告ユニットIDの部分は自分で用意したAdmob広告のユニットIDを設定します。

import React from 'react';
import { Platform,View } from 'react-native';
import { AdMobBanner } from 'expo-ads-admob';

class BannerAd extends React.Component {
  bannerError() {
    console.log("Ad Fail error")
  }

  render(){
    return (
      <View >
        <AdMobBanner
          adUnitID={
            __DEV__ ? "ca-app-pub-3940256099942544/6300978111" // テスト広告
            : Platform.select({
              ios: "広告ユニットID" , // iOS
              android:"広告ユニットID" , // android 
            })
          }
          onDidFailToReceiveAdWithError={this.bannerError} 
        />
      </View>
    )
  }
}

export default {BannerAd}

表示のサンプル

こんな感じで表示されます。画面の下や上に固定しておくのがよく見る配置ですかね。
隣接するViewにflex:1のスタイルを設定しておくとその要素が膨らむので、広告のコンポーネントが下端によることになります。

実装.2 インタースティシャル広告

画面全体に表示される動画などの広告です。広告が終わったら閉じるボタンを押して、アプリに戻ることのできる広告です。

広告リクエストと表示を連続でやっていますが分けておいてあらかじめ用意しておくのが良いです。画面表示の際にリクエストをしておいてボタンを押したら関数を実行して広告を表示する。という形が良いパターンかと思います。

Interstitial広告はpromiseを返すので、表示に失敗したときのために.then().catch()にて例外を受け取れるようにするか、async・awaitを使って実装するかがおすすめです。

何回か使ってみると簡単にコツがつかめます。

import React from 'react';
import { Platform,View } from 'react-native';
import { AdMobInterstitial} from 'expo-ads-admob';

async function Interstitial () {
  if(__DEV__){
    AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // テスト広告
  }else{
    if(Platform.OS === 'ios'){
      AdMobInterstitial.setAdUnitID('広告ユニットID'); //iOS
    }else{
      AdMobInterstitial.setAdUnitID('広告ユニットID'); //android
    }
  }
  await AdMobInterstitial.requestAdAsync();
  await AdMobInterstitial.showAdAsync();
}

export default {Interstitial};

表示のサンプル

こんな感じで表示されます。
画面いっぱいに表示されます。閉じることで元の画面に戻ることができ、promiseを返すので表示後の処理などを指定することもできます。

実装.3 リワード広告

ちょっとだけややこしくなります。広告を見終わったことを検出するためにイベントが用意されています。イベントリスナーを追加して処理を設定しておきます。

画面表示の際に、視聴後に実行する処理をイベントリスナーに設定しておいて、ボタンを押したときに動画広告を表示するイメージです。視聴完了のタイミングはrewardedのイベントで定義されています。他にも広告を閉じたときなど他のイベントも定義されていますので確認しておくと色んな使い方ができます。

import { AdMobRewarded } from 'expo-ads-admob';

class HomeScreen extends React.Component {

  Reward = async () => {
    if (__DEV__) {
      AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id
    } else {
      if (Platform.OS === 'ios') {
        AdMobRewarded.setAdUnitID('広告ユニットID'); // iOS
      } else {
        AdMobRewarded.setAdUnitID('広告ユニットID'); // android
      }
    }
    await AdMobRewarded.requestAdAsync();
    await AdMobRewarded.showAdAsync();
  };
  
  buttonPress = () => {
    this.Reward() 
  }

  componentDidMount = () => {
    AdMobRewarded.addEventListener('rewarded', () => {
      // 広告最後までみた人が実行できる処理
    });
  };
  componentWillUnmount() {
    AdMobRewarded.removeAllListeners();
  }