どのように反応ネイティブで広告を表示するには?

モバイル広告は常に収益化の最良の部分と見なされます💰 アプリのように我々は両方のiOSとAndroidの広告を表示できるようになる我々のアプリでGoogle Admobを統合することを決めた.
様々な記事をローミングした後、GoogleからAdMobの公式ドキュメントを読んで、そこに情報を散らばった.私は、すべてのものを1つの場所に持つこのブログを書くことに決めました.
我々は非常に簡単に以下の2ステップに従ってGoogle Admobを統合することができます.

ADMOBアカウント設定

コードレベル統合

ADMOBアカウント設定

まず、ADMOBアカウントを作成する必要がありますHere Google Admobサービスを使用して起動します.
したら、正常にその名前のプラットフォーム(IOSやAndroid)を使用してアプリケーションを作成する必要がADMOBでアカウントを作成している.

アプリケーションが作成されると、特定のアプリケーションにすべての広告をターゲットに使用される以下のようにappidを取得されます.

App ID : ca-app-pub-3940256099942544~1458002511

だから今、我々はADMOBで登録されているアプリのIDをいくつかの広告を作成しようとすると、バナー、格子間の広告を選択することができますし、報わ広告.我々は例としてここで簡単なバナー広告を使用されます.

ここで最後に、最も重要なステップはADMOBアカウントの設定で来る.
私たちは広告スロットを作成する必要があります、これらは我々の広告をターゲットにすることができます我々のIOSとAndroidアプリで使用するスロットです.

次のステップでコードレベルの統合のために今作成したADスロットを使用します.

Ad Unit Id : ca-app-pub-3940256099942544/6300978111

注意:広告は、あなたが支払い情報を完了すると、上記のAdスロットHere そして、新しいアカウントの場合には、広告を提供を開始するにはいくつかの時間がかかることがあります.

コードレベル統合

ライブラリをインストールする必要がありますreact-native-admob Google Admobを使用するための反応ネイティブアプリ.

npm i -S react-native-admob@next

それから実行

react-native link react-native-admob

IOSのアプリの箱の外には、我々が追加する必要があるアプリの広告を表示することはできませんGoogleMobileAds.framework .
我々のアプリに上記のフレームワークをインポートする最も簡単な方法cocoapodsされます.次の行をあなたのpodfileに加えてください.

pod 'Google-Mobile-Ads-SDK'

コマンドを実行する

pod install --repo-update

Googleモバイル広告フレームワークの詳細については、読むことができますHere .
さあ、追加しましょうappId and adUnitId 我々は、広告を表示するためのAndroidとIOSのコードでセットアップから得た.

IOS

ADMOBアプリケーションIDをinfoに追加する必要があります.plist

 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-3940256099942544~1458002511</string>

Android

AndroidManifestでAdmobアプリケーションIDを追加しました.XML

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~1458002511"/>

react-native-admob usage

の実装react-native-admob 非常に単純だった、私はちょうど' admobanner 'をインポートし、それにadスロットのIDを渡した.

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import {AdMobBanner} from 'react-native-admob';

const App = () => {
  const onFailToRecieveAd = (error) => console.log(error);

  return (
    <>
      <SafeAreaView>
        <AdMobBanner
          adSize="largeBanner"
          adUnitID="ca-app-pub-3940256099942544/6300978111"
          testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
          didFailToReceiveAdWithError={onFailToRecieveAd}
        />
      </SafeAreaView>
    </>
  );
};

export default App;

あなたのアプリの広告を見ている🍻
あなたがどんな問題に直面するならば、あなたはGithubHere