📅 最后修改于: 2023-12-03 15:23:28.202000 🧑 作者: Mango
在前端开发中，我们通常需要收集用户在页面上的行为数据以进行数据统计和分析。而打点则是一种常见的实现方式，本文将介绍如何在三个js文件中打点。
埋点文件是一个独立的js文件，负责处理收集和发送打点数据的逻辑。我们可以定义一个全局变量或使用ES6模块化的方式导出一个对象，作为埋点文件的输出。
我们定义一个叫做tracker的对象，用于收集和发送打点数据。
// tracker.js
const tracker = {
// 收集打点信息
track(event) {
const data = { event };
// 发送数据到服务器
fetch('/api/track', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' },
})
.catch(error => console.error(error));
},
};
export default tracker;
我们在tracker对象中定义了一个track方法，用于收集打点信息。打点信息通常包括：
event：事件名称，用于标识当前打点的事件类型，比如点击、滚动等；...args：事件参数，用于记录事件发生时的一些数据，比如点击的区域、元素、位置等。而埋点文件的核心是发送打点数据到服务器。在示例中，我们使用fetch方法发送POST请求并将打点数据转换为JSON字符串作为请求体，请求的携带请求头Content-Type为application/json。
我们在需要进行打点的页面中引入埋点文件，可以使用<script>标签或ES6的import语句。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="./tracker.js"></script>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
// index.js
import tracker from './tracker.js';
// 使用 track 方法进行打点
tracker.track('view_home');
组件文件是打点逻辑的具体实现，我们可以在需要打点的组件中引入埋点文件并定义打点事件。
我们在组件中定义一个点击事件，并在点击时调用tracker对象的track方法。
// button.js
import tracker from './tracker.js';
class Button {
constructor() {
const element = document.createElement('button');
element.textContent = 'Click Me';
element.addEventListener('click', this.handleClick.bind(this));
this.element = element;
}
handleClick() {
tracker.track('click_button', { name: 'button_name' });
}
}
export default Button;
我们在Button组件中定义了一个click事件，并在点击时调用tracker.track方法记录按钮被点击的次数。
我们在页面中引入Button组件文件，并将其实例化，然后将其添加到DOM中。
// index.js
import Button from './button.js';
const app = document.getElementById('app');
const button = new Button();
app.appendChild(button.element);
配置文件是打点系统的入口，包括打点数据的配置、发送方式的配置等。
我们需要定义一些配置项，包括打点数据的发送地址、发送方式、打点数据内容等。
// config.js
const config = {
apiUrl: '/api/track',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
};
export default config;
在示例中，我们定义了一个叫做config的对象，包括：
apiUrl：打点数据的发送地址，用于指定打点数据的上报地址；method：发送方式，用于指定打点数据的发送方式，GET或POST；headers：请求头，用于指定发出的打点数据的MIME类型。我们在需要打点的js文件中引入配置文件，并修改tracker.js中的发送方式和请求头，使其与配置文件中的配置保持一致。
// tracker.js
import config from './config.js';
const tracker = {
// 收集打点信息
track(event, ...args) {
const data = { event, ...args };
// 发送数据到服务器
fetch(config.apiUrl, {
method: config.method,
body: JSON.stringify(data),
headers: config.headers,
})
.catch(error => console.error(error));
},
};
export default tracker;
在三个js文件中进行打点需要进行如下操作：
tracker对象和track方法，负责处理收集和发送打点数据的逻辑；tracker.track方法；