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