|
|
| 行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/
| + | |
