嵌入看板操作说明
Quick Tracking 作为一个用户行为分析产品，可以独立使用，也可以嵌入其他系统作为一个解决方案。用户可以通过以下操作把Quick Tracking看板能力，通过iframe，嵌入到其他系统里，让更多用户可以看到用户行为数据。
看板嵌入主要分为两个环节：
构造看板外嵌链接
获取accessToken
构造看板外嵌链接
看板嵌入格式调整
默认格式
携带日期
携带日期+日期配置
携带全局筛选条件
隐藏看板功能部分
设置看板的高度和宽度
看板报错信息处理
1 构造看板外嵌链接
1.1 获取accessToken
1. 获取API ID、Secret
访问Quick Tracking管理控制台 - 采集信息（https://quickaplus-cn-shanghai.aliyun.com/setting/sdkInfo ），OpenAPI接口信息，
2. 获取看板ID
3. 生成accessToken
使用API ID、API Secret、看板ID作为请求的依据，按照如下方式请求，accessToken默认过期时间30分钟，考虑到安全问题，访问看板不续期，需要重新请求生成接口。
POST https://quickaplus-cn-shanghai.aliyun.com/accessToken/get?id={API ID}&secret={API Secret}&key={看板ID}
{
"traceId": "ed07364941e64d698c0b0ffa5fe9486b",
"expire": "2022-04-25 01:51:35",
"accessToken": "{accessToken}"
}
1.2 构造嵌入URL
1. 获取看板地址
访问Quick Tracking - 流量分析，选取需要嵌入的看板地址，请务必保证看板ID与生成accessToken的参数一致。
2. 拼接accessToken
https://quickaplus-cn-shanghai.aliyun.com/platform/23412201184654/analysis_insight/board/list/jr43936jfjir8cu1j8kcergvuq4d4roo?accessToken={accessToken}
2 看板嵌入格式调整
2.1 嵌入默认方式
看板嵌入的方式为iframe，通过获取secret和key的方式获取到accessToken，请在iframe的请求时候，带上accessToken 的字段，例如：http://portal.aplus.emas-poc.com/platform/69412108036695/analysis_insight/board/list/k11bi5k41stlhtiase4pv8di11rnqt0b?accessToken=XXXXX，在嵌入默认状态下系统的左导和顶导都会消失，看板的名称部分和日期筛选能力还会保留
2.2 携带日期
请在iframe的请求时候，带上fromDate和toDate的字段
例如：http://portal.aplus.emas-poc.com/platform/69412108036695/analysis_insight/board/list/k11bi5k41stlhtiase4pv8di11rnqt0b?accessToken=XXXXX&fromDate=2023-02-15&toDate=2023-02-22，看板的日期展示优选匹配URL中的日期
若设置的是单天的时间，将会以传入的fromDate作为显示日期时间，但是看板中请求的时间将使用传入的fromDate和toDate作为看板数据请求时间
2.4 携带全局筛选条件
在看板中URL中需要传入urlFilterConditions参数表示公共筛选条件
例如：http://portal.aplus.emas-poc.com/platform/69412108036695/analysis_insight/board/list/k11bi5k41stlhtiase4pv8di11rnqt0b?accessToken=XXXXX&urlFilterConditions=XXXX，看板的全局筛选展示优选匹配URL中的筛选条件
获取URLFilterConditions 字段方法
设置好想要的筛选条件，在控制台的ajax请求中筛选出 qt/hsf/board/bookmark/data的请求，并获取到globalCommonFilter字段的信息；
使用encodeURIComponent 方法封装
urlFilterConditions = encodeURIComponent(JSON.stringify(globalCommonConditions))
获取全局筛选条件：
2.5 隐藏看板功能部分
若想仅保留看板的图表部分，需要将原有iframe的方式后xframe=board_headless即可
<iframe src='http://portal.aplus.emas-poc.com/platform/98492112317344/analysis_insight/board/list/qeb95ogtvj868s2ag9pufkdp0l13s22b?accessToken=XXX&xframe=board_headless' />此时嵌入样式如下
2.7 隐藏看板筛选部分[2.4.16版本以上支持]
隐藏看板的全局筛选功能需要在URL中传入hideFilterCondition=1即可
2.8 嵌入看板高度与宽度设置
对于宽高的设置，默认宽度是自适应，最小宽度待定，若需要定制看板部分的宽高可以通过设置iframe宽度与高度即可；
<iframe src='http://portal.aplus.emas-poc.com/platform/98492112317344/analysis_insight/board/list/qeb95ogtvj868s2ag9pufkdp0l13s22b?accessToken=XXX&xframe=board_headless' height='100px' width='2000px' />问题描述
第三方使用Iframe嵌入QT看板时，由于浏览器本身跨域安全限制，无法获取Iframe中仪表板的高度，会导致看板出现滚动条的现象。
解决方案
在加载看板时，会将当前看板的高度通过postMessage的方式传到外部页面。外部页面可通过事件监听的方式获取看板的高度，将此告诉设置成您引入的iframe高度即可
//修改成您部署的QT地址
const quickTrackingURL = ['http://portal.aplus.emas-poc.com/'];
function messageListener(event) {
if (quickTrackingURL.includes(event.origin)) {
// 使用postMessage传出的高度,获取到高度后，需要自定义设置iframe的高度
console.log('Quick Tracking Dashboard Height:', event.data.QT_board_height);
}
}
// 进行监听
window.addEventListener('message', messageListener);
2.9 处理嵌入看板报错信息
在系统发生错误时，QT的看板默认会进行报错的弹窗提醒，若需要定制化处理报错信息时候，要通过postMessage的方式告知配置，此时QT将不再弹窗错误信息，而是会在每次报错的时候，将报错信息返回给您，您进行定制化封装和处理即可。
在使用方式上，若想隐藏现有系统的报错提示方式，需要将原有iframe的方式后errMsg=self即可，对于错误信息的监听是通过postmessage的方式透出
<iframe src='http://portal.aplus.emas-poc.com/platform/98492112317344/analysis_insight/board/list/qeb95ogtvj868s2ag9pufkdp0l13s22b?accessToken=XXX&errMsg=self' />//修改成您部署的QT地址
const quickTrackingURL = ['http://portal.aplus.emas-poc.com/'];
function messageListener(event) {
if (quickTrackingURL.includes(event.origin)) {
if(event.data.QT_err_msg){
// 这里会打印出QT传递来的msg错误信息
console.log('event.data.QT_err_msg',event.data.QT_err_msg)
}
}
}
window.addEventListener('message', messageListener);