广告联盟 API

注意：所有代码示例仅供参考，开发者可根据实际业务需求，自行编写、调整代码逻辑来满足自身的业务需求。

1、开屏广告

1.1、代码示例

在页面中引入了开屏广告组件，并传入对应参数。

html

<import name="vad-frame-open" src="vad-sdk/templates/vadFrameOpen.ux"></import>
<template>
  <div class="vad-open-wrapper">
    <vad-frame-open
      position-id="93d0e53490b64d8ea955f9020f6eb9bc"
      media-id="635f3699b4f243aeaf34d7d660df5e85"
      entry="/Home"
      is-render="{{isRender}}"
      @ad-load="onAdLoad"
      @ad-render="onAdRender"
      @ad-exposure="onAdExposure"
      @ad-error="onAdError"
      @ad-click="onAdClick"
    ></vad-frame-open>
  </div>
</template>
<style scoped>
  .vad-open-wrapper {
    width: 100%;
    height: 100%;
  }
</style>
<script>
  export default {
    data() {
      return {
        isRender: true, // 控制广告是否渲染
      };
    },
    onInit() {},
    onAdLoad(evt) {
      const adData = evt.detail.adData;
      console.log("onAdLoad:adData:::", evt.detail);
      if (adData.bidMode > 0) {
        // 竞价通知根据业务需要发送成功与失败通知
        evt.detail.sendNotice(true, adData.price);
      }
    },
    onAdRender(evt) {},
    onAdExposure(evt) {},
    onAdError(evt) {},
    onAdClick(evt) {},
  };
</script>

1.2、属性说明

属性名	类型	默认值	必填	说明
position-id	string	none	是	广告位id
media-id	string	none	是	媒体id
is-render	boolean	false	是	是否展示广告
entry	string	none	是	关闭广告，返回首页
@ad-load	event	none	是	广告加载触发事件 onAdLoad(evt: MouseEvent):void{} evt.detail.adData evt.detail.sendNotice 详情请通用事件：
@ad-error	event	none	否	广告异常触发事件
@ad-render	event	none	否	广告展现触发事件
@ad-exposure	event	none	否	广告曝光触发事件
@ad-click	event	none	否	广告点击触发事件
@ad-close-click	event	none	否	关闭广告点击触发事件

1.2.1 广告数据（evt.detail.adData）

编号	属性名	类型	说明
1	positionId	string	广告位 id
2	bidMode	number	竞价模式
3	price	number	价格

1.3、广告样式

类型	样式
竖屏

2、信息流广告

2.1、代码实例

在页面中引入信息流广告组件组合，并传入对应参数。

html

<import name="vad-button" src="vad-sdk/templates/vadButton.ux"></import>
<import name="vad-ad" src="vad-sdk/templates/vadAd.ux"></import>
<import name="vad-compliance" src="vad-sdk/templates/vadCompliance.ux"></import>
<import name="vad-drawer-compliance" src="vad-sdk/templates/vadDrawerCompliance.ux"></import>
<import name="vad-video" src="vad-sdk/templates/vadVideo.ux"></import>
<import name="vad-frame-feed" src="vad-sdk/templates/vadFrameFeed.ux"></import>
<import name="vad-score" src="vad-sdk/templates/vadScore.ux"></import>

<template>
  <div style="flex-direction: column;">
    <div style="background-color: #aaa;">
      <text>我不是广告：1-start</text>
    </div>
    <vad-frame-feed
      position-id="27886a42516544039a5bfc75655ae26d"
      media-id="635f3699b4f243aeaf34d7d660df5e85"
      is-render="{{option.isRender}}"
      close-position="{{option.closePosition}}"
      @ad-load="onFeedAdLoad"
      @ad-error="onAdError"
      @ad-click="onAdClick"
    >
      <vad-video if="{{ adData.materialMode === 'MODE_VIDEO'}}" id="vadVideo" position-id="{{adData.positionId}}" custom-style="{{customStyle.videoStyle}}"></vad-video>
      <div elif="{{adData.materialMode === 'MODE_GROUP' && adData.imageUrls}}">
        <image for="(index, item) in adData.imageUrls" src="{{item}}" style="width: {{adData.dimensions[0]}}px; height: {{adData.dimensions[1]}}px" tid="{{index}}"></image>
      </div>
      <image else src="{{adData.imageUrls[0]}}"></image>
      <div style="height: 125px; align-items: center;">
        <vad-ad position-id="{{adData.positionId}}"></vad-ad>
        <vad-button if="{{option.isApp}}" position-id="{{adData.positionId}}" custom-style="{{customStyle.buttonStyle}}"></vad-button>
      </div>
      <text style="{{customStyle.titleStyle}}">{{adData.title}}</text>
      <vad-compliance position-id="{{adData.positionId}}" grid="{{option.grid}}" custom-style="{{customStyle.complianceStyle}}" @command-click="onCommandClick"></vad-compliance>
      <vad-score if="{{option.isApp}}" position-id="{{adData.positionId}}"></vad-score>
      <!--vad-drawer-compliance 放到最低-->
      <vad-drawer-compliance
        visible="{{option.drawerVisible}}"
        position-id="{{adData.positionId}}"
        content-type="{{option.contentType}}"
        @visible-change="onDrawerVisibleChange"
        @tab-active="onTabActive"
      ></vad-drawer-compliance>
    </vad-frame-feed>
    <input type="button" @click="handleSend('27886a42516544039a5bfc75655ae26d')" if="{{option.isRender}}" value="竞价通知" ></input>
    <div style="background-color: #ccc;">
      <text>我不是广告：1-end</text>
    </div>
  </div>
</template>

<script>
import prompt from '@system.prompt';

export default {
  props: {
    positionId: String
  },
  // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
  data() {
    return {
      option: {
        isRender: false,
        grid: [1,2,3,4,5,6],
        contentType: '',
        drawerVisible: false,
        closePosition: {
          top: 20,
          right: 20
        },
        isDonwloadApp: false,
        isApp: false,
        materialMode: ''
      },
      customStyle: {
        buttonStyle: {},
        complianceStyle: {
          containerStyle: {},
          groupStyle: {
            justifyContent: 'center'
          }
        },
        titleStyle: {
          color: "#000",
          fontSize: "48px",
          fontStyle: "normal",
          fontWeight: 400,
          lineHeight: "60px",
          lines: 2,
          textOverflow: "ellipsis",
        },
        videoStyle: {
          containerStyle: {}
        }
      },
      adData: {},
      adDataStr: '',
      testShow: false,
      onSendNotice: () => {}
    }
  },
  onCommandClick(evt) {
    this.option.drawerVisible = true;
    this.option.contentType = evt.detail
  },
  onTabActive(evt) {
    this.option.contentType = evt.detail;
  },
  onFeedAdLoad(evt) {
    this.adData = evt.detail.adData;
    // evt.detail.sendNotice && evt.detail.sendNotice(false, 1);
    this.onSendNotice = evt.detail.sendNotice || (() => {});
    this.option.isRender = true;
    this.option.isApp = this.isApp(this.adData.app);
  },
  isApp(app) {
    return !!app;
  },
  onAdClick(evt) {
    console.log('page onAdClick', evt)
  },
  onAdError(data) {
    console.log('feed onAdError:::>', data)
  },
  handleSend(pid) {
    prompt.showDialog({
      title: '竞价通知',
      message: '点击空白页关闭，发送竞价成功通知\n1-竞争力不足\n2-返回超时\n3-报文不符合要求',
      buttons: [
        {
          text: '[1]',
          color: 'blue'
        },
        {
          text: '[2]',
          color: 'blue'
        },
         {
          text: '[3]',
          color: 'blue'
        }
      ],
      success: (data) => {
        this.onSendNotice && this.onSendNotice(false, this.adData.price, ~~data.index + 1);
      },
      cancel: (data) => {
        this.onSendNotice && this.onSendNotice(true, this.adData.price);
      }
    })
  },
  // 关联vad-video组件，视频播放与暂停
  onDrawerVisibleChange(evt) {
    this.option.drawerVisible = evt.detail;
  }
}
</script>

注意：信息流广告滚动重复曝光需要在当前页面的 onPageScroll(){} 中添加 this.$broadcast("vad-page-scroll", evt);

组件无法注册 onPageScroll 事件，需要通过$broadcast 方法进行广播传递到【广告组件】内部。
如多层组件嵌套，需要在中间层级组件加上 $listeners，否则【广告组件】无法接收事件。

html

<import name="feed-item" src="./FeedVideo.ux"></import>
<template>
  <!-- template里只能有一个根节点 -->
  <div class="wrapper">
    <feed-item $listeners></feed-item>
  </div>
</template>

<script>
  export default {
    onPageScroll(evt) {
      this.$broadcast("vad-page-scroll", evt);
    },
  };
</script>

2.2、属性说明

属性名	类型	默认值	必填	说明
vad-frame-feed				信息流组件标签
position-id	string	none	是	广告位id
media-id	string	none	是	媒体id
is-render	boolean	false	是	是否展示广告
close-position	object<number>	none	否	广告关闭按钮位置可配置四个方向的位置上右：{ top: 20, right: 20 } 上左：{ top: 20, left: 20 } 下右：{ bottom: 20, right: 20 } 下左：{ bottom: 20, left: 20 }
@ad-load	event	none	是	广告加载触发事件 onAdLoad(evt: MouseEvent):void{} 1、数据(所有广告数据) const adData = evt.detail.adData; 更多请查看：广告数据 2、发送竞价通知 evt.detail.sendNotice()
@ad-error	event	none	否	广告异常触发事件
@ad-render	event	none	否	广告展现触发事件
@ad-exposure	event	none	否	广告曝光触发事件
@ad-click	event	none	否	广告点击触发事件
@ad-close-click	event	none	否	关闭广告点击触发事件
vad-ad				广告标组件标签
position-id	string	none	是	广告位id
custom-style	object	none	否	广告标自定义样式
vad-button				下载按钮组件标签
position-id	string	none	是	广告位id
custom-style	object	none	否	按钮自定义样式
vad-video				视频播放组件标签
position-id	string	none	是	广告位id
custom-style	object	none	否	按钮自定义样式
@pause	event	none	否	暂停
@playing	event	none	否	播放

2.2.1、广告数据（evt.detail.adData）

编号	属性名	类型	说明
1	positionId	string	广告位id
2	token	string	ad token
3	dealId	string	标签id
4	bidMode	number	竞价模式，1-一价、2-二价、3-标签
5	price	number	价格，单位分/cpm
6	title	string	标题
7	description	string	描述
8	IconUrl	string	广告icon URL
9	imgDimensions	string[]	广告图片尺寸, [width, height]
10	materialMode	MODE_VIDEO \| MODE_GROUP \| MODE_LARGE \| MODE_SMALL \| MODE_UNKNOW	物料模式，枚举值如下： 1，MODE_VIDEO：视频模式 2，MODE_GROUP：组图模式 3，MODE_LARGE：大图模式 4，MODE_SMALL：小图模式 5，MODE_UNKNOW：无图模式或物料规格未知
11	ImgUrls	string[]	图片列表，组图模式下列表长度大于 1
12	adType	1 \| 2 \| 80 \| 81 \| 82	广告类型: 1-网址 2-应用 80-快应用 81-快游戏 82-奇美拉(小程序转快应用)

2.3、广告样式

基础组装样式举例，真实使用中可自定义组装信息流样式。

类型	样式
信息流大图
信息流上文下图
信息流上图下文
信息流组图
信息流左图右文
信息流左文右图

3、下载六要素

六要素合规要求，需要使用 vad-compliance 组件标签和 vad-drawer-compliance 弹框组件，两个组件需要并存。

3.1、代码示例

html

<import name="vad-compliance" src="vad-sdk/templates/vadCompliance.ux"></import>
<import
  name="vad-drawer-compliance"
  src="vad-sdk/templates/vadDrawerCompliance.ux"
></import>
<import name="vad-frame-feed" src="vad-sdk/templates/vadFrameFeed.ux"></import>

<template>
  <vad-frame-feed
    position-id="27886a42516544039a5bfc75655ae26d"
    media-id="635f3699b4f243aeaf34d7d660df5e85"
    is-render="{{option.isRender}}"
    @ad-load="onFeedAdLoad"
  >
    <vad-compliance
      position-id="{{adData.positionId}}"
      grid="{{option.grid}}"
      custom-style="{{customStyle.complianceStyle}}"
      @command-click="onCommandClick"
    ></vad-compliance>
    <!--vad-drawer-compliance 放到最低-->
    <vad-drawer-compliance
      visible="{{option.drawerVisible}}"
      position-id="{{adData.positionId}}"
      content-type="{{option.contentType}}"
      @visible-change="onDrawerVisibleChange"
      @tab-active="onTabActive"
    ></vad-drawer-compliance>
  </vad-frame-feed>
</template>

<script>
  export default {
    props: {
      positionId: String,
    },
    // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
    data() {
      return {
        option: {
          isRender: false,
          grid: [1, 2, 3, 4, 5, 6],
          contentType: "",
          drawerVisible: false,
        },
        customStyle: {
          buttonStyle: {},
          complianceStyle: {
            containerStyle: {},
            groupStyle: {
              justifyContent: "center",
            },
          },
        },
        adData: {},
      };
    },
    onCommandClick(evt) {
      this.option.drawerVisible = true;
      this.option.contentType = evt.detail;
    },
    onTabActive(evt) {
      this.option.contentType = evt.detail;
    },
    onFeedAdLoad(evt) {
      this.adData = evt.detail.adData;
      this.option.isRender = true;
    },
    // 关联vad-video组件，视频播放与暂停
    onDrawerVisibleChange(evt) {
      this.option.drawerVisible = evt.detail;
    },
  };
</script>

3.2、属性说明

3.2.1、vad-compliance 组件

属性名

类型

默认值

必填

说明

position-id

string

none

是

广告位id

grid

array

none

是

布局排序

枚举	说明
1	应用名称
2	应用版本
3	开发者
4	应用权限
5	功能介绍
6	应用名称

样式一（一行，一维数组）：[1,3,2,4,5,6]

样式二（多行，多维数组）：[[1,2],[2],[3,4,5]]

custom-style

object

none

否

六要素自定义样式

3.2.2、vad-drawer-compliance 弹框组件（隐私、权限、介绍)

属性名	类型	默认值	必填	说明
visible	boolean	false	是	组件的显示或隐藏
position-id	string	none	是	广告位id
content-type	string	none	是	privacy \| permissions \| description
@visible-change	event	none	是	vad-drawer-compliance弹框组件显示和隐藏时触发 onVisibleChange(evt: { detail: boolean }):void{}
@tab-active	event	none	是	vad-drawer-compliance弹框组件显示和隐藏时触发 type ContentType = privacy \| permissions \| description; onTabActive(evt: { detail: ContentType }):void{};

3.3、样式案例

类型	样式
6要素文字	开屏广告6要素文字展示
弹框	点击“隐私”,“权限”,“介绍”弹框反馈效果。

4、通用事件

4.1、onAdLoad(evt: MouseEvent):void{}

4.1.1、数据

javascript

const adData = evt.detail.adData;

4.1.2、发送竞价通知

sendNotice

javascript

# evt.detail.sendNotice
function sendNotice(
  isSuccess: boolean, // 是否成功
  bidPrice: number, // 竞价价格
  failedEnumValue?: number // 竞价失败原因枚举值
): void {}

# 竞价成功：发送竞价通知
evt.detail.sendNotice(true, 9.9);
# 竞价失败：发送竞价通知
evt.detail.sendNotice(false, 7.9, 1);

竞价失败原因枚举值

枚举值	枚举描述
1	竞争力不足
2	返回超时
3	报文不符合要求
10001	其他

5、广告预加载

sdk 提供preloadAd方法，可预加载一条广告数据，展示广告时优先取缓存中的广告数据，若取缓存不成功则找组件请求广告流程。

注：每个广告位缓存一条广告数据，使用preloadAd缓存广告数据，使用完成需要手动删除（deleteAd）广告数据，否则一直渲染缓存中的广告数据。

5.1、preloadAd(param: Param): Promise<AdData|ErrData>

this.$app.$def.vad_sdk
  .preloadAd({
    positionId: "27886a42516544039a5bfc75655ae26d",
    mediaId: "635f3699b4f243aeaf34d7d660df5e85",
    adType: this.$app.$def.vad_sdk.AD_TYPE.FEED,
  })
  .then((adData) => {
    // adData
    // 广告数据加载成功
  })
  .cache((errData) => {
    // errData
    // 广告数据加载失败
  });

5.1.1、param 参数说明

属性名	类型	必填	说明
positionId	string	是	广告位 id
mediaId	string	是	媒体 id
adType	number	是	广告类型，feed-信息流广告 , open-开屏广告

adType

信息流广告: this.$app.$def.vad_sdk.AD_TYPE.FEED;
开屏广告: this.$app.$def.vad_sdk.AD_TYPE.OPEN;

5.1.2、adData 广告数据

广告数据, 查看： 2.2.1

5.2、deleteAd(positionId: string): boolean

删除广告数据, 如有广告数据删除成功，返回 true，否则返回 false.

this.$app.$def.vad_sdk.deleteAd("27886a42516544039a5bfc75655ae26d");

5.3、clearAd()

删除所有广告数据

this.$app.$def.vad_sdk.clearAd();

广告联盟 API ​

1、开屏广告 ​

1.1、代码示例 ​

1.2、属性说明 ​

1.2.1 广告数据（evt.detail.adData） ​

1.3、广告样式 ​

2、信息流广告 ​

2.1、代码实例 ​

2.2、属性说明 ​

2.2.1、 广告数据（evt.detail.adData） ​

2.3、广告样式 ​

3、下载六要素 ​

3.1、代码示例 ​

3.2、属性说明 ​

3.2.1、vad-compliance 组件 ​

3.2.2、vad-drawer-compliance 弹框组件（隐私、权限、介绍) ​

3.3、样式案例 ​

4、通用事件 ​

4.1、onAdLoad(evt: MouseEvent):void{} ​

4.1.1、数据 ​

4.1.2、发送竞价通知 ​

sendNotice ​

5、广告预加载 ​

5.1、preloadAd(param: Param): Promise<AdData|ErrData> ​

5.1.1、param 参数说明 ​

5.1.2、adData 广告数据 ​

5.2、deleteAd(positionId: string): boolean ​

5.3、clearAd() ​

广告联盟 API

1、开屏广告

1.1、代码示例

1.2、属性说明

1.2.1 广告数据（evt.detail.adData）

1.3、广告样式

2、信息流广告

2.1、代码实例

2.2、属性说明

2.2.1、广告数据（evt.detail.adData）

2.3、广告样式

3、下载六要素

3.1、代码示例

3.2、属性说明

3.2.1、vad-compliance 组件

3.2.2、vad-drawer-compliance 弹框组件（隐私、权限、介绍)

3.3、样式案例

4、通用事件

4.1、onAdLoad(evt: MouseEvent):void{}

4.1.1、数据

4.1.2、发送竞价通知

sendNotice

5、广告预加载

5.1、preloadAd(param: Param): Promise<AdData|ErrData>

5.1.1、param 参数说明

5.1.2、adData 广告数据

5.2、deleteAd(positionId: string): boolean

5.3、clearAd()