Using JS cross-domain to make a simple page access statistic system

In fact, in most of the Internet web products, we usually use Baidu statistics or Google statistical analysis system, through the introduction of specific JS script in the program, and then you can see in these statistical systems of their own site page specific access. But sometimes, due to some special circumstances, we need to design our own statistical system. Because of the business needs of the previous period of time, I also tried the next, this article provides a basic idea, statistical system is relatively simple.

several basic statistical requirements:1. Statistics Web user visits per page 2. Statistics of user visitor's and IP address information 3. Jump situation between pages 4. Peak Access Period Server structure: database table Design:The above is just my simple list of needs, here is a simple table, and this table can meet the demand is not only the above four basic needs, you can see the demand situation to do the corresponding business processing. Tb_visit_count_log

Id

IP (varchar) IP address

Title (varchar)

Cur_page (varchar) current page

From_page (varchar) source page

Time (DateTime) datetime

App (varchar) app

Data acquisition:We submit a JS script that captures the data we need on the current page, and then stores it through cross-domain requests to our statistics server for subsequent statistical analysis of the operation of the business. JS cross-domain:We all know that when developing Web applications, we often use <script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></ Script> to request script resources from other servers, SRC is the abbreviation for source, points to the location of the external resource, and the content that is pointed to is embedded in the document where the current label is located. So using this, we can dynamically create <script> tags through JS, and crawl page related information, set the label SRC address as a remote statistics server address, add it to the current document, the label will automatically send the request to the specified server, The server can then parse the parameters and request information in the request and store it in the library. Example code:

     (function () {            var title = document.getElementsByTagName ("title") [0].innerhtml,//page header                 url = Window.location.href,//Current request path name site                = window.location.host,//Site host                //here to get the Refere parameter from the header, Specifically get a look at the current web program                 ref = ' <%=request.getheader ("Referer")%> ',                                  param = "? title=" +title+ "&url=" +url+ "& Amp;ref= "+ref,     //reference page address                script = document.createelement (" script ");           SCRIPT.SRC = "Http://example.com/analysis" +param;          document.getElementsByTagName ("Head") [0].appendchild (script);  }) ();

Note: A JSP tag is used in the example code to get the Referer parameter from the header. server-side:This example server framework uses SPRINGMVC, but the get parameters are the same. Get Parameters:

     /** * Record Site statistics * @param request */@RequestMapping ("/analysis") @ResponseBody public V  OID 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"));                }//User IP Visitor.setfromurl (request.getparameter ("ref"));                Visitor.setuserip (Getremortip (request));                 Visitor.setapp (Request.getparameter ("site"));           Storage Data Websitevisitcountservice.addvisitor (visitor);       } catch (Exception e) {logger.error ("Websitevisitcountcontroller.visitorlogger ():"                    +request.getrequesturi (), E.getmessage ());  }         }

The above code does not respond to the client any executable JS script, of course, if necessary, this is completely no problem, in the cross-domain other requirements, can fully respond to the server JS execution script. get access IP:

      /**      * Get client IP address      * @param request      * @return      *      /Public String Getremortip (httpservletrequest Request) {            if (Request.getheader ("x-forwarded-for") = = null) {                 return request.getremoteaddr ();           }            Return Request.getheader ("X-forwarded-for");     }

The above is the core code part of the statistics, the data can be processed in the corresponding business, to obtain the data you want to know. When deploying, simply add the JS capture script to the page you want to monitor.

In fact, in most of the Internet web products, we usually use Baidu statistics or Google statistical analysis system, through the introduction of specific JS script in the program, and then you can see in these statistical systems of their own site page specific access. But sometimes, due to some special circumstances, we need to design our own statistical system. Because of the business needs of the previous period of time, I also tried the next, this article provides a basic idea, statistical system is relatively simple.

several basic statistical requirements:1. Statistics Web user visits per page 2. Statistics of user visitor's and IP address information 3. Jump situation between pages 4. Peak Access Period Server structure: database table Design:The above is just my simple list of needs, here is a simple table, and this table can meet the demand is not only the above four basic needs, you can see the demand situation to do the corresponding business processing. Tb_visit_count_log

Id

IP (varchar) IP address

Title (varchar)

Cur_page (varchar) current page

From_page (varchar) source page

Time (DateTime) datetime

App (varchar) app

Data acquisition:We submit a JS script that captures the data we need on the current page, and then stores it through cross-domain requests to our statistics server for subsequent statistical analysis of the operation of the business. JS cross-domain:We all know that when developing Web applications, we often use <script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></ Script> to request script resources from other servers, SRC is the abbreviation for source, points to the location of the external resource, and the content that is pointed to is embedded in the document where the current label is located. So using this, we can dynamically create <script> tags through JS, and crawl page related information, set the label SRC address as a remote statistics server address, add it to the current document, the label will automatically send the request to the specified server, The server can then parse the parameters and request information in the request and store it in the library. Example code:

     (function () {            var title = document.getElementsByTagName ("title") [0].innerhtml,//page header                 url = Window.location.href,//Current request path name site                = window.location.host,//Site host                //here to get the Refere parameter from the header, Specifically get a look at the current web program                 ref = ' <%=request.getheader ("Referer")%> ',                                  param = "? title=" +title+ "&url=" +url+ "& Amp;ref= "+ref,     //reference page address                script = document.createelement (" script ");           SCRIPT.SRC = "Http://example.com/analysis" +param;          document.getElementsByTagName ("Head") [0].appendchild (script);  }) ();

Note: A JSP tag is used in the example code to get the Referer parameter from the header. server-side:This example server framework uses SPRINGMVC, but the get parameters are the same. Get Parameters:

     /** * Record Site statistics * @param request */@RequestMapping ("/analysis") @ResponseBody public V  OID 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"));                }//User IP Visitor.setfromurl (request.getparameter ("ref"));                Visitor.setuserip (Getremortip (request));                 Visitor.setapp (Request.getparameter ("site"));           Storage Data Websitevisitcountservice.addvisitor (visitor);       } catch (Exception e) {logger.error ("Websitevisitcountcontroller.visitorlogger ():"                    +request.getrequesturi (), E.getmessage ());  }         }

The above code does not respond to the client any executable JS script, of course, if necessary, this is completely no problem, in the cross-domain other requirements, can fully respond to the server JS execution script. get access IP:

      /**      * Get client IP address      * @param request      * @return      *      /Public String Getremortip (httpservletrequest Request) {            if (Request.getheader ("x-forwarded-for") = = null) {                 return request.getremoteaddr ();           }            Return Request.getheader ("X-forwarded-for");     }

Using JS cross-domain to make a simple page access statistic system