uni-app抖音小程序激励广告问题

uni-app抖音小程序激励广告问题
需求：

  • 想在uniapp运行抖音小程序，然后触发激励广告。

前景：

问题：

以下是代码：

<template>  
    <view class="uni-container">  
        11111  
        <view class="ad-view">  
            <button @click="show()">显示广告</button>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        props: {  
            hasLeftWin: {  
                type: Boolean  
            },  
            leftWinActive: {  
                type: String  
            }  
        },  
        data() {  
            return {  
                title: 'createRewardedVideoAd',  
                _isLoaded:false,  
                _rewardedVideoAd:{}  
            }  
        },  
        onReady() {  
            this._isLoaded = true  
            let rewardedVideoAd = this._rewardedVideoAd = uni.createRewardedVideoAd({  
                adpid: '1111',  
                adUnitId: '1111',  
                urlCallback: { // 服务器回调透传参数  
                    userId: 'testuser',  
                    extra: 'testdata'  
                }  
            }) // 仅用于HBuilder基座调试 adpid: '1507000689'  
            rewardedVideoAd.onLoad(() => {  
                this._isLoaded = true  
                console.log('onLoad event')  
                // 当激励视频被关闭时，默认预载下一条数据，加载完成时仍然触发 `onLoad` 事件  
            })  
            rewardedVideoAd.onError((err) => {  
                console.log('onError event', err)  
            })  
            rewardedVideoAd.onClose((res) => {  
                console.log('onClose event', res)  
            })  
        },  
        methods: {  
            show() {  
                if (this._isLoaded) {  
                    this._rewardedVideoAd.show()  
                }  
            }  
        }  
    }  
</script>  

<style>  
    @import '../../../common/uni-nvue.css';  
</style>
    1. 目前adUnitId和adpid我不知道从哪里可以获取。。我在巨量广告后台新增了一个广告，填写了之后提示我Error: The adUnitId is invalid。那这两个值我应该是要去哪里获取
    1. 我刚开始猜了一下应该是在抖音开放平台里面的运营-商业化变现里面。可以获取到一个adUnitId。但是我又有个疑问，这个激励广告的api怎么知道我填写的是抖音的呢。他大概率是不是还是返回我一个Error: The adUnitId is invalid。我不太知道流程是要怎样的。

图片


更多关于uni-app抖音小程序激励广告问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

uni-app 项目运行到抖音小程序 目前仅支持抖音提供的广告，在抖音后台申请广告位和结算，代码中传递 adUnitId 即可 uni.createRewardedVideoAd({
adUnitId: ‘’,
})

更多关于uni-app抖音小程序激励广告问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对uni-app在抖音小程序中实现激励广告的问题，我们可以利用uni-app提供的广告组件和API，结合抖音小程序的广告接口来完成。以下是一个基本的代码案例，展示如何在uni-app中实现抖音小程序的激励广告功能。

首先，确保你已经在抖音小程序后台配置了广告位，并获取了广告位的ID。

1. 在pages.json中配置广告组件

在pages.json文件中，你需要在需要使用激励广告的页面中添加广告组件的配置。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "titleNView": false,
          "autoBackButton": true
        }
      },
      "customComponents": {
        "rewardVideoAd": "path/to/your/reward-video-ad-component"  // 假设你有一个自定义组件
      }
    }
  ]
}

2. 创建激励广告组件

创建一个自定义组件，用于展示和管理激励广告。例如，reward-video-ad-component.vue：

<template>
  <view>
    <button @click="showAd">观看广告获取奖励</button>
    <!-- 抖音小程序的激励广告组件 -->
    <ad unit-id="YOUR_AD_UNIT_ID" ad-type="video" @load="onLoad" @close="onClose" @error="onError"></ad>
  </view>
</template>

<script>
export default {
  methods: {
    showAd() {
      // 假设你有一个方法来控制广告的显示，这里只是示例
      // 实际上，抖音小程序的激励广告可能需要通过其SDK来控制
    },
    onLoad() {
      console.log('广告加载成功');
    },
    onClose() {
      console.log('广告关闭');
      // 用户观看广告后的奖励逻辑
    },
    onError(e) {
      console.error('广告加载失败', e);
    }
  }
}
</script>

注意：上述代码中的<ad>标签和事件监听是基于假设的，因为uni-app和抖音小程序的具体实现可能有所不同。在实际开发中，你需要参考抖音小程序官方文档，使用其提供的SDK和API来控制激励广告的展示。

3. 在页面中引用组件

在需要使用激励广告的页面中，引入并使用这个组件：

<template>
  <view>
    <reward-video-ad></reward-video-ad>
  </view>
</template>

<script>
import RewardVideoAd from '@/components/reward-video-ad-component.vue';

export default {
  components: {
    RewardVideoAd
  }
}
</script>

请确保你根据抖音小程序的实际API和SDK文档进行调整，因为不同平台的广告组件和API可能有所不同。

回到顶部