接入H5
集成 JS SDK
前置条件
直接引入icdp.js文件。
集成方式
直接通过 script 标签直接引入即可。 例如 HTML 文件，可以直接通过 script 标签的 src 属性进行直接引入。
注意：在引入时必须放在业务代码之前，即引入 JS SDK 的 script 标签必须放在前面，具体使用可以参照 public 文件夹中的 html 文件 demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>start</title>
</head>
<body>
<!-- 引入jssdk的script标签必须放置在所有业务代码之前 -->
<script src="icdp.js"></script>
<script>
window.onload = function() {
...业务代码
}
</script>
</body>
</html>
使用 JS SDK
初始化 JS SDK
使用 JS SDK 需要先初始化 SDK，在需要编写逻辑代码的最前面加入以下代码：
const icdp = window.icdp;
因为在集成的同时，icdp 被绑定在 window 上，因此可以直接获取到。
使用广告组件
在 html 文件的 body 部分直接新建一个元素 div，div 里的 ID 指的就是控制台对应的展位 ID，然后在 js 中使用对应的广告组件即可。
<body>
<div id="tczw001"></div>
</body>
支持的组件包括公告、单图、轮播、广告列表、广告弹窗。
其中 ID 表示控制台对应的展位 ID ，opts 则是组件参数。
- 此处使用的组件还有展位 ID，一定要是控制台侧所配置的组件和展位 ID。
- 另外，如果选择的是自定义组件， JS SDK 是不兼容的，默认自定义组件是下发数据，具体 UI 展示需要开发人员自己编写。
例如：在控制台侧配置了一个公告组件，展位 ID 为 gonggao001，则引入的组件就一定要是公告组件。
<!-- 代码层面使用 -->
<body>
<div id="gonggao001"></div>
<script>
const opts = {
id:'gonggao001',
// ...具体配置看demo
}
icdp.renderNotice(opts) 公告组件
</script>
</body>
icdp.renderNotice(opts) 公告组件
icdp.renderSingleGraph(opts) 单图组件
icdp.renderScroll(opts) 轮播组件
icdp.renderAdList(opts) 广告列表组件
icdp.preparePopup(opts) 弹窗组件
icdp.renderSplash(opts) 闪屏组件
icdp.renderCutting(opts) 切屏组件
opts 参数说明:
| 参数名称 | 参数类型 | 描述 | 是否必选 |
|---|---|---|---|
| id | String | 对应控制台的展位 ID | Y |
| adHost | String | 请求业务接口 URL | Y |
| athenaHost | String | 疲劳度上报地址 | Y |
| appId | String | 应用 ID（注意：这个 ID 要和 QAPM 的 app_id 配对使用） | Y |
| appVersion | String | 应用版本1.2.3 | N |
| uid | String | 用户 ID（如果控制台是试投则必填才能获取到相同 ID 的数据，如果已经上线则不是必填项） | N |
| deviceId | String | 手机的设备 ID（如果控制台是试投则必填才能获取到相同 ID 的数据，如果已经上线则不是必填项） | N |
| platform | String | 平台 H5 | Y |
| city | String | 所在城市 | N |
| gender | String | 0：全部 1：男性 2：女性 | N |
| click | function | 需要接管用户的点击事件，回调参数(e,userConfig)=>{ // 事件 + 用户配置} | N |
| qapmAppId | String | QAPM 的 AppID | N |
| qapmHost | String | QAPM 的地址 | N |
接入 QAPM 数据上报
QAPM 数据上报支持数据曝光和点击数据的数据量获取，只有接入了 QAPM 才能在控制台看到点击量和曝光量，所以建议接入 QAPM。
QAPM 已经在 JSDK 内置封装好了，但是需要初始化sdk时候传入 保证传入 qapmAppId、appVersion 、qapmHost 和uid 等参数进行初始化才能正常使用
这几个参数是确保使用的用户不是同一个，用作区分收集数据
- qapmAppId 是对应上面的 opts 参数中的 AppID 但值不一样，qapmAppId 只支持数字和 opts 中的 AppID 成对出现。
- 如果没有对应参数则会导致 SDK 初始化失败并且数据关联不到。
以下是演示代码：
<div id="tczw001"></div>
<script src="icdp.js"></script>
<script>
const icdp = window.icdp;
const opts = {
id:"tczw001", // 控制台已经配置的广告位ID
appId, // 控制台应用ID
adHost, // 投放广告拉取的地址 eg: https://wwww.bank.com/api/booth/findBoothDataByIdenityId
athenaHost, // 疲劳度上报地址 eg: https://www.bank.com/api/event/v2/form/report
qapmAppId, // qapm应用Id
qapmHost, // qapm上报地址 eg: http://www.xyz.com:30281/athena/
platform:"h5",
city:"深圳",
uid:"test",
deviceId:"test",
appVersion:"1",
gender:"1"
}
icdp.preparePopup(opts);
// qapmAppId 和 qapmHost 是数据上报和行为监控的地址和应用ID
</script>
广告展位示例
公告样式
单图样式
轮播样式
活动列表样式
弹窗样式
