使用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


发表评论