The Road to Realization of Ads in Uni-app Mini Program APP: Immersive Video Streaming Ads

Immersive Video Streaming Ads

With the popularity of Sheep and Sheep, pictures of Sheep and Sheep’s background video advertising revenue and pictures of developers buying two houses with full money began to spread on the Internet. Although most people can't imagine it, the video advertising revenue of 4 million a day will definitely make everyone more interested in video advertising. And the form of advertising that makes sheep and sheep developers make a lot of money is today's immersive video streaming advertising.

Video streaming ads can also be called Draw video streaming ads. Generally speaking, in order to adapt to the current mobile terminal form, video streaming advertisements are mainly vertical screen video advertisements, which are more suitable for displaying on full-screen mobile phone screens. At the same time, it supports the app-nvue page for practical use.

Example:

 

Applicable scene

Similar to the vertical video streaming advertisements of Xingyin and Xingshou, full-screen videos such as caller shows and live broadcasts.

Explanation of Platform Differences

App	H5	WeChat applet	Alipay applet	Baidu applet	ByteDance applet	QQ applet	quick app	360 applet	Kuaishou applet	Jingdong applet
√（3.0.0+）	x	x	x	x	x	x	x	x	x	x

property description

attribute name	type	Defaults	illustrate	platform differences
data	Object	optional	Advertising data, through plus.ad.getDrawAds (refer to the sample code), adpid will be invalid after setting	App
adpid	String		uni-AD App advertising space id, apply for advertising space on the official website	App
@load	EventHandle		Callback for successful ad loading
@error	EventHandle		Callback for ad loading failure, event.detail = {errCode: }

Notice

• The HBuilderX2.8+ version of the Android platform no longer supports x86 type CPUs after updating the pangolin (Toutiao series) advertising SDK, and cannot run on x86 type CPU emulators.
• HBuilderX standard pedestal real machine running test draw information flow advertising position identification (adpid) is: 1507000690

Project example

Example 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>

Example 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>