Front-end embedded sdk
Preface
Why bury it? Today's Internet companies are paying more and more attention to conversion, new additions, and retention, rather than simply counting PV and UV. And complete data collection is the prerequisite for everything.
The focus includes front-end focus on IOS, Android, H5, mini programs, etc., as well as back-end business focus. Here I will just talk about the front-end content that I have had hundreds of rounds with product managers and operations over the years.
1. What is buried-point-sdk?
It is an out-of-the-box front-end page embedding JSSDK that can report data on specified element behavior, js error reporting, page display, hash changes, history changes and other behaviors. It supports custom reporting interface addresses.
Official website: https://www.npmjs.com/package/mingle-track-sdk
2. Use and examples
1. How to use
(1), the first: umd method
(1), import files
<script src="http://luckycola.com.cn/public/sources/tracker/dist/index.js"></script>
(2), use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./dist/index.js"></script>
</head>
<body>
<button id="mybtn">提交</button>
<button id="mybtn">提交22</button>
<button id="mybtn" target-key="buttom">提交33</button>
<script>
window.onload = function () {
// 自动上报
let instance = new tracker({
// 合法验证的唯一key标识,必填,如果您还没有,请前往官网(http://luckycola.com.cn)获取
colaKey: 'NaTu16773439832446NZH6',
// 当前网站是否为https
isHttps: false,
// 用户标识
uuid: '111',
// 数据上报接口
requestUrl: 'http://localhost:8080',
// 是否进行history行为(history-pv)进行打点统计,包括pushState、replaceState、popstate行为
historyTracker: true,
// 是否进行hash行为(hash-pv)进行打点统计,包括hashchange行为
hashTracker: true,
// 对具有target-key属性的dom进行行为打点,行为包括(['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover'])
domTracker: true,
// 自定义参数
extra: {
name: 'zhoumingle'
},
// 是否进行对报错进行捕获打点,分为两类: 1、捕获js报错,targetKey=message,event=error; 2、捕获promise 错误, targetKey=reject,event=promise
jsError: true
});
// 主动上报
document.getElementById('mybtn').onclick = function() {
instance.setUserId('99999');
instance.setExtra({
tesh: 'heo!!!'
});
instance.sendTracker({
targetKey: '提交',
event: 'click'
});
throw new Error('error');
}
}
</script>
</body>
</html>
(1), second type: npm method
(1), download package
npm i buried-point-sdk
(2), use
import tracker from 'mingle-track-sdk';
// 自动上报
let instance = new tracker({
// 合法验证的唯一key标识,必填,如果您还没有,请前往官网(http://luckycola.com.cn)获取
colaKey: 'NaTu16773439832446NZkH6',
// 当前网站是否为https
isHttps: false,
// 用户标识
uuid: '111',
// 数据上报接口
requestUrl: 'http://localhost:8080',
// 是否进行history行为(history-pv)进行打点统计,包括pushState、replaceState、popstate行为
historyTracker: true,
// 是否进行hash行为(hash-pv)进行打点统计,包括hashchange行为
hashTracker: true,
// 对具有target-key属性的dom进行行为打点,行为包括(['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover'])
domTracker: true,
// 自定义参数
extra: {
name: 'zhoumingle'
},
// 是否进行对报错进行捕获打点,分为两类: 1、捕获js报错,targetKey=message,event=error; 2、捕获promise 错误, targetKey=reject,event=promise
jsError: true
});
// 主动上报
document.getElementById('mybtn').onclick = function() {
instance.setUserId('99999');
instance.setExtra({
tesh: 'heo!!!'
});
instance.sendTracker({
targetKey: '提交',
event: 'click'
});
throw new Error('error');
}
Note: If you don’t have colaKey yet, please go to the official website to get it:
Official website address: http://luckycola.com.cn
2.Usage examples
Online demos: Click to view >>>
As follows (example):
(1) Reporting of active button behavior
(2) Reporting of automatic button behavior
(3) Reporting of hash behavior
(4) Reporting of history behavior
(5) Reporting of front-end error reporting
