「Javascript/reactnative/admob/expo」の版間の差分

2020年7月16日 (木) 18:26時点における版

admob-expoの公式

https://docs.expo.io/versions/latest/sdk/admob/

admobプラグインのインストール

$ expo install expo-ads-admob

app.json にandroidとiosを追加

{
  "expo": {
    "name": "Ads Showcase",
    "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
      }
    }
  }
}

サンプル

バナー、インステ、リワード動画

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import {
  AdMobBanner,
  AdMobInterstitial,
  AdMobRewarded,
  setTestDeviceIDAsync,
} from 'expo-ads-admob';

export default class App extends React.Component {

  bannerError() {
    console.log("An error")
  }

  showInterstitial = async() => {
    await setTestDeviceIDAsync('EMULATOR');
    if (Platform.OS === 'ios') {
      AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/4411468910'); // iOS
    } else {
      AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Android
    }
    await AdMobInterstitial.requestAdAsync();
    await AdMobInterstitial.showAdAsync();
  }

  showRewarded = async() => {
    await setTestDeviceIDAsync('EMULATOR');
    if (Platform.OS === 'ios') {
      AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1712485313'); // iOS
    } else {
      AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Android
    }
    await AdMobRewarded.requestAdAsync()
    await AdMobRewarded.showAdAsync()
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>AdMob</Text>
        <Button
          title="Interstitial"
          onPress={this.showInterstitial}
          containerViewStyle={styles.interstitial}
        />
        <Button
          title="Rewarded"
          onPress={this.showRewarded}
          containerViewStyle={styles.rewarded}
        />
        <AdMobBanner
          style={styles.banner}
          bannerSize="smartBannerLandscape"
          adUnitID={
            Platform.select({
              ios: "ca-app-pub-3940256099942544/2934735716",
              android: "ca-app-pub-3940256099942544/6300978111",
            })
          }
          setTestDeviceIDAsync="EMULATOR"
          didFailToReceiveAdWithError={this.bannerError}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  rewarded: {
    width: "100%",
    marginLeft: 0
  },
  interstitial: {
    width: "100%",
    marginLeft: 0
  },
  banner: {
    position: "absolute",
    bottom: 0
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

バナーサイズ指定

banner	320x50
largeBanner	320x100
mediumRectangle	300x250
fullBanner	468x60
leaderboard	728x90
smartBannerPortrait	Screen width x 32
smartBannerLandscape	Screen width x 32

バナー位置

フッター

 banner: {
   position: "absolute",
   bottom: 0
 },

ヘッダー

 banner: {
   position: "absolute",
   top : 50
 },

top: 0にするとステータスバーにめり込んでしまう。

setTestDeviceIDAsyncのfunctionは存在しないと出たとき

以下エラーが出たとき

[Unhandled promise rejection: TypeError: _expoAdsAdmob.AdMobInterstitial.setTestDeviceIDAsync is not a function.

以下のように対応する

import {
  AdMobBanner,
  AdMobInterstitial,
  AdMobRewarded,
  setTestDeviceIDAsync,
} from 'expo-ads-admob';
await setTestDeviceIDAsync('EMULATOR');

setTestDeviceID は非推奨と出たとき

以下エラーが出たとき

AdMobInterstitial.setTestDeviceID is deprecated. Test device IDs are now set globally. Use AdMob.setTestDeviceIDAsync instead.

setTestDeviceIDは非推奨なので、setTestDeviceIDAsyncを使う

参考

https://honmushi.com/2019/11/28/expo-admob/