利用JS跨域做一個簡單的頁面訪問統計系統

其實在大部分互聯網web產品中，我們通常會用百度統計或者谷歌統計分析系統，通過在程序中引入特定的JS腳本，然後便可以在這些統計系統中看到自己網站頁面具體的訪問情況。但是有些時候，由於一些特殊情況，我們需要自己來設計統計系統。由於前段時間公司的業務需求，我也是自己嘗試了下，本文提供的是一個基本思路，統計系統也比較簡單。

 

幾個基本統計需求：

1.統計web每個頁面用戶訪問量

2.統計用戶訪問者的和IP地址信息

3.頁面之間的跳轉情況

4.訪問高峯時間段

 

服務器結構：

數據庫表設計：

     以上只是我簡單列舉的需求，這邊簡單的就一張統計表，而這張統計表能滿足的需求是不僅僅只是上面四個基本的需求的，可以看需求情況再做相應的業務處理。

 

tb_visit_count_log

 

ID

ip (varchar) IP地址

title（varchar）標題

cur_page(varchar) 當前頁面

from_page(varchar) 源頁面

time（datetime）日期時間

app(varchar) 應用

 

數據採集:

     我們提交編寫一個JS腳本，用來抓取當前頁面中我們需要的數據，然後通過跨域請求道我們的Statistics Server進行存儲，便於之後的統計分析業務的操作。

　　JS跨域：

     我們都知道在開發web應用的時候，我們經常利用<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>去請求其它服務器內的腳本資源，src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置。所以利用這一點，我們可以通過JS動態創建<script>標籤，並抓取頁面相關的信息後，設置該標籤src地址爲遠程Statistics服務器地址，將其添加到當前文檔中，該標籤便會自動將請求發送到指定服務器，而服務器便可解析改請求中的參數和請求信息，將其存儲入庫。

　　

　　示例代碼：

     (function() {
            var title = document.getElementsByTagName("title")[0].innerHTML, // 頁面標題
                 url = window.location.href, // 當前請求路徑名稱
                site = window.location.host, // 站點host
                // 此處爲從header獲取 Refere參數，具體獲取看當前的web程序
                 ref = ' <%=request.getHeader( "Referer") %>',                 
                 param = "?title="+title+" &url="+url+" &ref="+ref ,     // 引用頁地址
                script = document.createElement("script");
           script.src = "http://example.com/analysis"+param;
          document.getElementsByTagName("head")[0].appendChild(script);
  })();

注意：上示例代碼中用了一個JSP標籤，從header中獲取了Referer參數。

 

服務器端：

   本示例服務器框架採用的是SpringMVC，但是獲取參數都是一樣的。獲取參數：

     /**
      * 記錄站點統計信息
      * @param request
      */
      @RequestMapping( "/analysis")
      @ResponseBody
      public void visitorLogger(HttpServletRequest request) {           
            try {
                WebsiteVisitCount visitor = new WebsiteVisitCount();       
                visitor.setUrl(request.getParameter( "url"));
                String title = request.getParameter( "title");
                 if (title != null) {
                     visitor.setTitle( new String(title.getBytes("ISO-8859-1" ),
                                 "utf-8"));                 
                }
                 // 用戶IP
                visitor.setFromUrl(request.getParameter( "ref"));
                visitor.setUserIp(getRemortIP(request));
                visitor.setApp(request.getParameter( "site"));
                 // 存儲數據
                 websiteVisitCountService.addVisitor(visitor);
           } catch (Exception e) {
                 LOGGER.error( "WebsiteVisitCountController.visitorLogger():"
                           +request.getRequestURI(), e.getMessage());
           }    
     } 

   以上代碼中並沒有響應給客戶端任何可執行的JS腳本，當然如果需要，這個是完全沒有問題的，在跨域其他需求的時候，完全可以響應服務器JS執行腳本。

   獲取訪問IP：

      /**
      * 獲取客戶端IP地址
      * @param request
      * @return
      */
      public String getRemortIP(HttpServletRequest request) {
            if (request.getHeader( "x-forwarded-for" ) == null ) {
                 return request.getRemoteAddr();
           }
            return request.getHeader( "x-forwarded-for" );
     }

以上則是統計的核心代碼部分，數據入庫後便可以對其進行相應業務上的處理，獲取想了解的數據。部署時只需要把JS採集腳本添加到要監控的頁面即可。