The road to monetization of advertising in Uni-app Mini Program App: Banner information flow advertising

The previous article ( How to enable advertising profit after Uni-app develops App and plug-ins: uni-AD_Zhimi Technology’s blog ) introduced the official uni-ads advertising plug-in for developers who are practical for uni-app, but only After briefly introducing the advertisement types in uni-ads, the following series will introduce different application advertisement types and plug-in codes.

---

The display scenarios of Banner or News Feed Ads are very flexible. Common display scenarios are: the top of the article, the top of the details page, the middle of the first screen, etc. It is recommended that information feed ads not be placed at the bottom

Information flow advertisements (or Banners) are the most common advertisements in Apps and Mini Programs. Generally appear at the top or bottom of the article, the top of the details page, and the middle of the first screen of the information flow, etc. However, from the perspective of advertising effect, the effect of the information flow advertisement at the bottom is relatively poor.

The advertising sources on the App side are composed of mainstream advertising channels such as Tencent Youlianghui, Toutiao Pangolin, and Kuaishou Advertising Alliance, as well as some DCloud direct advertising, registered in the uni-AD background of DCloud

• Advertisements on H5 and WeChat Mini Programs are directly provided by DCloud
• Other mini programs are provided by the mini program platform
• Explanation of Platform Differences

APP	H5	WeChat applet	Alipay applet	ByteDance applet	QQ applet	quick app	360 applet	Kuaishou applet	Jingdong applet	Baidu applet
2.5.2+ support	3.4.8 Support	support	not support	support	support	not support	not support	support	not support	support

property description

attribute name	type	Defaults	illustrate	platform differences
adpid	String		uni-AD App advertising slot id	App, WeChat applet 3.4.8+
unit-id	String		Ad unit id, which can be created in the traffic main module of the applet management background	WeChat Mini Program, ByteDance Mini Program (minimum version 1.19.0+), QQ Mini Program, Kuaishou Mini Program
ad-intervals	number		The interval of automatic refresh of the ad, in seconds, the parameter value must be greater than or equal to 30 (the banner ad will not be refreshed automatically if this parameter is not passed in)	WeChat applet (basic library 2.3.1+)
data	Object	optional	Advertising data, through plus.ad.getAds (refer to the sample code), the priority is higher than adpid	App
appid	String		Mini Program Application ID	Baidu applet
aphid	String		Mini program advertising slot ID	Baidu applet
ad-left	Number		Advertisement left margin (px) when type is feeds, must be greater than 0	QQ applet
ad-top	Number		Ad top margin (px) when type is feeds, must be greater than 0	QQ applet
ad-width	Number		Advertisement width (px) when the type is feeds, the default is 100%, the maximum value is the screen width, and the minimum value is 265	QQ applet
ad-height	Number		Advertisement height (px) when type is feeds, minimum 85, maximum 160	QQ applet
type	String	feed		QQ Mini Program, Baidu Mini Program, ByteDance Mini Program, Kuaishou Mini Program
@load	EventHandle		Callback for successful ad loading
@error	EventHandle		Callback for ad loading failure, event.detail = {errCode: }
@close	EventHandle		Callback for ad close

type attribute Baidu

Advertisement type: banner/feed, which must match the code bit type on the Baiqingteng platform.

type attribute headlines

The type of advertisement, the default banner, the specific types are: banner, video (video), large (large image), lImg (left image on the right), rImg (right image on the left), the default value is banner

type attribute QQ

value	illustrate
banner	Banner advertisements are divided into 1 image and 3 images and 1 text. 3 Figure 1 The background color and text color of the text advertisement will be adjusted according to the background color of the ancestor node. There are three situations: dark background, light background and white background
swip	Flipping ads, 1 image and 1 text, will cover the entire applet, and the logic of displaying and hiding needs to be controlled by the developer
card	Card ad, 1 image, closeable
feeds	Customize the ad, you can flexibly control the top and left margins, width and height of the ad to adapt to other content on the interface. The size event can be monitored to obtain the actual width and height

The ad component of App and WeChat applet has no type attribute and can be used for banner or information flow.

WeChat applet

The WeChat Mini Program platform supports information flow (Banner) advertising components  <ad unit-id=""></ad>, provided by WeChat

uniAD also supports information flow (Banner) advertising components  <ad adpid=""></ad>, provided by uniAD

Components of versions before 3.4.10 adrun to the WeChat Mini Program to use the advertising components provided by WeChat

Versions after 3.4.10+ are adjusted as follows

1. The component is only set  unit-id, using the ad component provided by WeChat, the logic remains unchanged
2. The component has properties set  adpid and is compiled as  uniad, see the introduction below
3. The component sets  adpid and  unit-id attributes, and is compiled as  uniad, see the introduction below

uniadIt is uni-appa built-in component of the framework. uniadThe component supports both uniADadvertisements and WeChat native advertisements. Request uniAD first. If it has been activated, use it directly, otherwise switch to WeChat advertisements. There will be a 3-second delay in this process

uniadThe component relies on the WeChat applet plug-in provided by uniAD and the coral advertisement plug-in provided by Tencent

If you want to use only WeChat ads on WeChat, App or Web uses uniAD to use conditional compilation

Conditional compilation example

<!-- #ifdef MP-WEIXIN -->
<ad unit-id=""></ad>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<ad adpid=""></ad>
<!-- #endif -->

Notice

• <ad> Components are native components, and there will be hierarchical problems on the webview page, and they cannot be used in <swiper> and <scroll-view> components. However, app-nvue, the new version of the WeChat applet and the new version of the Toutiao applet support the same layer rendering, so there is no layer problem. However, platforms such as app-vue and QQ applets have hierarchical problems.
• There is no height when there is no ad, the height is released when the ad is closed, and the width is determined by the parent container
• App platform, because the size of the component is set after the ad data is calculated inside the ad component, there will be interface jitter problems, you can get the ad data through plus.ad.getAds in advance, and the adpid will be invalid after setting the data
• WeChat applet  <ad> components do not support triggering touch-related events such as tap
• When used in nvue  <list> components on the Android platform , the width attribute must be specified , because  there is an automatic memory recovery mechanism, components that are not within the screen range will not be created, and the size cannot be obtained inside the component <ad> <ad width="750rpx" /> <list>
• <recycle-list> Nesting is not supported within app-nvue  components <ad>
• There is a high probability of repeated advertisements in guangdiantong. Advertisement data can be requested according to demand, and more than 1 article (plus.ad.getAds) is recommended to reduce the repetition rate
• HBuilderX2.8+ version of the Android platform no longer supports x86 type CPU after updating the pangolin (Today's Toutiao) advertising SDK, and cannot run the emulator on x86 type CPU.
• <ad> The advertising space for component testing is the picture above and the text below, and the advertising space applied for by uniAD background defaults to the left picture and the right text
• HBuilderX standard pedestal real machine running test information flow advertising space identification (adpid) is: 1111111111, WeChat applet and H5 platform do not provide test advertising space for the time being

example

<template>
  <view class="content">
    <!-- adpid="1111111111" 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试 -->
    <!-- 广告后台申请的广告位(adpid)需要自定义基座/云打包/本地打包后生效 -->
    <view class="ad-view">
      <ad adpid="1111111111" @load="onload" @close="onclose" @error="onerror"></ad>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'ad'
    }
  },
  methods: {
    onload(e) {
      console.log("onload");
    },
    onclose(e) {
      console.log("onclose: " + e.detail);
    },
    onerror(e) {
      console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
    }
  }
}
</script>

<style>
  .content {
    background-color: #DBDBDB;
    padding: 10px;
  }

  .ad-view {
    background-color: #FFFFFF;
    margin-bottom: 10px;
  }
</style>

API method (only App platform supports), this method of calling is not recommended, the calling method is more complicated, and it is not cross-platform, developers also need to manually handle the cache logic

<template>
  <view class="content">
    <view class="ad-view">
      <ad :data="adData"></ad>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'ad',
      adData: {}
    }
  },
  onReady: function (e) {
    this.getAdData()
  },
  methods: {
    getAdData: function (e) {
      // 仅APP平台支持
      plus.ad.getAds({
          adpid: '1111111111',  // 替换为自己申请获取的广告位标识，此广告位标识仅在HBuilderX标准基座中有效，仅用于测试
          count: 1,   // 广告数量，默认 3
          width: 300  // 根据宽度获取合适的广告(单位px)
        },
        (res) => {
					// 注意: 广告数据只能使用一次
          this.adData = res.ads[0];
          console.log(this.adData);
        },
        (err) => {
          console.log(err);
        }
      )
    }
  }
}
</script>

<style>
  .content {
    background-color: #DBDBDB;
    padding: 10px;
  }

  .ad-view {
    background-color: #FFFFFF;
    margin-bottom: 10px;
  }
</style>

Use ad/ad-draw to simulate the effect of interstitial ads @Interstitial

<template>
  <view>
    <!-- 使用 ad/ad-draw 模拟插屏广告效果 -->
    <view>
      <button @click="showInterstitialAd">显示插屏广告</button>
    </view>
    <view class="ad-interstitial" v-if="isShowInterstitialAd">
      <view class="ad-view">
        <ad class="ad" adpid="1111111111" @error="onerror"></ad>

        <!-- ad-draw 仅在nvue页面生效 -->
        <!-- <ad-draw class="ad-draw" adpid="1507000690"></ad-draw> -->
      </view>
      <view class="close-area">
        <!-- 根据z自己页面风格设置关闭按钮的样式 -->
        <button @click="hideInterstitialAd">X</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShowInterstitialAd: false
      }
    },
    methods: {
      showInterstitialAd() {
        this.isShowInterstitialAd = true
      },
      hideInterstitialAd() {
        this.isShowInterstitialAd = false
      },
      onerror(e) {
        console.log(e);
      }
    }
  }
</script>

<style>
  .ad-interstitial {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    /* #ifndef APP-NVUE */
    display: flex;
    z-index: 1000;
    /* #endif */
    flex-direction: column;
    justify-content: center;
  }

  .ad-draw {
    width: 700rpx;
    height: 400px;
  }
</style>