@yangguoxin/fin-track NPM

fin-track

H5页面埋点SDK

快速上手

NPM 方式

NPM源需要切换小黑鱼NPM

安装

$ npm install @blackfish/fin-track --save

使用

import finTrack from '@blackfish/fin-track'

// 合适地方调用
// 全局配置
finTrack.config({
  channel: '01001000000200000'
})
// 页面埋点
finTrack.trackPage('1010100003')

// 事件埋点
finTrack.trackEvent('101010000300190000')

API

config

全局参数配置

参数	名称	传参类型	是否必填	默认值	说明
appId	appId	String	否	null	app环境、url有bf_ai参数会自动识别，设置无效
channel	渠道P值	String	否	cookie中pValue字段
useBaidu	集成百度埋点	Boolean	否	false	开启会加载百度sdk
baiduKey	百度HASH KEY	String	是	null	useBaidu: true 生效
autoCommitBaiduPage	是否触发百度页面埋点	否	Boolean	true	如果使用了百度埋点，默认在使用tackPage会自动触发百度埋点，不希望这样做可以设置false，在合适地方调用baiduTrackPage，完成百度页面埋点
debug	是否测试环境	Boolean	否	false	建议在非正式环境下使用，结合埋点工具可以进行调试

trackPage

页面埋点

// 简单
finTrack.trackPage(pageId, pageName?, duration?)
// 详细
finTrack.trackPage({
  pageId: 'pageId',
  pageName: '页面名称',
  url: '页面url',
  referer: '来源页url',
  duration: '页面停留时间'
})

参数名称	传参类型	默认值	是否必传	说明
pageId	String	''	是	页面ID
pageName	String	document.title	否	页面名称
url	String	location.href	否	页面url
referer	String	url `trcRef` 参数，没有再取 document.referrer	否	来源页面
duration	Number	0	否	停留时间
attributes	String	null	否	页面参数

trackPageStart

页面埋点开始

// 简单
finTrack.trackPageStart(pageId, pageName?)
// 详细
finTrack.trackPageStart({
  pageId: 'pageId',
  pageName: '页面名称',
  url: '页面url',
  referer: '来源页url'
})

参数名称	传参类型	默认值	是否必传	说明
pageId	String	''	是	页面ID
pageName	String	document.title	否	页面名称
url	String	location.href	否	页面url
referer	String	url `trcRef` 参数，没有再取 document.referrer	否	来源页面
attributes	String	null	否	事件参数

trackPageEnd

页面埋点结束

finTrack.trackPageEnd()

trackEvent

事件埋点

// 简单
finTrack.trackEvent(eventId, eventName?, eventType?, attributes?, scm?)
// 详细
finTrack.trackEvent({
  eventId: '事件ID',
  eventName: '事件名称',
  eventType: 0, // 1.曝光 2.点击
  attributes: '事件参数',
  duration: '事件时长',
  scm: 'super content model'
})

参数名称	传参类型	默认值	是否必传	说明
eventId	String	''	是	事件ID
eventName	String	''	否	事件名称
eventType	Number	2 (1-曝光 2-点击)	否	事件类型
attributes	String	null	否	事件参数
duration	Number	undefined	否	停留时间
scm	String	undefined	否	内容定位模型
el	DOM Object	undefined	否	曝光事件中期望sdk自动完成曝光埋点时必传

disTrackEvent

解除对某元素的事件监听，主要解除曝光事件的监听

参数名称	传参类型	默认值	是否必传	说明
el	DOM Object	undefined	是	解除对曝光元素的事件监听

trackEventStart

事件埋点开始

// 简单
finTrack.trackEventStart(eventId, eventName?, eventType?, attributes?, scm?)
// 详细
finTrack.trackEventStart({
  eventId: '事件ID',
  eventName: '事件名称',
  eventType: 0, // 1.曝光 2.点击
  attributes: '事件参数',
  scm: 'super content model'
})

参数名称	传参类型	默认值	是否必传	说明
eventId	String	''	是	事件ID
eventName	String	''	否	事件名称
eventType	Number	1 (1-曝光 2-点击)	否	事件类型
attributes	String	null	否	事件参数
scm	String	undefined	否	内容定位模型

trackEventEnd

事件埋点结束

finTrack.trackEventEnd(eventId)

baiduTrackPage

发送百度页面埋点数据，需要自己指定百度页面埋点发送时机使用

finTrack.baiduTrackPage(url?)

参数名称	传参类型	默认值	是否必传	说明
url	String	当前url的相对路径	否	百度埋点的页面相对url

setCampaignId

finTrack.setCampaignId('CampaignId')

getRefParams

获取来源数据

// 返回值
{
  referer: '', // 事件ID / 页面ID / referer url
  refSpm: [], // spm Array
  refScm: [], // scm Array
  spmString: 'spm String', // spm String
  scmString: 'scm String', // scm String
  campaignId: 'campaignId' // campaignId
}

create

创建一个实例，在单页面避免相互污染很有用处

let trackInstance = finTrack.create(options) // options 参数同config
// 页面埋点
trackInstance.trackPage(...)
// 事件埋点
trackInstance.trackEvent(...)

query 参数埋点

trcRef

trcRef用于记录从哪个来源打开当前页面，拼在url query参数上，h5和app保持一致，trcRef的值可以为eventId，pageId, url 支持自动识别解析

例如: https://h5.blackfish.cn/xxx?trcRef=101010000300190000

trcScm

trcScm用于记录从哪个内容来源打开当前页面，用法同上

trcCampaign

trcCampaign用于记录从哪个活动进来往往需要一层一层带到目标结束页

vue 埋点插件

基于vue对埋点api的二次封装，方便vue项目埋点

使用方法

import finTrack from '@blackfish/fin-track'
import helperVue from '@blackfish/fin-track/dist/helper-vue'

Vue.use(helperVue(finTrack))

this.$finTrack

同 finTrack api 使用方法一样

v-trc-event 指令

埋点指令

<!-- 数组形式，简单方式 -->
<!-- 点击埋点的写法 -->
<button v-trc-event="[ '101090000100230000', '点击事件名称', undefined, 'scm?', 'attributes?']">按钮</button>
<!-- 点击+曝光 -->
<button v-trc-event="[ '101090000100230000', '点击事件名称', '曝光事件名称?', 'scm?', 'attributes?']">按钮</button>

<!-- Object形式，详细方式 -->
<button v-trc-event="{
  eventId: '101090000100230000',
  events: [{
    eventType: 2, // 2.点击
    eventName: '事件名称',
    attributes: '事件参数',
    duration: '事件时长',
    scm: 'super content model'
  },{
    eventType: 1, // 曝光
    eventName: '曝光事件名称',
    attributes: '曝光事件参数',
    duration: '曝光事件时长',
    scm: 'super content model'
  }]
}">按钮</button>