@ohos.advertising.AutoAdComponent (Carousel Ad Display Component)

This module provides the capability of displaying carousel 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.

Modules to Import

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

AutoAdComponent

AutoAdComponent({
  adParam: advertising.AdRequestParams,
  adOptions: advertising.AdOptions,
  displayOptions: advertising.AdDisplayOptions,
  interactionListener: advertising.AdInteractionListener
})

Component used to display carousel ads.

Decorator: @Component

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

System capability: SystemCapability.Advertising.Ads

Parameters:

Parameter	Type	Mandatory	Decorator	Description
adParam	advertising.AdRequestParams	Yes	-	Ad request parameters.
adOptions	advertising.AdOptions	Yes	-	Ad configuration parameters.
displayOptions	advertising.AdDisplayOptions	Yes	-	Ad display parameters.
interactionListener	advertising.AdInteractionListener	Yes	-	Ad status change callback.

Example:

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

@Entry
@Component
struct Index {
  // Ad request parameters.
  private adRequestParams: advertising.AdRequestParams = {
    // Ad unit ID.
    adId: 'h5xkz3mbr2',
    // Ad type.
    adType: 8,
    // Ad unit width, in vp.
    adWidth: 360,
    // Ad unit height, in vp.
    adHeight: 57
  };
  // Ad configuration parameters.
  private adOptions: advertising.AdOptions = {};
  // Ad display parameters.
  private adDisplayOptions: advertising.AdDisplayOptions = {
    // Carousel interval, in milliseconds. The value ranges from 30000 to 120000.
    refreshTime: 30000
  };
  private ratio: number = -1;

  aboutToAppear() {
    if (this.adRequestParams.adWidth && this.adRequestParams.adHeight) {
      this.ratio = this.adRequestParams.adWidth / this.adRequestParams.adHeight;
    }
  }
  
  build() {
    Column() {
      AutoAdComponent({
        adParam: this.adRequestParams,
        adOptions: this.adOptions,
        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%')
        .aspectRatio(this.ratio)
    }
    .width('100%')
    .height('100%')
  }
}

The following figure shows the preview.

[h2]build

build(): void