facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(setTestDeviceIDAsyncのfunctionは存在しないと出たとき)
 
(同じ利用者による、間の9版が非表示)
行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');
+
    AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
+
    await AdMobInterstitial.requestAdAsync();
+
    await AdMobInterstitial.showAdAsync();
+
  }
+
 
+
  showRewarded = async() => {
+
    await setTestDeviceIDAsync('EMULATOR');
+
    AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917') // Test ID, Replace with your-admob-unit-id
+
    await AdMobRewarded.requestAdAsync()
+
    await AdMobRewarded.showAdAsync()
+
  }
+
 
+
  render() {
+
    return (
+
      <View style={styles.container}>
+
        <Text>AdMob</Text>
+
        <Button
+
          title="Interstitial"
+
          onPress={this.showInterstitial}
+
          containerViewStyle={styles.interstitialBanner}
+
        />
+
        <Button
+
          title="RewardVideo"
+
          onPress={this.showRewarded}
+
          containerViewStyle={styles.rewardedBanner}
+
        />
+
        <AdMobBanner
+
          style={styles.bottomBanner}
+
          bannerSize="smartBannerLandscape"
+
          adUnitID="ca-app-pub-3940256099942544/6300978111"
+
          // Test ID, Replace with your-admob-unit-id
+
          setTestDeviceIDAsync="EMULATOR"
+
          didFailToReceiveAdWithError={this.bannerError}
+
        />
+
      </View>
+
    );
+
  }
+
}
+
const styles = StyleSheet.create({
+
  rewardedBanner: {
+
    width: "100%",
+
    marginLeft: 0
+
  },
+
  interstitialBanner: {
+
    width: "100%",
+
    marginLeft: 0
+
  },
+
  bottomBanner: {
+
    position: "absolute",
+
    bottom: 0
+
  },
+
  PublisherBanner: {
+
    position: "absolute",
+
    bottom: 80
+
  },
+
  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>
+
 
+
===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>
+
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