WeChat small program advertising native template ads

Native template ads

Small program ad traffic master action guide: document address

Developers can use the ad-custom component to create native template ad components, which automatically pull ad data and display it after it is created.

Ad size settings

Native template Ads do not allow direct style properties, the default width is 100% (width: 100%), the height is automatically equally proportional, so developers can set the width of the ad outer components to adjust the size of the ad. The width of the advertising outer component is related to the specific template, which can be referenced in the template editor documentation.

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

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

Ad event monitoring

Native template Ads automatically pull ads when they're created. Developers can listen for success or failure by listening to ads through the onload and onerror events of the ad-custom component.

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

Page({
  adLoad() {
    console.log('原生模板广告加载成功')
  },
  adError(err) {
    console.log('原生模板广告加载失败', err)
  }
})

The ad refreshes on a timed

Developers can pass in the ad-intervals parameter to implement a timed refresh of the ad when creating the native template 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-custom unit-id="xxxx" ad-intervals="30"></ad-custom>
</view>