• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.advertising.AdComponent (Non-Full-Screen Ad Component)
2
3The AdComponent module provides the capability of displaying non-full-screen ads.
4
5> **NOTE**
6> 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.
7
8## Modules to Import
9
10```ts
11import { AdComponent } from '@kit.AdsKit';
12```
13
14## AdComponent
15
16AdComponent(ads: advertising.Advertisement[], displayOptions: advertising.AdDisplayOptions, interactionListener: advertising.AdInteractionListener, @BuilderParam adRenderer?: () => void, @Prop rollPlayState?: number): void
17
18Component that displays a non-full-screen ad.
19
20**System capability**: SystemCapability.Advertising.Ads
21
22**Parameters**
23
24| Name                        | Type                                                                               | Mandatory| Description                                                      |
25|-----------------------------|-----------------------------------------------------------------------------------|----|----------------------------------------------------------|
26| ads                         | advertising.[Advertisement](js-apis-advertising.md#advertisement)[]               | Yes | Array of ad objects.<br>**Atomic service API**: This API can be used in atomic services since API version 12.  |
27| displayOptions              | advertising.[AdDisplayOptions](js-apis-advertising.md#addisplayoptions)           | Yes | Ad display parameters.<br>**Atomic service API**: This API can be used in atomic services since API version 12.  |
28| interactionListener         | advertising.[AdInteractionListener](js-apis-advertising.md#adinteractionlistener) | Yes | Ad status change callback.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
29| adRenderer<sup>12+</sup>    | () => void                                                                        | No | Ad self-rendering.                                              |
30| rollPlayState<sup>15+</sup> | number                                                                            | No | Roll ad state. The value **1** means that the roll ad is played, and the value **2** means that the roll ad is paused. Other values are invalid and the previous playback state is not changed.          |
31
32**Example**
33
34```ts
35import { AdComponent, advertising } from '@kit.AdsKit';
36import { hilog } from '@kit.PerformanceAnalysisKit';
37
38@Entry
39@Component
40struct ShowNonFullScreenAd {
41  // Requested ad content.
42  private ads: Array<advertising.Advertisement> = [];
43  // Ad display parameters.
44  private adDisplayOptions: advertising.AdDisplayOptions = {
45    // Whether to mute the ad. By default, the ad is not muted.
46    mute: false
47  }
48
49  build() {
50    Column() {
51      // The AdComponent is used to show a non-full-screen ad.
52      AdComponent({
53        ads: this.ads, displayOptions: this.adDisplayOptions,
54        interactionListener: {
55          // Ad status change callback.
56          onStatusChanged: (status: string, ad: advertising.Advertisement, data: string) => {
57            switch (status) {
58              case 'onAdOpen':
59                hilog.info(0x0000, 'testTag', '%{public}s', 'onAdOpen');
60                break;
61              case 'onAdClick':
62                hilog.info(0x0000, 'testTag', '%{public}s', 'onAdClick');
63                break;
64              case 'onAdClose':
65                hilog.info(0x0000, 'testTag', '%{public}s', 'onAdClose');
66                break;
67            }
68          }
69        }
70      })
71        .width('100%')
72        .height('100%')
73    }.width('100%').height('100%')
74  }
75}
76```
77