This module provides the capability of displaying ads, including native, roll, and splash ads.
The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version.
AdComponent
AdComponent({
ads: advertising.Advertisement[],
displayOptions: advertising.AdDisplayOptions,
interactionListener: advertising.AdInteractionListener,
@BuilderParam adRenderer?: () => void,
@Prop rollPlayState?: number
}) Ad display component, which provides the capability of displaying ads, including native, roll, and splash ads.
Decorator: @Component
System capability: SystemCapability.Advertising.Ads
Parameters:
| Parameter | Type | Mandatory | Decorator | Description |
|---|---|---|---|---|
| ads | advertising.Advertisement[] | Yes | - | Array of ad objects. Note: For ads other than roll ads, only the first data record in the array will be displayed. Atomic service API: This API can be used in atomic services since API version 12. |
| displayOptions | advertising.AdDisplayOptions | Yes | - | Ad display parameters. Atomic service API: This API can be used in atomic services since API version 12. |
| interactionListener | advertising.AdInteractionListener | Yes | - | Ad status change callback. Atomic service API: This API can be used in atomic services since API version 12. |
| adRenderer12+ | () => void | No | @BuilderParam | Self-rendered ad format. The use of self-rendered ad formats in your app is subject to restrictions. For details, please consult customer service. Atomic service API: This API can be used in atomic services since API version 20. |
| rollPlayState15+ | number | No | @Prop | Roll ad playback status provided for your app. The value 1 indicates playing and the value 2 (default value) indicates paused. Other values are invalid and cannot change the original playback status. For the roll ad display page, this parameter must be associated with an attribute decorated with @State. For details, please refer to the sample code. Atomic service API: This API can be used in atomic services since API version 20. |
To ensure that ads can be correctly displayed, this API must be used together with the ad request API. For details about the effect and usage, please refer to the integration and display of native ads, roll ads, and splash ads.
Example:
import { AdComponent, advertising } from '@kit.AdsKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
// Ad content returned by the request.
private ads: advertising.Advertisement[] = [];
// Ad display parameters.
private adDisplayOptions: advertising.AdDisplayOptions = {};
build() {
Column() {
AdComponent({
ads: this.ads,
displayOptions: this.adDisplayOptions,
interactionListener: {
onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
switch (status) {
case 'onAdOpen':
hilog.info(0x0000, 'testTag', 'onAdOpen');
break;
case 'onAdClick':
hilog.info(0x0000, 'testTag', 'onAdClick');
break;
case 'onAdClose':
hilog.info(0x0000, 'testTag', 'onAdClose');
break;
}
}
}
})
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
}
}