npm 包 capacitor-mopub 使用教程

简介

Capacitor-MoPub 是一个为 Capacitor 框架开发的 MoPub 广告服务插件。该插件可让开发人员将 MoPub 广告服务集成到他们的应用中，这是一个强大、可靠的广告服务平台，特别适用于移动应用开发领域。

安装

安装 Capacitor-MoPub 插件，需要使用以下命令：

npm i capacitor-mopub

然后安装条长 id 帮助 JS 调用 OC（Swift） 的方法。

npm i cordova-plugin-appavailability
npm i cordova-plugin-customurlscheme
npm i cordova-plugin-inappbrowser
npm i cordova-plugin-safariviewcontroller

你还需要在你的应用中添加以下配置：

<allow-navigation href="http://mopub.com/*"/>
<allow-navigation href="http://ads.mopub.com/*"/>
<allow-navigation href="http://*.mopub.com/*" />
<allow-navigation href="https://*.mopub.com/*" />
<allow-navigation href="http://*.admob.com/*" />
<allow-navigation href="https://*.admob.com/*" />
<allow-navigation href="http://*.google.com/*" />
<allow-navigation href="https://*.google.com/*" />
<allow-navigation href="http://*.doubleclick.net/*" />
<allow-navigation href="https://*.doubleclick.net/*" />

配置

Capacitor-MoPub 需要在您的应用程序中进行配置。你需要运行以下命令：

capacitor-mopub init

这将会生成一个 mopub.config.json 文件。该配置文件包含了Capacitor-MoPub 对于广告展示、推送和统计等功能的配置。

如果你还没有创建 MoPub Publisher 账户，请先 注册 一个账户。之后在该账户中选择你想使用的广告类型，并创建相关的广告位 ID。

在 mopub.config.json 中配置你的广告位 ID：

{
    "adUnits": {
        "banner": {
            "id": "xxxxxxxxxxxxx"
        },
        "interstitial": {
            "id": "xxxxxxxxxxxxx"
        },
        "rewarded": {
            "id": "xxxxxxxxxxxxx"
        }
    },
    "init": {
        "adUnitBannerSize": "BANNER",
        "adUnitInterstitialShowAdDelay": 0,
        "adUnitRewardedShowAdDelay": 0,
        "appKey": "xxxxxxxxxxxxx",
        "loggingEnabled": false,
        "testMode": false
    }
}

使用

显示 Banner 广告

在你想要展示 Banner 广告的页面中插入以下代码：

import { Plugins } from "@capacitor/core";
const { CapacitorMoPub } = Plugins;

const adOptions = {
  adUnitId: "banner",
  backgroundColor: "#FFFFFF",
  adPosition: "BOTTOM_CENTER",
  width: 320,
  height: 50,
};

CapacitorMoPub.showBanner(adOptions).then((result) => {
  console.log(result);
});

显示插页式广告

在你需要显示插页式广告的页面中插入以下代码：

import { Plugins } from "@capacitor/core";
const { CapacitorMoPub } = Plugins;

CapacitorMoPub.showInterstitial("interstitial").then((result) => {
  console.log(result);
});

显示奖励式广告

在你需要显示奖励式广告的页面中插入以下代码：

import { Plugins } from "@capacitor/core";
const { CapacitorMoPub } = Plugins;

const adOptions = {
  adUnitId: "rewarded",
};

CapacitorMoPub.showRewarded(adOptions).then((result) => {
  console.log(result);
});

结论

通过 Capacitor-MoPub，你可以轻松地将 MoPub 广告服务集成到你的 Capacitor 应用中，并且获得丰富的广告展示、推送和统计等功能。希望本篇文章的介绍对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53b8d