【埋点】前端埋点打点库数据统计库

article/2025/10/8 8:42:29

前端埋点sdk

前言
- 埋点包括在IOS、Android、H5、小程序等前端埋点，也包括后端业务埋点。这里仅仅讲讲这些年和产品经理、运营撕逼上百个回合的前端埋点内容。
一、buried-point-sdk是什么？
二、使用和例子
- 1.如何使用
- - (一)、第一种:umd方式
  - - (1)、引入文件
    - (2)、使用
  - (一)、第二种:npm方式
  - - (1)、下载包
    - (2)、使用
- 2.使用例子
- - (1)、主动按钮行为的上报
  - (2)、自动按钮行为的上报
  - (3)、hash行为的上报
  - (4)、history行为的上报
  - (5)、前端报错行为的上报

前言

为什么要埋点？现在的互联网公司越来越关注转化、新增、留存，而不是简单的统计PV、UV。而完整的数据采集是一切的前提。

埋点包括在IOS、Android、H5、小程序等前端埋点，也包括后端业务埋点。这里仅仅讲讲这些年和产品经理、运营撕逼上百个回合的前端埋点内容。

一、buried-point-sdk是什么？

是一款开箱即用的前端页面埋点JSSDK,可以对指定元素行为、js报错、页面展示、hash变更、history变更等行为进行数据打点上报,支持自定义上报接口地址

官网:https://www.npmjs.com/package/mingle-track-sdk

二、使用和例子

1.如何使用

(一)、第一种:umd方式

(1)、引入文件

 <script src="http://luckycola.com.cn/public/sources/tracker/dist/index.js"></script>

(2)、使用

<!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',// 当前网站是否为httpsisHttps: 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=promisejsError: 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>

(一)、第二种:npm方式

(1)、下载包

npm i buried-point-sdk

(2)、使用

import tracker from 'mingle-track-sdk';// 自动上报
let instance = new tracker({
// 合法验证的唯一key标识,必填,如果您还没有,请前往官网(http://luckycola.com.cn)获取colaKey: 'NaTu16773439832446NZkH6',// 当前网站是否为httpsisHttps: 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=promisejsError: true});// 主动上报document.getElementById('mybtn').onclick = function() {instance.setUserId('99999');instance.setExtra({tesh: 'heo!!!'});instance.sendTracker({targetKey: '提交',event: 'click'});throw new Error('error');}