@yangguoxin/fin-track-web

fin-track-web

H5页面埋点SDK

快速上手

CDN 引入

<script>
  (function() {
    var track = document.createElement("script")
    track.src = "//static.blackfish.cn/bff/fin-track-web/fin-track-web.min.js"
    track.onload = function() {
      finTrackWeb
        .config({
          bizLine: '19',
          useBaidu: true, // 开启百度埋点
          baiduKey: '1451f9abd2d8aa8486075f7b8cd3b006' // 网址百度的hash code
        })
        .trackPage() // 发送页面埋点
    }
    var s = document.getElementsByTagName("script")[0]
    s.parentNode.insertBefore(track, s)
  })()
</script>

NPM 方式

NPM源需要切换小黑鱼NPM

安装

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

使用

import finTrackWeb from '@blackfish/fin-track-web'

// 合适地方调用
// 全局配置
finTrackWeb.config({
  bizLine: '19'
})
// 页面埋点
finTrackWeb.trackPage({pageId: '090020015'})

// 事件埋点
finTrackWeb.trackEvent('090020018003')

API

config

全局参数配置

参数名称	传参类型	默认值	说明
bizLine	String	09	业务线
autoCheck	Boolean	true	是否自动切换埋点方
channel	String	'' (app和小程序cookie，pValue字段)	渠道P值
useBaidu	Boolean	false	是否使用百度埋点
baiduKey	String	根据域名切到对应HASH	百度HASH KEY
disableBdPageCommit	Boolean	false	默认在使用tackPage会自动触发百度埋点，不希望这样做可以设置false，在合适地方调用baiduTrackPage，完成百度页面埋点

ps: 百度埋点自动识别hash已有

// [官网m站]
'm\\.blackfish\\.cn': '1b054982ae09179e461552e4dc2d11cd',
// [官网pc站]
'www\\.blackfish\\.cn': 'b77bb6b058b63ad11827b818b8893377',
// [APP内嵌h5]
'h5\\.blackfish\\.cn\\/m': '1451f9abd2d8aa8486075f7b8cd3b006',
// [商城]
'h5\\.blackfish\\.cn\\/fsh': '2d250904c7957213ab6c33516eb73e5a',
// [推广页面]
'p\\.blackfish\\.cn': 'ee2a01bf5ecee8eeff105c07bd2ce4a5',
// [贷款超市]
'lmf\\.blackfish\\.cn': '0732fd6a26c8fc29dd79d8db4f94c119'

trackPage

页面埋点

finTrackWeb.trackPage({
  pageId: 'pageId',
  pageName: '页面名称',
  url: '页面url',
  referer: '来源页url',
  duration: '页面停留时间',
  bizLine: '业务线'
})

参数名称	传参类型	默认值	是否必传	说明
pageId	String	''	是	页面ID
pageName	String	document.title	否	页面名称
url	String	location.href	否	页面url
referer	String	document.referrer	否	来源页面
duration	Number	0	否	停留时间
bizLine	String	全局配置业务线	否	业务线

trackEvent

事件埋点

// 简单方式
finTrackWeb.trackEvent('事件ID')
// 带参数
finTrackWeb.trackEvent('事件ID', '参数')
// 详细设置
finTrackWeb.trackEvent({
  eventId: '事件ID',
  eventName: '事件名称',
  eventType: 0, // 0-通用，1-点击，2-下拉，3-上拉，4-滚动，5-输入
  attributes: '事件参数',
  duration: '事件时长',
  bizLine: '业务线'
})

参数名称	传参类型	默认值	是否必传	说明
eventId	String	''	是	事件ID
eventName	String	''	否	事件名称
eventType	Number	1 (0-通用，1-点击，2-下拉，3-上拉，4-滚动，5-输入)	否	事件类型
attributes	String	null	否	事件参数
duration	Number	0	否	停留时间
bizLine	String	取当前页bizLine，没有会取全局bizLine	否	业务线

baiduTrackPage

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

finTrackWeb.baiduTrackPage('页面相对路径url') // 例如：/m/demo

create

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

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