Firebase Admob

2019-05-23

react-native-firebaseライブラリを使ってグーグルアドモブ(Google Admob)を表示してみましょう。

概要

私たちはグーグルアドモブ(Google Admob)を使ってアプリへ広告を表示しています。以前にはreact-native-admobというライブラリを使いましたが、グーグルアドモブ(Google Admob)以外にもアナリティクス(Analytics)など、色んな機能を使うことのになって、統合的に使えるライブラリを探した結果react-native-firebaseというライブラリを見つけました。

ここにはグーグルファイアベース(Google Firebase)を使って無料でグーグルアドモブ(Google Admob), アナリティクス(Analytics)を使う方法を紹介します。

簡単にグーグルアドモブ(Google Admob)だけ使いたい方は以前のブロググーグルアドモブ(Google Admob)を参考してください。

下記のリンクはreact-native-firebaseの公式ページです。詳しく内容は公式サイトを確認してください。

ライブラリインストール

下のコマンドを使ってreact-native-firebaseライブラリをインストールします。

npm install --save react-native-firebase

ライブラリリンク

下記のコマンドを使ってreact-native-firebaseライブラリをRN(react native)プロジェクトへ連携します。

react-native link react-native-firebase

firebaseプロジェクト生成

次はグーグルのファイアベース(Google Firebase)へプロジェクトを生成する必要があります。下のリンクを押してグーグルファイアベース(Google Firebase)へ移動します。

google firebase

右上にあるSIGN INボタンを押してログインします。

google firebase after login

ログインしたら右上にあるGO TO CONSOLEを押してグーグルファイアベースコンソル(Google Firebase Console)へ移動します。

google firebase console

グーグルファイアベースコンソル(Google Firebase Console)で+ Add projectを押してプロジェクトを追加します。

google firebase console add project

プロジェクト情報を追加した後Create projectボタンを押してプロジェクトを生成します。

グーグルアドモブ設定

グーグルアドモブ(Google Admob)へ広告を設定する必要があります。グーグルファイアベースコンソル(Google Firebase Console)のGrow > Admobを選択したら下記の画面が見えます。

google firebase console admob

画面の下へlinking your apps in AdMob.リンクを押してグーグルアドモブ(Google Admob)ページへ移動します。

グーグルアドモブ(Google Admob)へ広告を設定する方法はグーグルアドモブ(Google Admob)ブログを参考してください。

firebase iOS 設定

グーグルファイアベースコンソル(Google Firebase Console)でプロジェクトを選択したら下の画面が見えます。

google firebase console project

中央にあるiOSボタンを押してiOS設定画面へ移動します。

google firebase console project ios

開発したアプリのバンドルID(Bundle ID)を入力してRegister appボタンを押します。

GoogleService-Info.plist download

グーグルファイアベース(Google Firebase)が生成したGoogleService-Info.plistファイルをダウンロードしてinfo.plistと同じ位置へコピーします。GoogleService-Info.plistファイルの追加が終わったらNextボタンを押します。

add Firebase SDK

画面へ表示したようにグーグルファイアベースSDK(Google Firebase SDK)をRN(react native)プロジェクトへ追加します。

pod init

グーグルファイアベースSDK(Google Firebase SDK)をPodfileに追加します。

target 'blaboo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for blaboo
  pod 'Firebase/Core'
  pod 'Firebase/AdMob'

#  target 'blaboo-tvOS' do
#    inherit! :search_paths
#    # Pods for testing
#  end

  target 'blabooTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

グーグルファイアベースSDK(Google Firebase SDK)をインストールします。

pod install
# pod update

edit appdelegate.m for firebase

RN(react native)プロジェクトのAppDelete.mファイルを上のようにコードを追加します。

...
@import Firebase;
...

グーグルファイアベースSDK(Google Firebase SDK)をインポートします。

...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
...
[FIRApp configure];
...
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
...
[GADMobileAds configureWithApplicationID:@"ca-app-pub-7987914246691031~8295071692"];
return YES;
...

グーグルファイアベースSDK(Google Firebase SDK)を初期化します。その後グーグルアドモブ(Google Admob)のアプリID(App ID)を入力してグーグルアドモブ(Google Admob)を初期化します。グーグルアドモブのアプリID(App ID)を取得する方法は以前のブロググーグルアドモブ(Google Admob)を参考してください。

connect firebase to app

私たちはこの部分ではSkip this stepを押してスキップしました。

firebaseアンドロイド(Android)設定

グーグルファイアベースコンソル(Google Firebase Console)へ左上のProject Overviewを選択します。

Google Firebase Console Project Overview

上部へ+ Add app > アンドロイド(Android)アイコンを押してアンドロイドプロジェクト設定へ移動します。

Google Firebase Android app register

アンドロイドパッケージ名(Android Package Name)を入力してRegister appを押します。

RN(react native)でアンドロイドパッケージ名を修正したい方は下の項目を進んでください。

アンドロイドパッケージ名修正

  • RN(react native)プロジェクトフォルダでandroid/app/BUCKファイル修正

    ...
    android_build_config(
        ...
        package = "package_name",
    )
    ...
    android_resource(
        ...
        package = "package_name",
        ...
    )
    ...
    
  • RN(react native)プロジェクトフォルダでandroid/app/src/main/AndroindManifest.xmlファイル修正

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="package_name">
    ...
    
  • RN(react native)プロジェクトフォルダでandroid/app/src/main/java/com/ProjectName/MainActivity.javaファイル修正

    package package_name;
    ...
    
  • RN(react native)プロジェクトフォルダでandroid/app/src/main/java/com/ProjectName/MainApplication.javaファイル修正

    package package_name;
    ...
    
  • RN(react native)プロジェクトフォルダでandroid/app/src/bundle.gradleファイル修正

    ...
    defaultConfig {
        applicationId package_name
        ...
    }
    ...
    

    Google Firebase google-services.json setting

グーグルファイアベース(Google Firebase)が作ったgoogle-services.jsonファイルをRN(react native)プロジェクトのandroid/appフォルダへコピーします。その後、Nextボタンを押して次へ移動します。

Google Firebase setting on android

RN(react native)プロジェクトがあるフォルダでandroid/build.gradleを開いて下記のコードを追加します。

buildscript {
  repositories {
    google()
    jcenter()
  }
  dependencies {
    // Add this line
    classpath 'com.google.gms:google-services:4.0.1'
  }
}
...
allprojects {
  repositories {
    mavenLocal()
    google()
    jcenter()
    ...
  }
}

上記のようにrepositoriesgoogle()が入ってるかjcenter()のより上にあるか確認します。

RN(react native)プロジェクトがあるフォルダでandroid/app/build.gradleファイルを開いて下記のコードを追加します。

dependencies {
    implementation project(':react-native-firebase')
    ...
    implementation "com.google.android.gms:play-services-base:16.0.1"
    implementation 'com.google.firebase:firebase-core:16.0.4'
    implementation "com.google.firebase:firebase-ads:16.0.1"
}

そして同じファイルの一番下へ下記のコードを追加します。

...
apply plugin: 'com.google.gms.google-services'
com.google.gms.googleservices.GoogleServicesPlugin.config.disableVersionCheck = true

最後にandroid/app/src/main/java/com/[app name]/MainApplication.javaファイルへ下のソースを追加します。

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.admob.RNFirebaseAdMobPackage;
import io.invertase.firebase.analytics.RNFirebaseAnalyticsPackage;
import com.google.android.gms.ads.MobileAds;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    ...
    new RNFirebasePackage(),
    new RNFirebaseAdMobPackage(),
    new RNFirebaseAnalyticsPackage(),
    ...
  );
}

@Override
public void onCreate() {
  super.onCreate();
  MobileAds.initialize(this, "ca-app-pub-7987914246691031~9800293270");
  ...
}

上のソースでMobileAds.initialize(this, "ad app id");部分へグーグルアドモブ(Google Admob)で生成下アプリアイディ(App ID)を追加します。グーグルアドモブ(Google Admob)のアプリアイディ(App ID)を生成する方法は以前のブロググーグルアドモブ(Google Admob)を参考してください。

アンドロイドスタジオ(Android Studio)を開いてGradleを同期化するか聞いてくれたらSync nowを押して同期化します。

ソース追加

react-native-firebaseの設定は完了しました。今からRN(react native)のソースコードを修正してグーグルアドモブ(Google Admob)が上手く表示されるようにします。

下のソースはreact-native-firebaseを使ってbannerを表示する例です。

...
import firebase from 'react-native-firebase';
...

react-native-firebaseをローディングします。

バナー

下記のソースコードはreact-native-firebaseのアドモブ(Admob)を使って広告タイプ(Ad Unit)がバナー(Banner)である広告を表示するれいたい例題です。

import { Platform } from 'react-native';
...
render() {
    const Banner = firebase.admob.Banner;
    const AdRequest = firebase.admob.AdRequest;
    const request = new AdRequest();

    const unitId =
      Platform.OS === 'ios'
        ? 'ca-app-pub-7987914246691031/4248107679'
        : 'ca-app-pub-7987914246691031/5729668166';
    ...
    return (
        ...
        <Banner
          unitId={unitId}
          size={'SMART_BANNER'}
          request={request.build()}
          onAdLoaded={() => {
            console.log('Advert loaded');
          }}
        />
    );

上のようにソースコードを追加してRN(react native)プロジェクトを実行したらバナーが上手く表示されることを確認することができます。

割込み広告

下記のソースコードはreact-native-firebaseのアドモブ(Admob)を使って広告タイプ(AD Unit)が割込み広告(Interstitial)である広告を表示する方法です。

import { Platform } from 'react-native';
...
componentDidMount() {
  ...
  const unitId =
    Platform.OS === 'ios'
      ? 'ca-app-pub-7987914246691031/4248107679'
      : 'ca-app-pub-7987914246691031/5729668166';
  const advert = firebase.admob().interstitial(unitId);
  const AdRequest = firebase.admob.AdRequest;
  const request = new AdRequest();
  advert.loadAd(request.build());

  advert.on('onAdLoaded', () => {
    console.log('Advert ready to show.');
    advert.show();
  });
  ...
}
...

上のソースでわかると思いますが、react-native-firebaseのアドモブ(Admob)の割込み広告(Interstitial)を表示したい時、advert.show()を使って表示します。表示する前いつもadvert.isLoaded()を使って広告が準備できたか確認してください。

setTimeout(() => {
  if (advert.isLoaded()) {
    advert.show();
  } else {
    // Unable to show interstitial - not loaded yet.
  }
}, 1000);

エラー対応

react-native-firebaseでadmobを実装して問題があった内容をまとめます。

admob/error-code-no-fill

私もいよいよ出ました。突然アプリの広告が表示されなくて調査してみたらadmob/error-code-no-fillのエラーが出ました。

私は収入が4000円(8000円から入金可能)ぐらい時からadmob/error-code-no-fillのエラーが出ました。その時私はまだPaymentの情報を入力してない状態でした。入金先の情報を入力した後から広告はまた良く表示されました。グーグルが入金が出来ないかもだから広告を表示してなかったかもしれないです。

結論的に、admob/error-code-no-fillのエラーが出て広告が表示されない方中Payment情報を入力してない方は、入金情報を入れてみてください。

完了

RN(react native)プロジェクトへreact-native-firebaseライブラリを使ってグーグルアドモブ(Google Admob)を適用する方法をみてみました。これでreact-native-firebaseを設定したらアナリティクス(Analytics)は自動に設定されて分析することができます。

グーグルファイアベースコンソル(Google Firebase Console)のメニューでAnalytics > Dashboardを押してみたら、分析してることが確認できます。

react native firebase analytics

Buy me a coffeeBuy me a coffee
Posts