@alipay-inc/mpaas-mcdp-h5-render NPM

接入文档

Package信息

包名：@alipay-inc/mpaas-mcdp-h5-render 类型：公共类库适用场景：Web网页功能简介：支持在h5进行弹屏、公告、轮播（banner）、浮标四种类型的展位投放，和个性化广告投放能力。

接入配置

mpaas-mcdp-h5-render提供两种接入方式：HTML文件内script标签引入及代码内npm包引用。

HTML标签引入

在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引入

添加依赖

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>

init配置参数

属性名	类型	必填	默认值	说明	备注
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为必填项

MPConfig 配置参数

属性名	类型	必填	默认值	说明	备注
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有值，则必填
  }
});