# GridAdvertisement

Weixin Mini Program Ad Traffic Master Operating Instructions: Document Address Developers can use the ad component to create a grid ad component. The grid ad component automatically pulls ad data and displays it when created.

# Advertising Size Settings

Grid ads are not allowed to set style properties directly. The default width is 100% (width: 100%), and the height is calculated automatically in proportion, so developers can set the width of the outer components of the ads to resize the ads. Plaid ads have a minimum size limit, with 5 shapes of 331px and 8 shapes of 294px.

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

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

# Advertising incident listening

Grid ads are automatically pulled when created.Developers can use the ad component toonloadandonerrorevent listening ads pull successfully or fail, and can be closed byoncloseeventlistening ads.

<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 广告关闭')
  }
})

# Advertising Theme Style Setting

Weixin Mini Program The video ad component provides both black and white theme styles that developers can pass in when creating video adsThead-themeargument is a character string.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>

# Setting the number of ad grids

Weixin Mini Program The video ad component provides both black and white theme styles that developers can pass in when creating video adsgrid-countparameters implement theme style selection,GRID-countarguments are of a numerical type and parameter values are 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>