@ohos.advertising.AdComponent (Ad Component)

This module provides the capability of displaying ads, covering native, roll, splash, and other ad styles.

NOTE

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.

Modules to Import

import { AdComponent } from '@kit.AdsKit';

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 native, roll, splash, and other ads.

Decorator type: @Component

System capability: SystemCapability.Advertising.Ads

Parameters

Parameter Name	Type	Mandatory	Description
ads	advertising.Advertisement[]	Yes	Array of ad objects. NOTE: For non-roll ad types, the component only displays the first data in the array. 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	Callback for ad status changes. Atomic service API: This API can be used in atomic services since API version 12.
adRenderer12+	() => void	No	Application self-rendered ad style. The application self-rendered ad style is a restricted capability. For details, please consult Traffic Monetization Official Website Customer Support. Atomic service API: This API can be used in atomic services since API version 20. Decorator type: @BuilderParam
rollPlayState15+	number	No	Used to provide the playback status of roll ads externally. Set to 1 for playing and 2 for paused. The default value is 2. Other values are invalid and do not change the previous playback status. The page where the roll ad is located needs to be associated with the property through @State. For usage methods, refer to the sample code. Atomic service API: This API can be used in atomic services since API version 20. Decorator type: @Prop

NOTE

To ensure that ads can be displayed correctly, this API must be used in conjunction with the ad request API. For effects and usage methods, refer to Native Ads, Roll Ads, and Splash Ads integration and display.

Example:

import { AdComponent, advertising } from '@kit.AdsKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  // Requested ad content
  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%')
  }
}

build

build(): void

A constructor used to create an AdComponent object.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.Advertising.Ads