facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サンプル)
 
行1: 行1:
==admob-expoの公式==
+
[[Javascript/reactnative/admob/expo/基本]]
https://docs.expo.io/versions/latest/sdk/admob/
+
  
==admobプラグインのインストール==
+
[[Javascript/reactnative/admob/expo/mediation]]
$ expo install expo-ads-admob
+
 
+
app.json にandroidとiosを追加
+
<pre>
+
{
+
  "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
+
      }
+
    }
+
  }
+
}
+
</pre>
+
 
+
==サンプル==
+
バナー、インステ、リワード動画
+
 
+
テスト用のインステが動画じゃなかったが、本番では動画は出る?→謎
+
<pre>
+
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') {
+
      AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/1712485313'); // iOS
+
    } else {
+
      AdMobRewarded.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',
+
  },
+
});
+
</pre>
+
 
+
===バナーサイズ指定===
+
<pre>
+
banner 320x50
+
largeBanner 320x100
+
mediumRectangle 300x250
+
fullBanner 468x60
+
leaderboard 728x90
+
smartBannerPortrait Screen width x 32
+
smartBannerLandscape Screen width x 32
+
</pre>
+
 
+
==バナー位置==
+
フッター
+
  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.
+
以下のように対応する
+
<pre>
+
import {
+
  AdMobBanner,
+
  AdMobInterstitial,
+
  AdMobRewarded,
+
  setTestDeviceIDAsync,
+
} from 'expo-ads-admob';
+
await setTestDeviceIDAsync('EMULATOR');
+
</pre>
+
===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/
+

2020年7月17日 (金) 16:39時点における最新版

Javascript/reactnative/admob/expo/基本

Javascript/reactnative/admob/expo/mediation