React Native Firebase Admob.png

使用React Native应用程序中的AdMob集成赚钱

作者

使用React Native应用程序中的AdMob集成赚钱

React Native 应用程序中的 AdMob 集成

这是我们的第七篇文章 反应原生 Firebase 系列。 Firebase 模块提供了一种在 React Native 中集成 AdMobs 的简单方法。 在这个例子中我们将看到什么是AdMob？ 以及如何将 AdMob 集成到 React Native App 中？ 如何查看您的收入以及如何将其存入您的银行帐户？

推荐：如何使用Windows Movie Maker创建视频

Firebase AdMob

AdMob 模块允许您向用户展示广告。 所有广告均通过 Google AdMob 网络投放，这意味着需要 Google AdMob 帐户。

Firebase AdMob 广告

该模块支持三种类型的广告：

  1. 全屏 插页式广告
  2. 全屏 奖励广告
  3. 基于组件 横幅广告

1. 插页式广告

插页式广告是覆盖应用程序界面直至用户关闭的全屏广告。 这些类型的广告以编程方式加载，然后在应用程序流程中的适当时间点显示（例如，在游戏应用程序上的关卡完成后或游戏结束后）。 广告可以在后台预加载，以确保它们在需要时随时可用。

要创建新的插页式广告，请调用 创建广告请求 方法从 插页式广告。 该方法的第一个参数是“广告单元ID”。 为了进行测试，我们可以使用 测试ID，但是对于生产，来自“Google AdMob 仪表板”下的 ID广告单元” 应该使用

import {
  InterstitialAd,
  TestIds,
  AdEventType
} from '@react-native-firebase/admob';

const adUnitId = 
    __DEV__ ? TestIds.INTERSTITIAL :
    'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitial = InterstitialAd.createForAdRequest(
  adUnitId,
  {
    requestNonPersonalizedAdsOnly: true,
    keywords: ('fashion', 'clothing'),
  }
);

要监听事件，例如当来自网络的广告已加载或发生错误时，我们可以通过 onAdEvent 方法订阅并立即开始从网络加载新广告（通过 load()）。

useEffect(() => {
  const eventListener = interstitial.onAdEvent(type => {
    if (type === AdEventType.LOADED) {
      setLoaded(true);
    }
  });

  // Start loading the interstitial straight away
  interstitial.load();

  // Unsubscribe from events on unmount
  return () => {
    eventListener();
  };
}, ());

要显示广告，您可以随时调用 show 方法，它将调用插页式实例，并且广告显示在应用程序的顶部。

interstitial.show();

2.激励广告

激励广告是覆盖应用程序界面直至用户关闭的全屏广告。 激励广告的内容是通过 Google AdMob 仪表板控制的。

激励广告的目的是在完成广告内的操作后奖励用户一些东西，例如观看视频或通过交互式表单提交选项。 如果用户完成了操作，您可以奖励他们一些东西（例如游戏内货币）。

要创建新的插页式广告，请调用 创建广告请求 方法从 奖励广告。 该方法的第一个参数是“广告单元ID”。 为了进行测试，我们可以使用 测试ID，但是对于生产，来自“Google AdMob 仪表板”下的 ID广告单元” 应该使用

import {
  RewardedAd,
  TestIds
} from '@react-native-firebase/admob';

const adUnitId =
    __DEV__ ? TestIds.INTERSTITIAL :
    'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const rewarded = RewardedAd.createForAdRequest(
  adUnitId,
  {
    requestNonPersonalizedAdsOnly: true,
    keywords: ('fashion', 'clothing'),
  }
);

要监听事件，例如来自网络的广告已加载或发生错误时，我们可以通过 onAdEvent 方法订阅

useEffect(() => {
  const eventListener = rewarded.onAdEvent((type, error, reward) => {
    if (type === RewardedAdEventType.LOADED) {
      setLoaded(true);
    }

    if (type === RewardedAdEventType.EARNED_REWARD) {
      console.log('User earned reward of ', reward);
    }
  });

  // Start loading the rewarded ad straight away
  rewarded.load();

  // Unsubscribe from events on unmount
  return () => {
    eventListener();
  };
}, ());

要显示广告，您可以随时调用 show 方法，它将调用插页式实例，并且广告显示在应用程序的顶部。

rewarded.show();

与插页式广告一样，当用户单击广告或关闭广告并返回到您的应用程序时，事件从 onAdEvent 侦听器触发器返回。

但是，如果用户完成广告操作，则会触发额外的 EARNED_REWARD 事件。 附加奖励属性随事件一起发送，其中包含奖励的金额和类型（通过仪表板指定）。 附加奖励属性随事件一起发送，其中包含奖励的金额和类型（通过仪表板指定）。

3. 横幅广告

横幅广告是部分广告，可以集成到您现有的应用程序中。 与插页式广告和奖励广告不同，横幅仅占据应用程序的有限区域并在该区域内显示广告。 这使您可以在不进行破坏性操作的情况下集成广告。

该模块公开了一个 横幅广告 成分。 这 单位ID 和 尺寸 显示横幅需要道具：

import React from 'react';
import {
  BannerAd,
  BannerAdSize,
  TestIds
} from '@react-native-firebase/admob';

const adUnitId =
    __DEV__ ? TestIds.BANNER :
    'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function App() {
  return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.FULL_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
    />
  );
}

size 属性采用 BannerAdSize 类型，一旦广告可用，将填充所选尺寸的空间。

示例说明

在此示例中，我们将把 AdMob 与我们的应用程序集成，并了解如何使用它。 在单个屏幕上，我们将显示横幅广告和 2 个按钮来显示插页式广告和奖励广告。

制作 React Native 应用程序

React Native 入门将帮助您更多地了解如何制作 React Native 项目。 我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。 尝试卸载 cli 并使用 npx 运行 cli。

这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。

Firebase SDK 集成

要从任何 React Native Firebase 示例开始，您需要将 Firebase 集成到您的应用程序中，我专门为此详细制作了一篇单独的文章，您将在其中看到在 Android 版 React Native 应用程序中添加 Firebase 的点对点过程，以及iOS 两者都有。

请访问如何在 Android 和 iOS 应用程序中集成 Firebase，然后返回执行下一步。

完成 Firebase 集成后，您可以安装更多依赖项。

安装依赖项

要安装依赖项，请打开终端并使用以下命令跳转到您的项目

cd ProjectName

对于 React Native Firebase，我们需要安装和设置应用程序模块

npm install @react-native-firebase/app --save

现在安装admob模块

npm install @react-native-firebase/admob --save

此命令会将所有依赖项复制到您的 node_module 目录中。 –save 是可选的，它只是更新 package.json 文件中的依赖项。

CocoaPods 安装

React Native 0.60 更新后，他们引入了自动链接，因此我们不需要链接库，但对于 iOS，我们需要安装 pod。 因此要安装 pod，请使用

cd ios/ && pod install --repo-update && cd ..

AdMob 设置

在我们开始编写代码之前，您需要设置一些东西。 首先你需要一个 谷歌 AdMob 帐户 您可以轻松创建。 创建帐户后，您将进入“应用程序”选项卡，您可以在其中查看所有应用程序。 您可以在同一帐户中添加 N 个应用程序，这将帮助您在一个地方监控您的收入。 一旦你开启 应用 选项卡单击“添加您的第一个应用程序”以添加我们的应用程序。

使用React Native应用程序中的AdMob集成赚钱

系统会要求您选择平台，如果您的应用程序可以在两个平台上运行，那么您必须执行相同的操作两次。

React_native_admob_setup2

选择平台后，您需要提供应用程序的名称。 这将是您的标识符，无需将名称与某些内容相匹配。

React_native_admob_setup3

添加应用程序后，您可以看到 应用程序ID 在 应用程序设置 部分，这是 Google AdMob 识别您的应用程序的标识符。

React_native_admob_setup4

一旦你看到相同的内容，只需复制它并创建一个 firebase.json 文件放在 React Native 项目的根目录中，并使用 Google AdMob 控制台中的 ID 添加 admob_android_app_id 和 admob_ios_app_id 键。 如果您只有一个，则可以将另一个删除一次，或者两个都可以接受。

// /firebase.json
{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

一旦你添加了这个 firebase.json 请重建您的应用程序。

现在您必须创建一些广告单元，广告单元基本上就是您要展示的广告类型，创建此广告单元将帮助您了解收入来源。 这将使您清楚地了解用户参与度。 要创建广告单元，您可以看到 广告单元 选项中 应用。

React_native_admob_setup6

React_native_admob_setup7

React_native_admob_setup8

React_native_admob_setup9

创建广告单元后，您可以看到一些 ID（例如 ca-app-pub-xxxxxxxxxxxx/xxxxxxxxx），它是广告的唯一标识符。

React_native_admob_setup10

在 React Native 中集成 AdMob 的代码

请在任何代码编辑器中打开 App.js 并将代码替换为以下代码

应用程序.js

// #7 Earn Money using AdMob Integration in React Native App
// https://aboutreact.com/react-native-admob-ads/

// Import React and Component
import React, { useEffect } from "react";
import {
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
} from "react-native";

import admob, {
  MaxAdContentRating,
} from "@react-native-firebase/admob";

import {
  InterstitialAd,
  RewardedAd,
  RewardedAdEventType,
  TestIds,
  AdEventType,
  BannerAd,
  BannerAdSize,
} from "@react-native-firebase/admob";

admob()
  .setRequestConfiguration({
    // Update all future requests suitable for parental guidance
    maxAdContentRating: MaxAdContentRating.PG,

    // Indicates that you want your content treated as child-directed for purposes of COPPA.
    tagForChildDirectedTreatment: true,

    // Indicates that you want the ad request to be handled in a
    // manner suitable for users under the age of consent.
    tagForUnderAgeOfConsent: true,
  })
  .then(() => {
    // Request config successfully set!
  });

const interstialAdUnitId = __DEV__
  ? TestIds.INTERSTITIAL
  : "ca-app-pub-7470375419739273/1165043718";

const interstitial = InterstitialAd.createForAdRequest(
  interstialAdUnitId,
  {
    requestNonPersonalizedAdsOnly: true,
    keywords: ("fashion", "clothing"),
  }
);

const rewardedAdUnitId = __DEV__
  ? TestIds.REWARDED
  : "ca-app-pub-7470375419739273/3954858586";

const rewarded = RewardedAd.createForAdRequest(
  rewardedAdUnitId,
  {
    requestNonPersonalizedAdsOnly: true,
    keywords: ("fashion", "clothing"),
  }
);

const bannerAdUnitId = __DEV__
  ? TestIds.BANNER
  : "ca-app-pub-7470375419739273/3954858586";

const App = () => {
  useEffect(() => {
    // Event listener for interstitial Ads
    const interstitialAdEventListener = interstitial.onAdEvent(
      (type) => {
        if (type === AdEventType.LOADED) {
          console.log("Interstitial Ad Loaded");
        }
      }
    );

    // Start loading the interstitial straight away
    interstitial.load();

    // Event listener for rewarded Ads
    const rewardedAdEventListener = rewarded.onAdEvent(
      (type, error, reward) => {
        if (type === RewardedAdEventType.LOADED) {
          console.log("Rewarded Ad Loaded");
        }

        if (type === RewardedAdEventType.EARNED_REWARD) {
          console.log("User earned reward of ", reward);
        }
      }
    );

    // Start loading the rewarded ad straight away
    rewarded.load();

    // Unsubscribe from events on unmount
    return () => {
      interstitialAdEventListener();
      rewardedAdEventListener();
    };
  }, ());

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.heading}>
        React Native + AdMob Integration{"\n\n"}
        www.aboutreact.com
      </Text>
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <TouchableOpacity
          style={styles.buttonStyle}
          activeOpacity={0.5}
          onPress={() => interstitial.show()}
        >
          <Text style={styles.buttonTextStyle}>
            Show Interstitial Ad
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.buttonStyle}
          activeOpacity={0.5}
          onPress={() => rewarded.show()}
        >
          <Text style={styles.buttonTextStyle}>
            Show Rewarded Ad
          </Text>
        </TouchableOpacity>
      </View>
      <BannerAd
        unitId={bannerAdUnitId}
        size={BannerAdSize.ADAPTIVE_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    padding: 16,
  },
  heading: {
    fontSize: 20,
    textAlign: "center",
    marginTop: 30,
  },
  buttonStyle: {
    minWidth: 300,
    backgroundColor: "#7DE24E",
    borderWidth: 0,
    color: "#FFFFFF",
    borderColor: "#7DE24E",
    height: 40,
    alignItems: "center",
    borderRadius: 30,
    marginLeft: 35,
    marginRight: 35,
    marginTop: 20,
    marginBottom: 25,
  },
  buttonTextStyle: {
    color: "#FFFFFF",
    paddingVertical: 10,
    fontSize: 16,
  },
});

输出截图

反应本机admob1反应本机admob2反应本机admob3

欧洲用户同意书

AdMob 开箱即用，不处理您可能需要对您的应用程序执行的任何相关规定。 由开发人员根据每个用户的情况来实现和处理此问题。 在向 EEA 用户展示个性化和非个性化广告之前，您必须同意向他们提供服务。 有关更多信息，请参阅 请求欧洲用户同意。

AdMob 模块提供了 AdConsent 帮助开发人员在其应用程序中快速实现同意流程的助手。 请参阅 欧洲用户同意页面 有关如何将助手集成到您的应用程序中的完整示例。

在 Android 上，您必须在发布应用程序之前更新 Google Play 商店仪表板中的“包含广告”设置（在“定价和分发”下）。

这就是我们如何将 AdMobs 集成到适用于 Android 和 iOS 的 React Native 应用程序中，并使用 AdMob 集成来赚钱。

一旦您将 AdMob 集成到您的 React Native 应用程序中，您就可以轻松地看到您的收入 AdMob 信息中心 并且可以看到 这个帖子 帮助您转入银行帐户中的金额。

如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。

推荐：在线课程辅导教育WordPress主题MaxCoach

Previous

如何在Outlook中禁用自动完成电子邮件地址

Next

Firebase Cloud Firestore数据库与React Native应用程序的集成

相关文章

在Microsoft Excel中添加时间的4种方法

在Microsoft Excel中添加时间的4种方法

在Microsoft Excel中查找循环引用的7种方法

在Microsoft Excel中查找循环引用的7种方法

将CSV转换为Excel的8种简便方法

将CSV转换为Excel的8种简便方法

在Microsoft Excel中插入分页符的8种方法

在Microsoft Excel中插入分页符的8种方法

发表评论