本章目录
就是 数据采集-数据处理-电商商城定制开发数据分析和挖掘,电商商城定制开发如用户停留时间,电商商城定制开发用户哪个按钮点的多,等
电商商城定制开发技术架构使用ts +
使用ts主要是在编译过程中发现问题,减少生产代码的错误,
使用rollup 应为 rollup打包干净,而webpack非常臃肿,可读性差,所以rollup非常适合开发SDK和一些框架,webpack 适合开发一些项目
1.目录结构设计
2.安装开发依赖
- npm install rollup -D
- npm install rollup-plugin-dts -D
- npm install rollup-plugin-typescript2 -D
- npm install typescript -D
3.配置rollup config js
- import ts from 'rollup-plugin-typescript2'
- import path from 'path'
- import dts from 'rollup-plugin-dts';
- export default [{
- //入口文件
- input: "./src/core/index.ts",
- output: [
- //打包esModule
- {
- file: path.resolve(__dirname, './dist/index.esm.js'),
- format: "es"
- },
- //打包common js
- {
- file: path.resolve(__dirname, './dist/index.cjs.js'),
- format: "cjs"
- },
- //打包 AMD CMD UMD
- {
- input: "./src/core/index.ts",
- file: path.resolve(__dirname, './dist/index.js'),
- format: "umd",
- name: "tracker"
- }
-
- ],
- //配置ts
- plugins: [
- ts(),
- ]
-
- }, {
- //打包声明文件
- input: "./src/core/index.ts",
- output:{
- file: path.resolve(__dirname, './dist/index.d.ts'),
- format: "es",
- },
- plugins: [dts()]
- }]
4. src type 定义类型
- /**
- * @requestUrl 接口地址
- * @historyTracker history上报
- * @hashTracker hash上报
- * @domTracker 携带Tracker-key 点击事件上报
- * @sdkVersionsdk版本
- * @extra透传字段
- * @jsError js 和 promise 报错异常上报
- */
- export interface DefaultOptons {
- uuid: string | undefined,
- requestUrl: string | undefined,
- historyTracker: boolean,
- hashTracker: boolean,
- domTracker: boolean,
- sdkVersion: string | number,
- extra: Record<string, any> | undefined,
- jsError:boolean
- }
-
- //必传参数 requestUrl
- export interface Options extends Partial<DefaultOptons> {
- requestUrl: string,
- }
-
- //版本
- export enum TrackerConfig {
- version = '1.0.0'
- }
- //上报必传参数
- export type reportTrackerData = {
- [key: string]: any,
- event: string,
- targetKey: string
- }
5.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
为什么要使用这个去上报
这个上报的机制 跟 XMLHttrequest 对比 navigator.sendBeacon 即使页面关闭了 也会完成请求 而XMLHTTPRequest 不一定
DOM事件监听
主要是给需要监听的元素添加一个属性 用来区分是否需要监听 target-key
js报错上报 error 事件 promise报错 unhandledrejection
- import { DefaultOptons, Options, TrackerConfig, reportTrackerData } from "../types/core";
- import { createHistoryEvnent } from "../utils/pv";
-
- const MouseEventList: string[] = ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover']
-
- export default class Tracker {
- public data: Options;
- private version: string | undefined;
-
- public constructor(options: Options) {
- this.data = Object.assign(this.initDef(), options)
- this.installInnerTrack()
- }
-
- private initDef(): DefaultOptons {
- this.version = TrackerConfig.version;
- window.history['pushState'] = createHistoryEvnent("pushState")
- window.history['replaceState'] = createHistoryEvnent('replaceState')
- return <DefaultOptons>{
-
- sdkVersion: this.version,
- historyTracker: false,
- hashTracker: false,
- domTracker: false,
- jsError: false
- }
- }
-
-
- public setUserId<T extends DefaultOptons['uuid']>(uuid: T) {
- this.data.uuid = uuid;
- }
-
- public setExtra<T extends DefaultOptons['extra']>(extra: T) {
- this.data.extra = extra
- }
-
- public sendTracker<T extends reportTrackerData>(data: T) {
- this.reportTracker(data)
- }
-
- private captureEvents<T>(MouseEventList: string[], targetKey: string, data?: T) {
- MouseEventList.forEach(event => {
- window.addEventListener(event, () => {
- this.reportTracker({ event, targetKey, data })
- })
- })
- }
-
- private installInnerTrack() {
- if (this.data.historyTracker) {
- this.captureEvents(['pushState'], 'history-pv')
- this.captureEvents(['replaceState'], 'history-pv')
- this.captureEvents(['popstate'], 'history-pv')
- }
- if (this.data.hashTracker) {
- this.captureEvents(['hashchange'], 'hash-pv')
- }
- if (this.data.domTracker) {
- this.targetKeyReport()
- }
- if (this.data.jsError) {
- this.jsError()
- }
- }
- //dom 点击上报
- private targetKeyReport() {
- MouseEventList.forEach(event => {
- window.addEventListener(event, (e) => {
- const target = e.target as HTMLElement
- const targetValue = target.getAttribute('target-key')
- if (targetValue) {
- this.sendTracker({
- targetKey: targetValue,
- event
- })
- }
- })
- })
- }
-
- private jsError() {
- this.errorEvent()
- this.promiseReject()
- }
- //捕获js报错
- private errorEvent() {
- window.addEventListener('error', (e) => {
- this.sendTracker({
- targetKey: 'message',
- event: 'error',
- message: e.message
- })
- })
- }
- //捕获promise 错误
- private promiseReject() {
- window.addEventListener('unhandledrejection', (event) => {
- event.promise.catch(error => {
- this.sendTracker({
- targetKey: "reject",
- event: "promise",
- message: error
- })
- })
- })
- }
- //上报
- private reportTracker<T>(data: T) {
- const params = Object.assign(this.data, data, { time: new Date().getTime() })
- let headers = {
- type: 'application/x-www-form-urlencoded'
- };
- let blob = new Blob([JSON.stringify(params)], headers);
- navigator.sendBeacon(this.data.requestUrl, blob)
- }
-
- }
-
-
-
6.工具函数 src/utils/pv
- export const createHistoryEvnent = <T extends keyof History>(type: T): () => any => {
- const origin = history[type];
- return function (this: any) {
- const res = origin.apply(this, arguments)
- var e = new Event(type)
- window.dispatchEvent(e)
- return res;
- }
- }
7.设置package json
main module 分别设置对应的js文件
files 设置打包之后的目录 我这儿是dist 具体看rollup config .js
- {
- "name": "zmy-tracker",
- "version": "1.0.5",
- "description": "",
- "main": "dist/index.cjs.js",
- "module": "dist/index.esm.js",
- "browser":"dist/index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "build": "rollup -c"
- },
- "keywords": ["前端","埋点","tracker"],
- "author": "",
- "files": ["dist"],
- "license": "ISC",
- "devDependencies": {
- "rollup": "^2.76.0",
- "rollup-plugin-dts": "^4.2.2",
- "rollup-plugin-typescript2": "^0.32.1",
- "typescript": "^4.7.4"
- }
- }
8.发布npm
tips:一定要使用npm 的源 不能使用淘宝镜像 否则 报错403
1.npm adduser
用户名 密码 邮箱 邮箱验证码
2. npm login
输入刚才的 用户名 密码 邮箱 验证码
3.npm publish 发布
发布的时候403 有可能是名字重复注意一下
4.npm 官网查看