copper-tracker

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 监听
• 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

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 站小满