WeChat Small Program Advertising Grid ads

Grid ads

Small program ad traffic master action guide: document address

Developers can use the ad component to create a Grid ad component that automatically pulls ad data and displays it once it is created.

Ad size settings

Grid ads don't allow direct style properties, the default width is 100% (width: 100%), and the height is automatically scaled, so developers can adjust the size of the ad by setting the width of the ad's outer components. Grid ads have a minimum size limit, with 5 forms of 331px and 8 forms of 294px.

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

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="white" grid-count="5"></ad>
</view>

Ad event monitoring

Grid 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" ad-type="grid" ad-theme="white" grid-count="5" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>

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

Ad theme style settings

The small program video advertising component provides black and white theme styles, developers can pass in ad-theme parameters to implement theme style selection when creating video ads, ad-theme parameters for string type, parameter value optional white, black

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="white"></ad>
</view>

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" ad-theme="black"></ad>
</view>

The number of ad grids is set

The small program video ad component provides black and white theme styles, developers can pass in the grid-count parameter to implement theme style selection when creating video ads, grid-count parameters are digital type, parameter values can be optional 5, 8

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" grid-count="5"></ad>
</view>

<view class="adContainer">
  <ad unit-id="xxxx" ad-type="grid" grid-count="8"></ad>
</view>