Honmushi blog
Expoを使ったAdmobの実装2019/11/28

Expoを使ったAdmobの実装

React Nativeで作るスマホアプリにAdmobを実装する方法の紹介です。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();
  }

表示のサンプル

こんな感じで表示されます。右上の「残り○秒」が減っていき、0になると閉じることができます。
あらかじめイベントリスナーにて各種イベント時の処理を定義しておく必要があるので少しややこしいですが、アプリらしい報酬などを設定できるので使いこなせると便利です。

リワード広告のサンプル

おわりに

広告もexpoを利用することで簡単に実装できます。
各広告のモジュールにはさまざまなタイミングでイベントが用意されていますので、そのタイミングで処理を実行することもできます。サイズなどの設定も用意されていますのでドキュメントを読んでみるといいです。

他にもexpoを用いることで簡単に実装できる機能が山ほど有りますので、少しずつ紹介していきたいと思います。

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