X-Spotter

前端埋点工具

Description

支持无痕监听点击、输入改变

Usage

npm install x-spotter

<div data-x="1">click me</div>
<div data-y="2">click me</div>
<div data-x="1" data-y="2">click me</div>

// main.ts
import { ClickSpotter, InputSpotter } from "x-spotter";

new ClickSpotter()
	.addRule(
		"hello",
		(target) => {
			return target.dataset.x !== void 0;
		},
		(target) => {
			return target.dataset.x;
		}
	)
	.addRule(
		"world",
		(target) => {
			return target.dataset.y !== void 0;
		},
		(target) => {
			return target.dataset.y;
		}
	)
	.addRule(
		"!",
		(target) => {
			return target.dataset.x !== void 0 && target.dataset.y !== void 0;
		},
		(target) => {
			return target.dataset.x + target.dataset.y;
		}
	)
	.onSpot((name, value) => {
		// log hello 1 while <div> with attribute "data-x" was clicked.
		// log world 2 while <div> with attribute "data-y" was clicked.
		// log ! 3 while <div> with attribute "data-x" and "data-y" was clicked.
		console.log(name, value);
	});

new InputSpotter()
	.addRule(
		"input",
		() => {
			return target.value !== void 0;
		},
		(target) => {
			return target.value;
		}
	)
	.onSpot((name, value) => {
		// input value
		console.log(name, value);
	});

Advance

import { XSpotter } from "x-spotter";

class MySpotter extends XSpotter {
	constructor() {
		super();
	}
}

Design

API

• ClickSpotter
• InputSpotter
• UrlSpotter
• ExposeSpotter
• NetworkSpotter
• PerformanceSpotter
• ErrorSpotter
• ...