ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

自定义注解实现百度统计埋点

自定义注解实现百度统计埋点 1. 自定义注解与拦截器实现首先定义一个用于标记需要统计的方法或接口的自定义注解BaiduStatistics。import java.lang.annotation.*; /** * 百度统计自定义注解 * 用于标记需要进行访问统计的方法或接口 */ Target({ElementType.METHOD, ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Documented public interface BaiduStatistics { /** * 统计事件名称 */ String eventName() default ; /** * 统计事件类型 (如pv, uv, click等) */ String eventType() default pv; }接着创建一个 Spring MVC 拦截器BaiduStatisticsInterceptor用于拦截被BaiduStatistics注解标记的请求并执行统计逻辑。import org.springframework.web.method.HandlerMethod; import org.springframework.web.servlet.HandlerInterceptor; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.lang.reflect.Method; /** * 百度统计拦截器 */ public class BaiduStatisticsInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 1. 判断handler是否为HandlerMethod (Controller方法) if (handler instanceof HandlerMethod) { HandlerMethod handlerMethod (HandlerMethod) handler; Method method handlerMethod.getMethod(); // 2. 检查方法上是否有BaiduStatistics注解 BaiduStatistics methodAnnotation method.getAnnotation(BaiduStatistics.class); if (methodAnnotation ! null) { // 3. 执行统计逻辑 doStatistics(methodAnnotation, request); return true; } // 3. 检查类上是否有BaiduStatistics注解 BaiduStatistics classAnnotation method.getDeclaringClass().getAnnotation(BaiduStatistics.class); if (classAnnotation ! null) { doStatistics(classAnnotation, request); return true; } } return true; } /** * 执行具体的统计上报逻辑 *此处模拟调用百度统计API */ private void doStatistics(BaiduStatistics annotation, HttpServletRequest request) { String eventName annotation.eventName(); String eventType annotation.eventType(); String url request.getRequestURI(); String ip request.getRemoteAddr(); String userAgent request.getHeader(User-Agent); // 构建统计参数 // 实际应调用百度统计的SDK或发送HTTP请求到百度统计服务器 // 例如: _hmt.push([_trackEvent, eventType, eventName, url]); System.out.printf([百度统计] 事件类型: %s, 事件名称: %s,访问URL: %s, 客户端IP: %s%n, eventType, eventName, url, ip); // 这里可以集成百度统计的JavaScript SDK的服务器端调用逻辑 // 或者将数据异步发送到自己的统计服务再由前端或后端统一上报 } }然后将拦截器注册到 Spring MVC 的配置中。在 Spring Boot 中可以通过配置类实现。import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new BaiduStatisticsInterceptor()) .addPathPatterns(/**) // 拦截所有路径 .excludePathPatterns(/static/**, /error); // 排除静态资源等 } }最后在需要进行统计的 Controller 方法或类上使用BaiduStatistics注解。import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; RestController public class DemoController { GetMapping(/api/data) BaiduStatistics(eventName 查询核心数据, eventType api_call) public String getData() { return 重要数据; } BaiduStatistics(eventName 用户信息模块) // 类级别注解该类下所有方法都会被统计 RestController RequestMapping(/api/user) public class UserController { GetMapping(/profile) public String getProfile() { return 用户信息; } } }2. 集成百度统计查看图表完成数据上报后需要在百度统计官网查看图表。核心步骤是在前端页面嵌入百度统计的 JavaScript 跟踪代码。首先在百度统计官网tongji.baidu.com创建站点获取跟踪代码其格式如下script var _hmt _hmt || []; (function() { var hm document.createElement(script); hm.src https://hm.baidu.com/hm.js?你的站点密钥; var s document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(hm, s); })(); /script然后将此代码嵌入到你的 Vue 或 HTML 项目的入口文件如index.html或main.js中。对于 Vue 项目通常放在public/index.html的head标签内。为了更精细地控制统计例如配合后端拦截器上报的自定义事件可以在前端组件中手动调用百度统计 API。// 在Vue组件或任何JavaScript中export default { methods: { trackCustomEvent() { // 确保_hmt对象已加载 if (window._hmt) { //推送自定义事件 //参数说明_trackEvent(category, action, opt_label, opt_value) window._hmt.push([_trackEvent, API接口, 调用, 查询数据接口, 1]); } }, trackPageView() { if (window._hmt) { // 推送虚拟页面浏览 window._hmt.push([_trackPageview, /virtual/page/view]); } } }, mounted() { // 组件挂载时触发一个事件 this.trackCustomEvent(); } }3. 后端拦截器与前端统计的协作模式协作环节后端拦截器 (BaiduStatisticsInterceptor)前端百度统计代码数据流向与目的主要职责拦截特定请求记录服务器端事件如API调用、关键业务操作。收集页面浏览PV/UV、用户点击、前端行为等客户端数据。后端数据可用于补充前端无法收集的深度业务逻辑数据。数据上报通常通过日志记录、发送请求到自有中间件或调用百度统计服务器端API如有。通过加载的hm.js自动收集基础数据并通过_hmt.push()方法上报自定义事件。两路数据最终在百度统计后台汇总。典型应用场景统计核心业务接口的调用频次、成功率或记录涉及敏感权限的操作。统计页面访问流量、用户按钮点击、表单提交、停留时间等。实现全方位的数据监控从页面表现到业务逻辑。配置关联依赖自定义注解BaiduStatistics进行标记。依赖在百度统计后台获取的站点密钥HM.js URL中的参数。两者通过相同的事件分类category和动作action在百度统计后台进行关联分析。4. 在百度统计后台查看图表登录百度统计访问tongji.baidu.com并使用你的账号登录。选择站点在概览页面选择你嵌入了代码的对应网站。查看报告趋势分析查看 PV、UV、访问时长等核心指标的走势图。事件跟踪在“行为” “事件跟踪”中可以查看通过_trackEvent上报的自定义事件包括后端拦截器模拟上报的事件的触发次数、用户数等图表。页面分析查看各个页面的访问详情。转化路径可以设置目标并查看转化漏斗。通过以上步骤你便实现了通过自定义注解和拦截器进行服务器端事件统计并结合前端代码进行全方位数据收集最终在百度统计后台通过丰富的图表进行数据分析。参考来源基于SpringBoot2Vue2的常规应急物资管理系统2026毕设ssmvue农产品溯源app论文程序基于Spring Boot的网上摄影工作室系统源码一键运行SpringSpringMVCMybatisSSM框架搭建教程六-总结篇SpringBootVue智能停车场管理系统全栈开发实战与部署指南
返回列表