web-event-tracking
web 埋点
引入方法:
script 标签
<script src="./lib/web-event-tracking/index.min.js"></script>
es6
npm i web-event-tracking -S
import 'web-event-tracking/dist/index.min'
修改默认配置:
window.tracking.setConfig({
trackingServerUrl: 'http://tracking.abc.com/', // 埋点服务器接口url
appid: 'b1651f4562174c06',
token: 'kgfk8i987kgfkjhwer\u1234',
distinctIdKey: 'distinctId', // cookie中用来存区分用户的key
sourceKey: 'source', // url中用来标记来源渠道的key
defaultSource: 'message', // 默认来源渠道
interval: 5000 // 发送间隔,单位毫秒
})
方法说明:
1、点击事件
window.tracking.click(e)
2、跳转至第三方支付平台
window.tracking.toThirdPartyPayment('alipay')
3、跳转至某外链
window.tracking.toExternalUrl('http://www.bcd.com')
4、设置手机号
window.tracking.setPhone('13512347852')
5、验证码输入正确
window.tracking.submitRightCaptcha()
6、验证码输入错误
window.tracking.submitWrongCaptcha()
7、切换验证码
window.tracking.switchCaptcha()
8、添加自定义事件
window.tracking.addEvent({
event: 'customEvent', // 自定义事件名称
... // 其他自定义属性
})
9、手动触发向服务器发送埋点数据(默认 5 秒发送一次,页面关闭时发送一次)
window.trackingPost()
后台推送数据接口
url: http://tracking.abc.com/
method:Post
dataFormat(数据格式):
{
"appid": "e1a51f2257934e99",
"token": "MzExNTg4NjkzNjMwNzc3\u003d",
"events": [
`{
event: "pushState",
currentUrl: "http://www.abc.com#pageA", //从哪个页面(当前页面)跳转过去
targetUrl: "http://www.abc.com#pageB", //跳到哪个页面
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}`,
...
]
}
各事件 json 格式
1、点击事件:
{
event: "click",
pageWidth: 1903, //html页面宽度,对应document.documentElement.offsetWidth
pageHeight: 3083, //html页面高度,对应document.documentElement.offsetHeight
screenWidth: 1920, //屏幕宽度,对应window.screen.width
screenHeight: 1080, //屏幕高度,对应window.screen.height
screenAvailWidth: 1920, //屏幕可用宽度,对应window.screen.availWidth
screenAvailHeight: 1040, //屏幕可用高度,对应window.screen.availHeight
windowInnerWidth: 1920, //窗口内部宽度,对应window.innerWidth
windowInnerHeight: 969, //窗口内部高度,对应window.innerHeight
position: [100, 200], //页面中的 xy 坐标,对应e.pageX和e.pageY
targetEle: {
nodeName: "DIV", //目标元素类型
id: "submit", //目标元素 ID
className: "submit-btn red", //目标元素 class
},
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
currentUrl: "http://www.abc.com?word=abc", //当前页面 url
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
2、页面跳转:
{
event: "pushState",
currentUrl: "http://www.abc.com#pageA", //从哪个页面(当前页面)跳转过去
targetUrl: "http://www.abc.com#pageB", //跳到哪个页面
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
3、页面切换:
{
event: "replaceState",
currentUrl: "http://www.abc.com#pageA", //从哪个页面(当前页面)跳转过去
targetUrl: "http://www.abc.com#pageB", //跳到哪个页面
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
4、前进后退:
{
event: "popstate",
currentUrl: "http://www.abc.com#pageA", //当前页面 url
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
5、hash 切换:
{
event: "hashChange",
sourceUrl: "http://www.abc.com#pageA", //从哪个页面跳转过来
currentUrl: "http://www.abc.com#pageB", //跳到哪个页面(当前页面)
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
6、页面关闭后:
{
event: "unload",
currentUrl: "http://www.abc.com#pageA", //当前页面 url
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
7、页面关闭前:
{
event: "beforeunload",
currentUrl: "http://www.abc.com#pageB", //当前页面 url
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
8、页面加载:
{
event: "load",
currentUrl: "http://www.abc.com#pageB", //当前页面 url
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
9、跳转至第三方支付
{
event: "toThirdPartyPayment",
thirdPartyPayment: "alipay", //第三方支付类别(微信、支付宝等)
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
10、跳转至某外链
{
event: "toExternalUrl",
externalUrl: "http://www.bcd.com",
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
11、验证码输入正确
{
event: "submitRightCaptcha",
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
12、验证码输入错误
{
event: "submitWrongCaptcha",
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}
13、切换验证码
{
event: "switchCaptcha",
distinctId: "1123", //区分用户的 ID,第一次打开页面时新建 uuid,存放在 cookie 中
phone: "18812345236", //用户手机号
source: "message", //渠道来源,message:短信, 自媒体: weMedia
time: 12345678921, //点击事件客户端发生时间,long 型时间戳
"env": {
"browser": {
"name": "chrome",
"chrome": "80.0.3987.132",
"type": "chrome"
}, //浏览器信息
"system": {
"name": "win",
"win": "10"
}, //系统信息
"string": "win10|chrome80.0.3987.132"
} //环境信息
}