微信小程序 廣告·Grid廣告

Grid 廣告

小程序廣告流量主操作指引：文檔地址

開(kāi)發(fā)者可以使用 ad 組件創(chuàng)建 Grid 廣告組件，Grid 廣告組件在創(chuàng)建后會(huì)自動(dòng)拉取廣告數(shù)據(jù)并顯示。

廣告尺寸設(shè)置

Grid 廣告不允許直接設(shè)置樣式屬性，默認(rèn)寬度為100%（width: 100%），高度會(huì)自動(dòng)等比例計(jì)算，因此開(kāi)發(fā)者可以設(shè)置廣告外層組件的寬度調(diào)整廣告的尺寸。格子廣告有最小尺寸限制，5個(gè)的形態(tài)為331px，8個(gè)的形態(tài)為294px。

/* 外層組件的寬度可設(shè)置成100%或具體數(shù)值 */
.adContainer {
  width: 100%;
}

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

廣告事件監(jiān)聽(tīng)

Grid 廣告在創(chuàng)建后會(huì)自動(dòng)拉取廣告。開(kāi)發(fā)者可以通過(guò) ad 組件的 onload 和 onerror 事件監(jiān)聽(tīng)廣告拉取成功或失敗，可以通過(guò) onclose 事件監(jiān)聽(tīng)廣告被關(guān)閉。

<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 廣告關(guān)閉')
  }
})

廣告主題樣式設(shè)置

小程序視頻廣告組件提供黑、白兩種主題樣式，開(kāi)發(fā)者可以在創(chuàng)建視頻廣告時(shí)傳入ad-theme參數(shù)實(shí)現(xiàn)主題樣式選擇，ad-theme參數(shù)為字符串類(lèi)型，參數(shù)值可選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>

廣告格子個(gè)數(shù)設(shè)置

小程序視頻廣告組件提供黑、白兩種主題樣式，開(kāi)發(fā)者可以在創(chuàng)建視頻廣告時(shí)傳入grid-count參數(shù)實(shí)現(xiàn)主題樣式選擇，grid-count參數(shù)為數(shù)字類(lèi)型，參數(shù)值可選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>