Mingle-track-sdk NPM

前言

一、buried-point-sdk是什么？

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

二、使用和例子

1.如何使用

(一)、第一种:umd方式

(1)、引入文件

 <script src="http://luckycola.com.cn/public/source/buriedPointSdk/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({
                // 当前网站是否是https协议 默认false
                isHttps: true,
                // 用户标识
                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>

(一)、第二种:npm方式

(1)、下载包

npm i buried-point-sdk

(2)、使用

import tracker from 'mingle-track-sdk';
 // 自动上报
let instance = new tracker({
                // 当前网站是否是https协议 默认false
                isHttps: true,
                // 用户标识
                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');
            }