Uni-app 小程序 APP 的广告变现之路：沉浸式视频流广告

沉浸式视频流广告

随着羊了个羊的爆火，网络上很快开始流传出羊了个羊后台视频广告收益图以及开发者全款买两套房的图片。尽管大多数人无法想象，但是羊了个羊一天就有月400万的视频广告收益一定让大家对于视频广告更加感兴趣了。而让羊了个羊开发者赚翻的广告形式就是今天的沉浸式视频流广告。

视频流广告也可以叫做 Draw 视频信息流广告。视频流广告一般来说为了适配现在的移动端形式，以竖屏的视频广告为主，比较适合在全屏的手机屏幕进行展现。同时支持 app-nvue 页面进行实用。

示例：

适用场景

类似某音和某手的的竖版视频流广告，来电秀、直播间等全屏观看的视频。

平台差异说明

属性说明

注意

• HBuilderX2.8+ 版本Android平台更新穿山甲（头条系）广告SDK后不再支持x86类型CPU，无法运行到x86类型cpu的模拟器。
• HBuilderX标准基座真机运行测试draw信息流广告位标识（adpid）为：1507000690

项目实例

示例1:

<template>
  <!-- 仅nvue页面支持 -->
  <!-- 必须指定ad-draw的宽度和高度，否则大小全屏 -->
  <view class="container">
    <ad-draw class="ad-draw" adpid="1507000690"></ad-draw>
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>

<style>
  .container {
    flex: 1;
  }

  .ad-draw {
    flex: 1;
    width: 750rpx;
  }
</style>

示例2:

<template>
  <!-- 仅nvue页面支持 -->
  <view class="content">
    <view class="ad-draw">
      <ad-draw :data="adData" @load="onload" @error="onerror"></ad-draw>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'ad-draw',
        adData: {}
      }
    },
    onReady: function (e) {
      this.getAdData()
    },
    methods: {
      getAdData: function (e) {
        // 仅APP平台支持
        plus.ad.getDrawAds({
            adpid: '1507000690',  // 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
            count: 1,   // 广告数量，默认 1-3
            width: 300,  // 根据宽度获取合适的广告(单位px)
            height: 300  // 根据高度获取合适的广告(单位px)
          },
          (res) => {
            this.adData = res.ads[0];
            console.log(this.adData);
          },
          (err) => {
            console.log(err);
          }
        )
      },
      onload(e) {
        console.log("onload",e);
      },
      onerror(e) {
        console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
      }
    }
  }
</script>