To use mini program banner ads, you must first obtain ad authorization. For details, see Ad Authorization. Developers can create banner ads using the banner ad component. Once created, the component will automatically fetch and display ad data. Ad size settings
Banner ads themselves cannot directly have their styles set through the style attribute. The default width is 100% (width: 100%), and the height is calculated proportionally. So developers can adjust the ad size by setting the width of the outer component. The width of the outer component must not be less than 300 px. If the width is less than 300 px, the banner ad width will be forcibly adjusted to 300 px.
<view class="adContainer">
<ad unit-id="xxxx"></ad>
</view>
.adContainer { width: 100%;}
Ad event listening
After creation, the banner ad will be automatically fetched. Developers can use the onload and onerror events of the ad component to listen for successful or failed ad fetches.
<view class="adContainer">
<ad unit-id="xxxx" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
</view>
Page({
adLoad() {
console.log('Banner ad loaded successfully')
},
adError(err) {
console.log('Banner ad loading failed', err)
}
})