灵犀-vue

方便Vue技术栈项目快速接入灵犀及及使用。

安装

 npm install @otcfe/lx-vue --save

或者

 yarn add --dev @otcfe/lx-vue

引入

main.js 入口js

import LX from  '@otcfe/lx-vue';

//通过传递 options 参数进行默认设置
Vue.use(LX, {
    cid: 'c_y7mh077n',           
    category: 'mt_market_data',  
    appnm: 'astrodata',          
    autoPageview: false                    
})

options | 参数 | 必输 | 默认 | 说明 | 备注 | |-----|------|-----|-----|------| | cid | 否 | | 灵犀申请cid| 如果每个页面分配一个CID请忽略,如果整个应用CID必填 | | category | 是 | | cid所属通道 | | | appnm | 是 | | 应用标识 | | | autoPageview | 是 |是否开启自动上报PV | |

API说明

灵犀Doc 先知平台

1.Vue组件内方法调用方式

1.1 初始化完成

灵犀SDK的引入已经封装到lx-vue中，无需重复引入，加载完成回调ready 返回promise。 使用：

    this.$lx.ready().then(()=>{

    })
    .catch(() => {
    ... // 错误处理
    })

1.2 pageView

手动发送PV方法调用方式。 使用：

this.$lx.pageView(valLab,environment,[cid])

参数 | 参数 | 必输 | 类型 | 说明 | |-----|------|-----|-----| | valLab | 是 | object | 设置PV相关扩展信息 | | environment | 是 | object | 设置相关环境信息| | cid | 否 | string | 设置页面cid。注意：如果整个应用一个cid,请忽略。 |

1.3 moduleView

模块曝光后发送此事件。 使用：

this.$lx.moduleView(valBid,valLab,options)

参数 | 参数 | 必输 | 类型 | 说明 | |-----|------|-----|-----| | valBid | 是 | string | moduleView 命令发送的统计数据中，事件体 val_bid 字段的值| | valLab | 是 | object | moduleView 命令发送的统计数据中，事件体 val_lab 字段的值 | | options.cid | 否 | string | 指定本次埋点上报的cid值，后续上报不受此值影响。注意：如果整个应用一个cid,请忽略。 |

options其它具体选项请看灵犀API文档

1.4 moduleClick

模块或组件发生点击行为后发送此事件，调用以下代码将立即发送moduleClick事件。 使用：

this.$lx.moduleClick(valBid,valLab,options)

参数 | 参数 | 必输 | 类型 | 说明 | |-----|------|-----|-----| | valBid | 是 | string | moduleClick 命令发送的统计数据中，事件体 val_bid 字段的值| | valLab | 是 | object | moduleClick 命令发送的统计数据中，事件体 val_lab 字段的值 | | options.cid | 否 | string | 指定本次埋点上报的cid值，后续上报不受此值影响。注意：如果整个应用一个cid,请忽略。 |

options其它具体选项请看灵犀API文档

1.5 pageDisappear（页面离开事件（仅建议单页面应用（SPA）场景中跳转路由时使用）

Web 灵犀默认支持页面停留时长，停留时长记录在 pageDisappear 事件的valLab.duration里(单位ms)。 使用：

this.$lx.pageDisappear(valLab,options)

请在页面离开时发送该命令，需要将页面停留时长放在 valLab 的 duration 属性中。示例代码：

let currentTime = +new Date;
this.$lx.pageDisappear({
    duration: currentTime - startTime
},options)

参数 | 参数 | 必输 | 类型 | 说明 | |-----|------|-----|-----| | valLab | 是 | object | pageDisappear 命令发送的统计数据中，事件体 val_lab 字段的值 | | options.cid | 否 | string | 指定本次埋点上报的cid值，后续上报不受此值影响。注意：如果整个应用一个cid,请忽略。 |

1.6 tag

设置追踪标记。 使用：

this.$lx.tag(tagIdentifier, tagKey, tagValue);
//或是
LX.tag(tagIdentifier, tagKey, tagValue);

1.6 其它

关于灵犀埋点其它事件跟踪类型目前还没维护，比如pay,moduleEdit,order。如果有需要欢迎大家提PR或者反馈。

2.指令引入方式

2.1 v-track-pageview

 <div class="home-container" v-track-pageview="{valLab,environment:{},[cid]}">
 ....
 </div>

参数

参数说明参考请 1.2

2.2 v-track-moduleview

<div class="home-container" v-track-moduleview="{valBid,valLab,options:{...cid}}">
...
</div>

参数

参数说明参考请 1.3

2.3 v-track-moduleclick

<div class="home-container" v-track-moduleclick="{valBid,valLab,options,actions}">
...
</div>

参数 | 参数 | 必输 | 类型 | 说明 | |-----|------|-----|-----| | actions | 否 | array | moduleClick绑定到dom上的事件类型 默认为 click,可以绑定多个 |

参数说明参考请 1.4

2.4 v-track-pagedisappear

<div class="home-container" v-track-pagedisappear="{valLab,options:{...cid}}">
...
</div>

参数说明参考请 1.5

贡献 PR

 git clone ...
 yarn run build  ...

其它



目前覆盖灵犀基本API基本使用。如果有更高层次的需求，欢迎大家建议与纠正。