# Native Template Advertising

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

# Advertising Size Settings

Native Template Advertising does not allow direct style attributes to be set. The default width is 100% (width: 100%), and the height is automatically proportional, so developers can set the width of the outer components of the advertisement to resize the advertisement. The width of the advertising outer layer component is related to the specific template, and you can refer to the template editor documentation for specifics.

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

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

# Advertising incident listening

Native template Ads automatically pull ads when they are created.Developers can use ad-custom components toonloadandonerrorevent listening ads pull successfully or fail, and can be closed byoncloseeventlistening ads.

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

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

# Ads are refreshed on a regular basis

Developers can create native template ads by entering thead-intervalsparameter to enable the timed refresh of the ads, and thead -intervals]]parameter is a number type in seconds.Note: The automatic refresh interval cannot be less than 30 seconds, so the parameter value ofad-intervalsmust be greater than or equal to 30.

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

# Listen to ads to hide

Special instructions for matrix grid advertising trigger type: When the user clicks the close button in the upper-right corner, the ad is hidden by controlling the element's style display: none. Developers can listen for hidden events by using the ad-custom component'sonhideevent to re-display ads when necessary by changing the display style.

<ad-custom unit-id="xxxx" bindhide="adHide"></ad-custom>