WeChat Small Program Advertising Banner ads

Banner ads

Small program ad traffic master action guide: document address

Developers can use the ad component to create the Banner ad component, which automatically pulls ad data and displays it after it is created.

Ad size settings

Banner ads don't allow direct style properties, the default width is 100% (width: 100%), and the height is automatically scaled, so developers can set the width of the ad's outer components to resize the ad. The width of the outer component of the ad is not allowed to be less than 300px, and when the width is less than 300px, the width of the Banner ad is forced to adjust to 300px.

/* 外层组件的宽度可设置成100%或具体数值 */
.adContainer {
  width: 100%;
}

<view class="adContainer">
  <ad unit-id="xxxx"></ad>
</view>

Ad event monitoring

Banner ads automatically pull ads when they're created. Developers can listen to ads successfully or unsuccessfully through the onload and onerror events of the ad component, and ads can be turned off by onclose events.

<view class="adContainer">
  <ad unit-id="xxxx" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>

Page({
  adLoad() {
    console.log('Banner 广告加载成功')
  },
  adError(err) {
    console.log('Banner 广告加载失败', err)
  },
  adClose() {
    console.log('Banner 广告关闭')
  }
})

The ad refreshes on a timed

Developers can pass in the ad-intervals parameter to implement a timed refresh of the ad when they create the Banner ad, which is a numeric type in seconds. Note: Automatic refresh intervals must not be less than 30 seconds, so the parameter value of ad-intervals must be greater than or equal to 30.

<view class="adContainer">
  <ad unit-id="xxxx" ad-intervals="30"></ad>
</view>