web-event-tracking

v1.0.11

Published

2 years ago

event tracking in web

Downloads

0High
0Medium
0Low

huangkaizh

web-event-tracking event tracking web

web-event-tracking

web 埋点

查看 demo

引入方法：

script 标签

下载 index.min.js

<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"
    } //环境信息
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

web-event-tracking

引入方法：

script 标签

es6

修改默认配置：

方法说明：

1、点击事件

2、跳转至第三方支付平台

3、跳转至某外链

4、设置手机号

5、验证码输入正确

6、验证码输入错误

7、切换验证码

8、添加自定义事件

9、手动触发向服务器发送埋点数据（默认 5 秒发送一次，页面关闭时发送一次）

后台推送数据接口

各事件 json 格式

1、点击事件：

2、页面跳转：

3、页面切换：

4、前进后退:

5、hash 切换：

6、页面关闭后：

7、页面关闭前：

8、页面加载:

9、跳转至第三方支付

10、跳转至某外链

11、验证码输入正确

12、验证码输入错误

13、切换验证码