サイトのマウスの動きをトラッキングして行動パターンを知りたいという案件がクラウドでありました。応募はしていませんが考え方はこのような感じだと思います。ただ楽天サイトだという制約があったのでクロスサイトへ接続可能なのかはわからないけれど…ね?。
考え方のソースコードとdemoサイトのリンクを貼っときます、因みにIPを取れるJSライブラリもあるみたいなので、それを使用すると案件の内容が完結すると思います。
尚、PHPで再度、返却していますが、実際トラッキングする場合はPHP側でJSから送ったデータを保存処理を行う処理とクライアントが開いている状態のページの画面をキャプチャする機能などが必要になるかと思われます。そういう処理をPHP側で行わないといけないので、実際はJS側ではマウスのトラッキングとクライアントがブラウザで開いた画面サイズもPHP側に送信する必要はあるかなと。そういう事をPHP側に追加すれば良いのかと・・・感じました。
Demo22:: https://zip358.com/tool/demo22/
window.onload = function(){
document.body.addEventListener("mousemove",(e)=>{
var timeInMs = Date.now();
document.querySelector("#log").innerHTML = navigator.userAgent + "<br>" + "x=" + e.offsetX + "y=" + e.offsetY;
var data = {timeInMs:timeInMs,userAgent:navigator.userAgent,x:e.offsetX,y:e.offsetY};
move_xy(data).then(function(response){
console.log(response);
});
});
};
async function move_xy(data){
return await new Promise(function(resolve) {$.ajax({
type: "POST",
dataType: "json",
url: "./move_xy.php",
data: data,
success: function (response) {
if(response.res==="ok"){
resolve(response);
}
resolve(false);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
resolve(false);
}
});});
}<?php
$obj["timeInMs"] = $_POST["timeInMs"];
$obj["userAgent"] = $_POST["userAgent"];
$obj["x"] = $_POST["x"];
$obj["y"] = $_POST["y"];
$obj["res"] = "ok";
print json_encode($obj);
