JS埋点式数据采集

秋乔
2021-04-08 / 0 评论 / 186 阅读 / 正在检测是否收录...

  在Windows环境下,用apache服务器做一个简单的js埋点式数据采集,用logstash工具接受并记录数据,notepad3工具编辑文件

步骤图:

bzt
文章所需工具: JS埋点式数据采集文件Notepad3 (方便查看代码)

准备工作:新建一个文件夹为:Server-JS 把下载好的三个压缩文件解压到里面

一、修改js-sdk文件

1.1 打开 js-sdk/webapp 里的 index.html 找到function下的 ma.src = "http://localhost:8099/js/ma.js" 修改端口号为 8079
1+x_js_1.1
1.2 修改之后我们回到当前目录的 js 目录下,修改 ma.js 文件内最后边var src = 'http://localhost:5043/的端口号为: 5043 1+x_js_1.2

二、修改Apache配置文件

打开 Apache24/conf 里的 httpd.conf 文件(此代码内容过多,建议用Ctrl+F查找功能)
2.1 查找 Define SRVROOT 把后面引号里的内容修改为你Apache文件夹路径
2.1
2.2 查找 Listen 把后面引号里的端口80修改为8079
2.2
2.3 查找 DocumentRoot、Directory 把后面引号里的内容修改为你 webapp 文件夹路径
2.3
2.4 启动 apache 服务器:进入 Apache24/bin 目录,在地址栏输入cmd回车,弹出cmd窗口后输入 httpd.exe 回车即可启动
2.4
ps:怎么查看文件夹的路径?
2.x

三、修改logstash配置文件

3.1 回到 Server-JS 目录新建 output 文件夹(接收采集数据)
3.2 进入 logstash-6.8.7/config 目录内,复制一份 logstash-sample.conf 命名为 logstash-httpJS-csv.conf 用 notepad3 打开修改文件,并将 path 引号内路径修改为你 output 路径

input {
  http {
    port => 5043
    response_headers => {
      "Access-Control-Allow-Origin" => "*"
      "Content-Type" => "text/plain"
      "Access-Control-Allow-Headers" => "Origin, X-Requested-With, Content-Type, Accept"
    }
  }
}

filter {
    urldecode{
        field => headers
    }
    grok {
      match => [
          # /?args=domain=127.0.0.1&title=js-sdk&referrer=&sh=768&sw=1366&cd=24&lang=zh-CN&account=web-uuid
          "[headers][request_path]", "/\?args=domain=(?<domain>[^&]*)&title=(?<title>[^&]*).*"
     ]
  }
}

output {      
      csv {
            path => "E:\Server\elk\output\js-sdk-file.csv"
            fields => ["domain" ,"title"]
            csv_options => {"col_sep" => "    "}
        }
    stdout{
        codec => rubydebug
    }
}  

3.1
3.3 启动 logstash:在 logstash-6.8.7/bin 目录地址栏输入cmd,弹出cmd窗口后输入 logstash -f 然后回到 logstash-6.8.7/config 目录内将 logstash-httpJS-csv.conf 拖入cmd窗口
3.2

四、进行数据采集

启动浏览器 输入 127.0.0.1:8079 刷新页面即可开始采集数据
4.1
采集文件在output文件内: js-sdk-file.csv
4.2

0

评论 (0)

取消