uniapp如何接入穿山甲广告

在uniapp项目中如何接入穿山甲广告？具体步骤是什么？需要配置哪些参数？有没有完整的示例代码可以参考？接入过程中常见的坑有哪些？

2 回复

在uniapp项目中，先安装穿山甲广告插件，然后在manifest.json中配置广告位ID。接着在页面引入广告组件，调用load和show方法即可展示广告。注意测试时用测试ID，上线前替换正式ID。


在 UniApp 中接入穿山甲广告，可以通过以下步骤实现。这里以字节跳动的穿山甲广告联盟为例，假设你已经注册了穿山甲开发者账号并创建了广告位。

步骤 1：安装广告插件

UniApp 支持穿山甲广告，通常通过官方插件或第三方 SDK 集成。推荐使用 UniApp 官方提供的 uni-AD 广告插件，它内置了穿山甲支持。

  • 在 HBuilderX 中，确保项目启用了 uni-AD：在 manifest.json 的 “App模块配置” 中勾选 “Ad广告（uni-AD）”。
  • 如果需要手动集成，可以从穿山甲官网下载 SDK，但官方插件更简便。

步骤 2：配置广告参数

在 manifest.json 中配置穿山甲广告参数（App 平台）：

{
  "app-plus": {
    "plugins": {
      "ad": {
        "type": "uni-AD",
        "params": {
          "appid": "你的穿山甲AppID", // 从穿山甲后台获取
          "adpid": "你的广告位ID" // 可选，全局广告位ID
        }
      }
    }
  }
}
  • AppID：在穿山甲开发者平台创建应用后获取。
  • 广告位ID：在穿山甲后台创建广告位（如开屏、激励视频等）后获取。

步骤 3：在页面中使用广告

UniApp 提供了广告组件和 API，例如激励视频、开屏广告等。以下以激励视频为例：

使用广告组件（模板方式）

在页面模板中添加广告组件（如激励视频）：

<template>
  <view>
    <ad adpid="你的激励视频广告位ID" @load="onAdLoad" @close="onAdClose"></ad>
    <button @click="showAd">显示激励视频</button>
  </view>
</template>

<script>
export default {
  methods: {
    showAd() {
      // 通过 API 触发广告显示
      uni.createRewardedVideoAd({
        adpid: '你的激励视频广告位ID'
      }).show();
    },
    onAdLoad() {
      console.log('广告加载成功');
    },
    onAdClose(e) {
      if (e.isEnded) {
        console.log('用户看完广告，发放奖励');
      } else {
        console.log('用户提前关闭广告');
      }
    }
  }
}
</script>

使用 API 方式（推荐）

通过 JavaScript API 动态控制广告，更灵活：

// 在页面脚本中
export default {
  data() {
    return {
      rewardedVideoAd: null
    };
  },
  onLoad() {
    // 创建激励视频广告实例
    this.rewardedVideoAd = uni.createRewardedVideoAd({
      adpid: '你的激励视频广告位ID' // 从穿山甲后台获取
    });
    this.rewardedVideoAd.onLoad(() => {
      console.log('激励视频加载成功');
    });
    this.rewardedVideoAd.onError((err) => {
      console.error('激励视频加载失败', err);
    });
    this.rewardedVideoAd.onClose((res) => {
      if (res.isEnded) {
        console.log('奖励用户');
      } else {
        console.log('未完成播放');
      }
    });
  },
  methods: {
    showRewardedVideo() {
      // 显示广告
      this.rewardedVideoAd.show().catch(err => {
        console.log('广告显示失败，尝试重新加载');
        this.rewardedVideoAd.load().then(() => this.rewardedVideoAd.show());
      });
    }
  }
};

步骤 4：测试和发布

  • 测试：在 HBuilderX 中运行到真机，使用测试广告位ID（穿山甲提供测试ID）避免正式环境问题。
  • 发布：配置广告位后，提交应用审核，确保广告内容符合平台政策。

注意事项

  • 穿山甲广告需要网络权限，确保 manifest.json 中配置了 Android 和 iOS 的网络权限。
  • 广告加载可能受网络影响，建议添加错误处理。
  • 遵循穿山甲广告规范，避免违规导致封禁。

如果需要其他广告类型（如开屏、插屏），方法类似，参考 UniApp 官方文档调整参数。

回到顶部