埋点统计系统架构图

埋点统计系统 

 一、背景

             统计系统页面的点击情况，并生成数据分析报表。

 二、架构图

三、实现

3.1  页面埋点 

<div class="tab-content">
   <table>
       <tr>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn001">10001</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn002">10002</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn003">10003</td>
       </tr>
       <tr>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block002_btn001">20001</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block002_btn002">20002</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block002_btn003">20003</td>
       </tr>
       <tr>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block003_btn001">30001</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block003_btn002">30002</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block003_btn003">30003</td>
       </tr>
       <tr>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn004">40001</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn005">40002</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn006">40003</td>
       </tr>
       <tr>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn007">50001</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn008">50002</td>
           <td class="btn J_monitor_" data-id="J_monitor_page001_jinjian02_block001_btn009">50003</td>
       </tr>
   </table>
</div>

点击数据结构：

  

3.2  配置client请求地址 

<script src="http://127.0.0.1:8777/js/monitor/timemonitor-debug.js"></script>
<script type="text/javascript">
    new window.TBJ_RESIDENCETIMEMONITOR("http://127.0.0.1:8777/tapper/add.do", true).init();
</script>

3.3  收集点击数据

<bean id="tapperClient" class="com.mengka.tapper.client.TapperClientBean" init-method="init">
		<property name="serverAddr" value="127.0.0.1:27017" />
		<property name="name" value="loan" />
</bean>

ArrayList<LoanInfoDO> loanInfos = TapperUtil.getLoanInfo(data);
for(LoanInfoDO loanInfoDO:loanInfos) {
    tapperClient.addLoanInfo(loanInfoDO);
}

3.4  查看点击数据