包名：@alipay-inc/mpaas-mcdp-h5-render 类型：公共类库 适用场景：Web网页 功能简介：支持在h5进行弹屏、公告、轮播（banner）、浮标四种类型的展位投放，和个性化广告投放能力。
mpaas-mcdp-h5-render提供两种接入方式：HTML文件内script标签引入及代码内npm包引用。
在HTML文件内，进行以下操作
-
<head>中添加以下代码进行引用
<script type="text/javascript" src="https://unpkg.com/@alipay-inc/mpaas-mcdp-h5-render/dist/index.js" />
-
<body>末尾处，添加script标签，进行配置初始化，init参数见下表
<script type="text/javascript">
// init方法支持随时调用，每次调用都会使用当次传入的参数请求数据，更新广告数据
McdpView.init({
appId: 'my-appId', //必填
workspaceId: 'my-workspaceId', //必填
reportURL: 'my-url', //必填
uploadURL: 'my-url', //必填
userId: 'userId', //非必填
utdid: 'utdid' //非必填
});
</script>
- 在调用展位的dom元素上绑定类名及展位码，例如
<div class="mcdp-view-wrap" data-mcdp-code="my-code"></div>
- 添加依赖
npm install @alipay-inc/mpaas-mcdp-h5-render
- 在文件项目源码内，用npm的方式引入（以es6语法为例），init参数见下表
import McdpView from '@alipay-inc/mpaas-mcdp-h5-render';
// init方法支持随时调用，每次调用都会使用当次传入的参数请求数据，更新广告数据
McdpView.init({
appId: 'my-appId', //必填
workspaceId: 'my-workspaceId', //必填
reportURL: 'my-url', //必填
uploadURL: 'my-url', //必填
userId: 'userId', //非必填
utdid: 'utdid' //非必填
});
- 在调用展位的dom元素上绑定类名及展位码，例如
<div class="mcdp-view-wrap" data-mcdp-code="my-code"></div>
| 属性名 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| appId | string | 是 | - | 展位应用ID | 获取展位信息必需 |
| workspaceId | string | 是 | - | 展位工作控件ID | 获取展位信息必需 |
| reportURL | string | 是 | - | 请求路径host | 获取展位信息必需 |
| uploadURL | string | 是 | - | 埋点上报数据host | 埋点上报数据必需 |
| userId | string | 否 | - | 用户自定义，不传为空 | 用以统计PV,UV |
| utdid | string | 否 | - | 用户自定义，不传为空 | 用以统计PV,UV |
| useMP | boolean | 否 | false | 是否使用 MGS SDK 发送请求 | |
| MPConfig | Object | 否 | - | MGS 相关配置，详细见下方 MPConfig 配置参数 | 若 useMP 为 true，则MPConfig.MP为必填项 |
| 属性名 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| MP | Object | 是 | - | MGS JSSDK导出的MP对象 | 若 useMP 为 true，则MPConfig.MP为必填项 |
| extraHttpConfig | Object | 否 | - | 额外的请求配置 | 详情见 MGS JSSDK 文档 |
| extraHeaderInfos | Object | 否 | - | 额外的请求头配置 | 详情见 MGS JSSDK 文档 |
| signType | string | 否 | - | 加签方法 ，不传则不加签 | 详情见 MGS JSSDK 文档 |
| secretKey | string | 否 | - | 加签密钥，如果signType有值，则必填 | 详情见 MGS JSSDK 文档 |
| encryptType | number | 否 | - | 加密方法类型 ，不传则不加密，详情见上方加密原子能力 | 详情见 MGS JSSDK 文档 |
| publicKey | string | 否 | - | 公钥，如果encryptType有值，则必填 | 详情见 MGS JSSDK 文档 |
useMP = true 时需要使用 MGS JSSDK，使用方法请参考对应文档，参考代码如下：
import MP from '@alipay-inc/mpaas-mgs-sdk';
import McdpView from '@alipay-inc/mpaas-mcdp-h5-render';
McdpView.init({
appId: 'my-appId', //必填
workspaceId: 'my-workspaceId', //必填
reportURL: 'my-url', //必填
uploadURL: 'my-url', //必填
userId: 'userId', //非必填
utdid: 'utdid' //非必填
useMP: true,
MPConfig: {
MP: MP, //必填
signType: 'md5', //非必填，加签使用
secretKey: 'xxxxxxx', //如果signType有值，则必填
encryptType: 1, //非必填，加密使用
publicKey: 'xxxxxxx' //如果encryptType有值，则必填
}
});| 广告类型 | 属性名 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|---|
| rotation (轮播) | class | string | 是 | mcdp-view-wrap | 展位容器 | 显示展位信息必需 |
| data-mcdp-code | string | 是 | - | 展位码应用ID | 获取展位信息必需 | |
| buoy (浮标) | class | string | 是 | mcdp-view-wrap | 展位容器 | 显示展位信息必需 |
| data-mcdp-code | string | 是 | - | 展位码应用ID | 获取展位信息必需 | |
| notice (公告) | class | string | 是 | mcdp-view-wrap | 展位容器 | 显示展位信息必需 |
| data-mcdp-code | string | 是 | - | 展位码应用ID | 获取展位信息必需 | |
| banner (弹屏) | class | string | 是 | mcdp-view-wrap | 展位容器 | 显示展位信息必需 |
| data-mcdp-code | string | 是 | - | 展位码应用ID | 获取展位信息必需 |