1.0.1 • Published 2 years ago
copper-tracker v1.0.1
Copper-tracker
A tracker SDK
Function description
src core
- PV: 页面访问量,即 PageView, 用户每次对网站的访问均被记录
- 主要监听了 history 和 hash
- history API: go back forward pushState replaceState
- history 无法通过 popstate 监听 pushState replaceState 只能重写其函数 在 utils/pv
- hash 使用 hashchange 监听
- 主要监听了 history 和 hash
- UV(独立访客):即 Unique Visitor, 访问你的网站的一台电脑客户端为一个访客
- 用户唯一表示: 可以在登录之后通过接口返回的 ID 进行设置值,-> 提供了 setUserId
- 也可以使用 canvas 指纹追踪技术
重点 navigator.sendBeacon()
为什么要用这个去上报?
因为这个上报的机制与 XMLHttpRequest 对比 navigator.sendBeacon 即使在关闭了页面的情况下也会完成请求,而 XMLHttpRequest 则不一定。
解决函数调用时,ts this 的问题
思路 1: 在 tsconfig.json 文件中,将
noImplicitThis
的值改为 false{ "noImplicitThis":false, }
思路 2: 在函数创始之初,设置一个假参数,并指定类型为 any
const origin = history[type]; return function (this: any) { const res = origin.apply(this, arguments); return res; };
DOM 事件监听
主要是给需要监听的元素添加一个属性,来区分是否需要监听 target-key.
How to build a ts npm project with rollup
- init node, rollup and ts
- under root folder create
rollup.config.js
file
- under root folder create
npm init -y
tsc --init
- Install dev dependencies.
npm install rollup -D
npm install rollup-plugin-dts -D
npm install rollup-plugin-typescript2 -D
npm install typescript -D
- Config rollup
import path from "path";
import ts from "rollup-plugin-typescript2";
import dts from "rollup-plugin-dts";
export default [
// the first object aims to build ts to js
{
input: "./src/core/index.ts",
output: [
{
file: path.resolve(__dirname, "./dist/index.esm.js"),
/**
* es => import export
* cjs => require exports
* umd => AMD CMD global
*/
format: "es",
},
{
file: path.resolve(__dirname, "./dist/index.cjs.js"),
format: "cjs",
},
{
file: path.resolve(__dirname, "./dist/index.js"),
format: "umd",
name: "copper_tracker",
},
],
plugins: [ts()],
},
// the second object aims to produce .dts for the whole project
{
input: "./src/core/index.ts",
output: {
file: path.resolve(__dirname, "./dist/index.d.ts"),
format: "es",
},
plugins: [dts()],
},
];
- config tsconfig.json
{
"compilerOptions": {
// only change this. others keep!
"module": "ESNext"
}
}
- config package.json
{
"scripts": {
// add build command
"build": "rollup -c"
},
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"browser": "dist/index.js",
"types": "dist/types/index.d.ts",
"file": ["dist"]
}
Special Thanks to:
- B 站小满