Uni app applet app's advertising realization path: banner information flow advertising

Last one （Uni-app Development App And plug-ins how to open advertising profits in the future ：uni-AD_ Zhimi technology blog ） Practical for you uni-app  The developers of introduced the official  uni-ads  Advertising plug-ins , But only a brief introduction  uni-ads  Types of advertisements in , The following series will introduce you to different types of application advertising , And plug-in code .

---

Banner Or information flow advertising display scene is very flexible , Common presentation scenarios are ： Top of article , At the top of the details page , The middle of the first screen . It is suggested that information flow advertisements should not be placed at the bottom

Information flow advertising （ perhaps Banner） Count as App And the most common advertisements in applets . It usually appears at the top or bottom of the article , At the top of the details page 、 And the middle of the first screen of information flow . But in terms of advertising effect , The advertising effect of the information flow at the bottom is relatively poor .

App The advertising source of the end is Tencent youlianghui 、 Toutiao pangolin 、 Kwai advertising alliance and other mainstream advertising channels, as well as some DCloud Direct advertising composition , stay DCloud Of uni-AD Background registration

• H5 End 、 The advertisement of wechat applet is made by DCloud Provide directly
• Other applets are provided by the applet platform
• Platform difference description

APP	H5	Wechat applet	Alipay applet	Bytedance applet	QQ Applet	Apply it quickly	360 Applet	Kwai Mini program	Jingdong applet	Baidu applet
2.5.2+ Support	3.4.8 Support	Support	I won't support it	Support	Support	I won't support it	I won't support it	Support	I won't support it	Support

Attribute specification

Property name	type	The default value is	explain	Platform differences
adpid	String		uni-AD App advertising id	App, Wechat applet 3.4.8+
unit-id	String		Advertising unit id, You can create a new one in the traffic main module of the applet management background	Wechat applet 、 Bytedance applet ( Minimum version 1.19.0+)、QQ Applet 、 Kwai Mini program
ad-intervals	number		The interval between automatic refresh of advertisements , The unit is in seconds , Parameter value must be greater than or equal to 30（ When this parameter is not passed in Banner Advertisements will not refresh automatically ）	Wechat applet ( Base library 2.3.1+)
data	Object	Optional	Advertising data , adopt plus.ad.getAds ( Reference sample code ), Priority over adpid	App
appid	String		App app ID	Baidu applet
apid	String		Small program advertising space ID	Baidu applet
ad-left	Number		type by feeds The left margin of the advertisement （px）, Must be greater than 0	QQ Applet
ad-top	Number		type by feeds When the advertising margin （px）, Must be greater than 0	QQ Applet
ad-width	Number		type by feeds Advertising width （px）, Default 100%, The maximum value is screen width , The minimum value is 265	QQ Applet
ad-height	Number		type by feeds Advertising height （px）, Minimum 85, Maximum 160	QQ Applet
type	String	feed		QQ Applet 、 Baidu applet 、 Bytedance applet 、 Kwai Mini program
@load	EventHandle		Callback of successful advertisement loading
@error	EventHandle		Callback of advertisement loading failure ,event.detail = {errCode: }
@close	EventHandle		The callback of advertisement closing

type attribute Baidu

Type of advertisement ：banner/feed, It needs to match the code bit type on the Ivy League platform .

type attribute headlines

The type of advertising , Default banner, The specific types are ：banner、video（ video ）、large（ Big picture ）、lImg（ The picture on the left and the text on the right ）、rImg（ The picture on the right and the text on the left ）, The default value is banner

type attribute QQ

value	explain
banner	banner advertisement branch 1 Map and 3 chart 1 writing .3 chart 1 The background color of the advertisement 、 The text color will be adjusted according to the background color of the ancestor node , There are three cases of dark background 、 Light background and white background
swip	Page turning advertisement ,1 chart 1 writing , Will cover the entire applet , Show 、 Hidden logic needs to be controlled by the developer
card	Card advertisement ,1 chart , Can be turned off
feeds	Custom advertising , Flexible control of advertising 、 Left margin and width height , To adapt to other contents of the interface . Can be monitored size Event gets the actual width and height

App And wechat app ad Component does not type attribute , It can be used for banner, It can also be used for information flow .

Wechat applet

Wechat applet platform supports information flow (Banner) Advertising components  <ad unit-id=""></ad>, Provided by wechat

uniAD It also supports information flow (Banner) Advertising components  <ad adpid=""></ad>, from uniAD Provide

3.4.10 Previous version ad The component runs to the wechat applet and uses the advertising component provided by wechat

3.4.10+ Later versions are adjusted as follows

1. Components only set  unit-id, Use the... Provided by wechat ad Components , Logic unchanged
2. The component has set up  adpid  attribute , Compiled into  uniad, See the introduction below
3. The component has set up  adpid  and  unit-id  attribute , Compiled into  uniad, See the introduction below

uniad yes uni-app Built in components of the framework ,uniad Component supports uniAD Advertising and wechat native advertising , Ask first uniAD, If you have opened it for direct use, otherwise switch to wechat advertising , This process will have 3 Second delay

uniad Component dependency uniAD Wechat applet plug-in and coral advertising plug-in provided by Tencent

If you want to use only wechat advertisements on wechat ,App or Web Use uniAD Conditional compilation can be used

Conditional compilation example

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

Be careful

• <ad>  Component is a native component , stay webview There will be hierarchy problems on the page , At the same time, it is impossible to <swiper> 、<scroll-view>  Used in components . but app-nvue、 The new version of wechat applet and the new version of headline applet support the same layer rendering , So there is no hierarchy problem . and app-vue、QQ Platforms such as applets have hierarchy problems .
• There is no height when there is no advertisement , Release height when closing advertisements , The width is determined by the parent container
• App platform , Because the advertising component obtains the advertising data internally and sets the component size after calculation , There will be interface jitter , Can be passed ahead of time plus.ad.getAds Get advertising data , Set up data after adpid Will be invalid
• Wechat applet  <ad>  Component does not support triggering tap Wait for touch related events
• Android platform nvue Of  <list>  Used in components  <ad>  when , Width attribute must be specified <ad width="750rpx" />, because  <list>  There is an automatic memory recovery mechanism , Components that are not in the scope of the screen are not created , The size cannot be obtained inside the component
• app-nvue Of  <recycle-list>  Nesting is not supported within components  <ad>
• Guangdiantong has the probability of repeated advertisements , You can request advertising data according to your needs , It is recommended that the single time is greater than 1 strip (plus.ad.getAds) To reduce the repetition rate
• HBuilderX2.8+ edition Android Platform update pangolin （ Today's headline ） advertisement SDK No longer supports x86 type CPU, Can't run to x86 type cpu Simulator .
• <ad>  The component test advertising space is shown in the figure above and below ,uniAD The advertising space applied for in the background defaults to the picture on the left and the text on the right
• HBuilderX Standard base real machine operation test information flow advertising space logo （adpid） by ：1111111111, Wechat applet and H5 The platform will not provide test advertising space for the time being

Example

<template>
  <view class="content">
    <!-- adpid="1111111111"  This advertising space logo is only on HBuilderX Effective in standard base , For testing only  -->
    <!--  Advertising space applied by the advertising background (adpid) You need to customize the base / Cloud packaging / Take effect after local packaging  -->
    <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 The way ( only App Platform support ), This calling method is not recommended , The call is more complex , And not cross platform , Developers also need to manually handle caching 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) {
      //  only APP Platform support 
      plus.ad.getAds({
          adpid: '1111111111',  //  Replace with the advertising space logo you applied for , This advertising space logo is only on HBuilderX Effective in standard base , For testing only 
          count: 1,   //  The number of ads , Default  3
          width: 300  //  Get the right advertisement according to the width ( Company px)
        },
        (res) => {
					//  Be careful :  Advertising data can only be used once 
          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 Simulate the effect of screen insert advertisement @Interstitial

<template>
  <view>
    <!--  Use  ad/ad-draw  Simulate the effect of screen insert advertisement  -->
    <view>
      <button @click="showInterstitialAd"> Display the plug-in advertisement </button>
    </view>
    <view class="ad-interstitial" v-if="isShowInterstitialAd">
      <view class="ad-view">
        <ad class="ad" adpid="1111111111" @error="onerror"></ad>

        <!-- ad-draw  Only in nvue Page effective  -->
        <!-- <ad-draw class="ad-draw" adpid="1507000690"></ad-draw> -->
      </view>
      <view class="close-area">
        <!--  according to z Set the style of the close button for your own page style  -->
        <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>