uni-app 激励视频广告插件

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 激励视频广告插件

可私聊QQ:303711888
http://ad.duapps.com/zh_CN/

1 回复

在uni-app中实现激励视频广告插件,通常需要集成第三方广告平台提供的SDK。这里以集成穿山甲广告(字节跳动广告平台)为例,展示如何在uni-app中实现激励视频广告插件。

首先,确保你已经在穿山甲平台注册并创建了应用,获取了相关的广告位ID(placement_id)。

1. 安装穿山甲广告SDK

在uni-app项目中,你可能需要通过原生插件的方式来集成穿山甲广告SDK。由于uni-app支持通过HBuilderX导入原生插件,你可以从穿山甲广告平台下载对应的原生插件包,并导入到HBuilderX中。

2. 配置原生插件

在HBuilderX中导入插件后,需要在manifest.json文件中配置插件。

"plugins": {
  "ad-rewardvideo": {
    "version": "1.0.0",
    "provider": "your-provider-name"
  }
}

3. 在Vue页面中调用激励视频广告

在Vue页面中,你可以通过uni.requireNativePlugin方法获取原生插件的实例,并调用相关方法展示激励视频广告。

export default {
  data() {
    return {
      rewardVideoAd: null
    };
  },
  methods: {
    loadRewardVideoAd() {
      const adPlugin = uni.requireNativePlugin('ad-rewardvideo');
      adPlugin.loadRewardVideoAd({
        placementId: 'YOUR_PLACEMENT_ID', // 替换为你的广告位ID
        success: (res) => {
          console.log('激励视频广告加载成功', res);
          this.rewardVideoAd = adPlugin;
        },
        fail: (err) => {
          console.error('激励视频广告加载失败', err);
        }
      });
    },
    showRewardVideoAd() {
      if (this.rewardVideoAd) {
        this.rewardVideoAd.showRewardVideoAd({
          success: (res) => {
            console.log('激励视频广告展示成功', res);
            if (res.isEnded) {
              // 用户完整观看了广告,执行奖励逻辑
              this.grantReward();
            }
          },
          fail: (err) => {
            console.error('激励视频广告展示失败', err);
          },
          close: (res) => {
            console.log('激励视频广告关闭', res);
            // 无论用户是否完整观看,广告关闭后的逻辑
          }
        });
      } else {
        console.warn('请先加载激励视频广告');
      }
    },
    grantReward() {
      // 实现给用户奖励的逻辑
      console.log('用户获得奖励');
    }
  }
};

4. 在页面生命周期中调用

你可以在页面的onLoadonShow生命周期方法中调用loadRewardVideoAd方法来预加载激励视频广告。

onLoad() {
  this.loadRewardVideoAd();
}

这样,当用户触发某个事件(如点击按钮)时,你可以调用showRewardVideoAd方法来展示激励视频广告。以上代码展示了如何在uni-app中集成和使用穿山甲激励视频广告插件的基本流程。

回到顶部