uniapp如何接入穿山甲的视频广告

我在uniapp项目中想接入穿山甲的视频广告，但不知道具体该怎么操作。有没有详细的接入步骤或者示例代码可以参考？穿山甲的文档看了还是不太明白，特别是如何在uniapp中正确引入SDK和调用广告的方法。求大神指点一下具体的实现流程，谢谢！

2 回复

在uniapp中接入穿山甲视频广告，可以按以下步骤操作：

  1. 安装官方广告插件：在HBuilderX中搜索"穿山甲广告联盟"插件并导入项目。

  2. 配置App SDK：在manifest.json的"App模块配置"中勾选"Ad广告(uni-AD)"，并填写穿山甲媒体ID和App Key。

  3. 初始化广告（在App.vue的onLaunch中）：

plus.ad.initSdk({
  appid: '你的媒体ID'
});
  1. 创建激励视频广告：
let videoAd = plus.ad.createRewardedVideoAd({
  adpid: '你的广告位ID'
});

// 监听加载和错误
videoAd.onLoad(() => {
  console.log('广告加载成功');
});

// 显示广告
videoAd.show();
  1. 注意处理回调：
  • 设置广告加载失败的重试机制
  • 在onClose事件中处理奖励发放逻辑
  • 需要真机测试，部分广告仅真机有效

记得先在穿山甲平台注册账号，创建应用和广告位获取对应ID。


在 UniApp 中接入穿山甲（字节跳动广告联盟）的视频广告，可以通过以下步骤实现。整个过程涉及插件配置、广告位初始化、广告加载与展示，以下是详细说明和示例代码：

步骤 1：安装和配置穿山甲广告插件

  • 在 UniApp 项目中使用穿山甲广告，需要先安装官方或第三方广告插件（如 uni-AD）。
  • 通过 HBuilderX 的插件市场搜索并导入插件，或在 manifest.json 中配置广告模块。

示例 manifest.json 配置（部分）：

{
  "app-plus": {
    "plugins": {
      "ad": {
        "type": "ad",
        "appid": "你的穿山甲广告App ID" // 从穿山甲后台获取
      }
    }
  }
}

步骤 2：获取广告位 ID

步骤 3：在 UniApp 页面中初始化和展示广告

使用 uni.createRewardedVideoAd API 创建激励视频广告实例。以下是完整示例代码：

// 在页面或组件中编写代码
export default {
  data() {
    return {
      videoAd: null // 存储广告实例
    };
  },
  onLoad() {
    this.initVideoAd();
  },
  methods: {
    // 初始化视频广告
    initVideoAd() {
      // 使用你的广告位 ID 替换 'your-ad-unit-id'
      this.videoAd = uni.createRewardedVideoAd({
        adUnitId: 'your-ad-unit-id' // 从穿山甲后台获取
      });

      // 监听广告加载事件
      this.videoAd.onLoad(() => {
        console.log('视频广告加载成功');
      });

      // 监听广告错误事件
      this.videoAd.onError((err) => {
        console.error('视频广告加载失败:', err);
      });

      // 监听广告关闭事件
      this.videoAd.onClose((res) => {
        if (res.isEnded) {
          console.log('用户完整观看，发放奖励');
          // 这里处理奖励逻辑（如发放积分）
        } else {
          console.log('用户未完整观看，不发放奖励');
        }
      });
    },

    // 展示广告的方法（在按钮点击等事件中调用）
    showVideoAd() {
      if (this.videoAd) {
        this.videoAd.show().catch(err => {
          console.error('广告展示失败:', err);
          // 如果广告未加载，可以重新加载
          this.videoAd.load().then(() => this.videoAd.show());
        });
      }
    }
  }
};

步骤 4：在模板中添加触发按钮

在页面模板中添加一个按钮来触发广告展示：

<template>
  <view>
    <button @click="showVideoAd">观看视频广告获取奖励</button>
  </view>
</template>

注意事项

  • 测试广告：在开发阶段，使用穿山甲提供的测试广告位 ID 避免误点击。
  • 平台差异：确保广告配置在 Android 和 iOS 端均正确，并检查权限（如网络权限）。
  • 错误处理：添加完整的错误监听，提升用户体验。
  • 审核发布：应用上线前需通过穿山甲审核，确保广告内容合规。

通过以上步骤，即可在 UniApp 中成功接入穿山甲视频广告。如果有问题，参考 UniApp 官方文档或穿山甲开发者指南。

回到顶部