文档

嵌入看板操作说明

更新时间:

Quick Tracking 作为一个用户行为分析产品,可以独立使用,也可以嵌入其他系统作为一个解决方案。用户可以通过以下操作把Quick Tracking看板能力,通过iframe,嵌入到其他系统里,让更多用户可以看到用户行为数据。

看板嵌入主要分为两个环节:

  1. 构造看板外嵌链接

    1. 获取accessToken

    2. 构造看板外嵌链接

  2. 看板嵌入格式调整

    1. 默认格式

    2. 携带日期

    3. 携带日期+日期配置

    4. 携带全局筛选条件

    5. 隐藏看板功能部分

    6. 设置看板的高度和宽度

    7. 看板报错信息处理

1 构造看板外嵌链接

1.1 获取accessToken

1. 获取API ID、Secret

访问Quick Tracking管理控制台 - 采集信息(https://quickaplus-cn-shanghai.aliyun.com/setting/sdkInfo ),OpenAPI接口信息,image.png

2. 获取看板IDimage.png

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}" }image.png

1.2 构造嵌入URL

1. 获取看板地址

访问Quick Tracking - 流量分析,选取需要嵌入的看板地址,请务必保证看板ID与生成accessToken的参数一致image.png

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,在嵌入默认状态下系统的左导和顶导都会消失,看板的名称部分和日期筛选能力还会保留

image

2.2 携带日期

请在iframe的请求时候,带上fromDate和toDate的字段

  1. 例如:http://portal.aplus.emas-poc.com/platform/69412108036695/analysis_insight/board/list/k11bi5k41stlhtiase4pv8di11rnqt0b?accessToken=XXXXX&fromDate=2023-02-15&toDate=2023-02-22,看板的日期展示优选匹配URL中的日期

  2. 若设置的是单天的时间,将会以传入的fromDate作为显示日期时间,但是看板中请求的时间将使用传入的fromDate和toDate作为看板数据请求时间

image

2.4 携带全局筛选条件

  1. 在看板中URL中需要传入urlFilterConditions参数表示公共筛选条件

    例如:http://portal.aplus.emas-poc.com/platform/69412108036695/analysis_insight/board/list/k11bi5k41stlhtiase4pv8di11rnqt0b?accessToken=XXXXX&urlFilterConditions=XXXX,看板的全局筛选展示优选匹配URL中的筛选条件

  1. 获取URLFilterConditions 字段方法

    1. 设置好想要的筛选条件,在控制台的ajax请求中筛选出 qt/hsf/board/bookmark/data的请求,并获取到globalCommonFilter字段的信息;

    2. 使用encodeURIComponent 方法封装

      1. urlFilterConditions = encodeURIComponent(JSON.stringify(globalCommonConditions))

获取全局筛选条件

image

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' />

此时嵌入样式如下

image

2.7 隐藏看板筛选部分[2.4.16版本以上支持]

隐藏看板的全局筛选功能需要在URL中传入hideFilterCondition=1即可image

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将不再弹窗错误信息,而是会在每次报错的时候,将报错信息返回给您,您进行定制化封装和处理即可。image

在使用方式上,若想隐藏现有系统的报错提示方式,需要将原有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);

  • 本页导读 (0)