埋点方案分析

埋点分析1 监听点击埋点

实现1： 使用document.onclick监听所有标签的点击事件, 获取点击的元素，判断点击的是否是文本，若是则直接请求并记录到数据库

缺点：虽然可以对获取的文本进行分析，再检出需要记录的，但是不同项目之间需要重新写分析代码，无法做到开箱即用,若是不做分析，什么都存了，也不利于统计数据的使用

实现2： 在实现1上进行改进，对记录元素设置标签属性data-analytics-key对需要存储的进行标签定位，也就是开发者还是需要对标签进行修改，但是改的相对方便一点，只需要给对应的标签加上一个属性即可，对于无文本的热点如图片可以设置data-analytics-value，默认逻辑先判断是否有文本，没有则取data-analytics-value，这里建议对key的设置可以是个变量，以防止配置变更

缺点：开发者需要对整个项目进行优化，在需要被记录的文本设置属性，但改动量不大，对项目影响也不大

埋点分析2 监听url埋点

1.多页面，特点，页面之间切换资源都会重新加载，可以通过在每个页面引入一个js脚本即可实现访问埋点 具体实现：window.onload后获取信息直接记录

多页面多用于新闻资讯类，通常是前后端不分离技术

2.单页面，特点，页面之间切换为逻辑切换，页面不会被刷新，这里只需在主入口引入脚本 具体实现：vue环境下监听history.replaceState具体实现会有脚本，引入即可。react环境下差不多，但是有些差异，脚本有一些差异，引入即可。

单页面目前主流的开发技术，前后端分离，开发效率高，用的人更多。

数据库设计

1. 项目总表 project 用于配置项目，因为此方案应对不同系统 id // 项目id name // 项目名 create_date // 项目创建时间

2. 项目对应事件配置表 project_event_xml 对项目进行事件配置 只有这里配置的事件触发才会被存下来 project_id //项目关联id event_key // 事件键值 到时候埋到html代码中的key event_remark // 事件描述 create_date // 创建时间

3. 项目对应公共数据配置表 project_public_xml 对项目进行公共数据配置，公共数据最终以json字符串方式存到数据库，该表为约定，约定公共数据存储位置，好让脚本可以取到存储

project_id // 对应的项目id position // 存储位置 1：localStorage 2： sesstionStorage 3: window key_name // 存储的键名 create_date // 创建时间

4. 项目对应点击的交互数据表 project_click_data 页面被触发配置事件的交互数据存储 project_id // 对应的项目id event_key // 事件的key值对应 project_event_xml表的event_key字段 event_value // 事件触发设置的需要记录的值 public_data // 公共数据部分 这里存储的是json字符串 存储内容为 project_public_xml配置的公共数据配置 create_date // 创建时间

5. 项目对应页面访问记录的数据表 project_view_data 该表为页面被访问时记录的数据 project_id // 对应的项目id url // 访问的url title // 访问页面的标签title public_data // 公共数据部分 这里存储的是json字符串 存储内容为 project_public_xml配置的公共数据配置 create_date // 创建时间

架构设计

一. 创建一个管理后台有如下功能

graph TD
创建项目 --> 配置点击事件 --> 配置公共参数配置 --> 前端项目埋点&&入口引入脚本