html点击数据收集,HTML+CSS入门之数据采集（js埋点）

本篇文章主要讲述HTML+CSS入门之数据采集(js埋点)，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

一、后台nginx环境搭建

web点数据采集后台配置nginx：https://blog.csdn.net/weixin_37490221/article/details/80894827

下载数据源：wget -O lua-nginx-module-0.10.0.tar.gz

https://github.com/openresty/lua-nginx-module/archive/v0.10.0.tar.gz

wget --no-check-certificate -Oecho-nginx-module-0.58.tar.gz

'https://github.com/openresty/echo-nginx-module/archive/v0.58.tar.gz'

wget --no-check-certificate -O nginx_devel_kit-0.2.19.tar.gz

https://github.com/simpl/ngx_devel_kit/archive/v0.2.19.tar.gz

wget https://openresty.org/download/openresty-1.9.7.3.tar.gz

wget --no-check-certificate -Oset-misc-nginx-module-0.29.tar.gz

二、前端埋点

前端页面中需要加载ma.js的脚本代码

放到后台的前端代码(function () {

var params = {};

var args = '';

if(document) {

params.domain = document.domain || '';

params.url = document.URL || '';

params.title = document.title || '';

params.referrer = document.referrer || '';

params.bio = document.getElementById("username").innerHTML || '';

params.clickbio = '';

}

document.querySelector("div#page-wrapper .wrapper.wrapper-content.animated.fadeInRight").addEventListener("click",function(e){

params.clickbio = GetChinese(e.target.innerHTML);

console.log(params.clickbio)

args = '';

console.log(params.clickbio)

for(var i in params) {

if(args != '') {

args += '&';

}

args += i + '=' + encodeURIComponent(params[i]);

}

var img = new Image(1, 1);

img.src = 'http://IP111/log.gif?' + args;

})

function GetChinese(strValue) {

if(strValue!= null && strValue!= ""){

var reg = /[\u4e00-\u9fa5]/g;

return strValue.match(reg).join("");

}

}

if(window && window.screen) {

params.sh = window.screen.height || 0;

params.sw = window.screen.width || 0;

params.cd = window.screen.colorDepth || 0;

}

if(navigator) {

params.lang = navigator.language || '';

}

if(_maq) {

for(var i in _maq) {

switch(_maq[i][0]) {

case '_setAccount':

params.account = _maq[i][1];

break;

default:

break;

}

}

}

for(var i in params) {

if(args != '') {

args += '&';

}

args += i + '=' + encodeURIComponent(params[i]);

}

var img = new Image(1, 1);

img.src = 'http://IP111/log.gif?' + args;

})();

三、后端配置

配置nginx服务器日志格式worker_processes  2;

events {

worker_connections  1024;

}

http {

include       mime.types;

default_type  application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '  '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"';

log_format user_log_format "$u_clickbio||$u_bio||$time_local||$msec||$remote_addr||$status||$body_bytes_sent||$u_domain||$u_url||$u_title||$u_referrer||$u_sh||$u_sw||$u_cd||$u_lang||$http_user_agent||$u_account";

sendfile        on;

keepalive_timeout  65;

server {

listen       80;

server_name  localhost;

location /log.gif {

default_type image/gif;

access_log  logs/access.log  main;

access_by_lua "

local uid = ngx.var.cookie___utrace

if not uid then

uid = ngx.md5(ngx.now() .. ngx.var.remote_addr .. ngx.var.http_user_agent)

end

ngx.header['Set-Cookie'] = {'__utrace=' .. uid .. '; path=/'}

if ngx.var.arg_domain then

ngx.location.capture('/i-log?' .. ngx.var.args .. '&utrace=' .. uid)

end

";

add_header Expires "Fri, 01 Jan 1980 00:00:00 GMT";

add_header Pragma "no-cache";

add_header Cache-Control "no-cache, max-age=0, must-revalidate";

empty_gif;

}

location /i-log {

internal;

set_unescape_uri $u_clickbio $arg_clickbio;

set_unescape_uri $u_bio $arg_bio;

set_unescape_uri $u_domain $arg_domain;

set_unescape_uri $u_url $arg_url;

set_unescape_uri $u_title $arg_title;

set_unescape_uri $u_referrer $arg_referrer;

set_unescape_uri $u_sh $arg_sh;

set_unescape_uri $u_sw $arg_sw;

set_unescape_uri $u_cd $arg_cd;

set_unescape_uri $u_lang $arg_lang;

set_unescape_uri $u_account $arg_account;

log_subrequest on;

access_log logs/user_defined.log user_log_format;

echo '';

}

}

}

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！