追跡 | zip358.com

マウスの動きをトラッキング（追跡）する。

2020.11.17

サイトのマウスの動きをトラッキングして行動パターンを知りたいという案件がクラウドでありました。応募はしていませんが考え方はこのような感じだと思います。ただ楽天サイトだという制約があったのでクロスサイトへ接続可能なのかはわからないけれど…ね?。

考え方のソースコードとdemoサイトのリンクを貼っときます、因みにIPを取れるJSライブラリもあるみたいなので、それを使用すると案件の内容が完結すると思います。
尚、PHPで再度、返却していますが、実際トラッキングする場合はPHP側でJSから送ったデータを保存処理を行う処理とクライアントが開いている状態のページの画面をキャプチャする機能などが必要になるかと思われます。そういう処理をPHP側で行わないといけないので、実際はJS側ではマウスのトラッキングとクライアントがブラウザで開いた画面サイズもPHP側に送信する必要はあるかなと。そういう事をPHP側に追加すれば良いのかと・・・感じました。

Demo22:: https://zip358.com/tool/demo22/

https://www.youtube.com/watch?v=UefhNlxx3xk

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);

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2020年11月17 05:00日

タグ

demo, IP, JS, php, あるかな, キャプチャ, クライアント, クラウド, クロス, コード, サイズ, サイト, ソース, それ, データ, トラッキング, パターン, ブラウザ, ページ, マウス, ライブラリ, リンク, 事, 使用, 保存, 側, 内容, 再度, 処理, 制約, 可能, 場合, 完結, 実際, 必要, 応募, 感じ, 接続, 案件, 楽天, 機能, 状態, 画面, 考え方, 行動, 返却, 追加, 追跡, 送信,

ANA積立で決済する方法とiPhoneでウォレット追加する方法。

2019.04.09

Logging

ANA積立航空券で決済する方法ですが、
まずWEBで予約まで行います、次に下記のサイトに
書かれているANA旅行積立プラン専用デスクに電話します。
その後、WEBへログインし支払い期限が延長されている
事を確認します。
サイトにANA航空券（旅行券）を送る住所が記載されているので
封筒にそれらを明記しANA旅行積立プラン専用デスク行と記入した
うえで、郵便局で簡易書留＋追跡サービスで送りましょう。
※送付するときは必ず送付書を入れて送りましょう。
尚、往復の場合、余白に搭乗日時などを明記し上記の内容に
合算することを明記しましょう。
http://www.anas.co.jp/tsumitate/anaticket/use_ticket/dom_desk/index.html
iPhoneでウォレット追加する方法
下記のサイトから手順通り行うとうまく行くはずなのですが、
純正ブラウザ以外の場合、インストールできない場合があります。
なので必ずSafariを使用してウォレット追加しましょう。
https://www.ana.co.jp/ja/jp/serviceinfo/share/passbook/

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年04月09 07:11日

タグ

ANA, anas, anaticket, co, desk, dom, htmliPhone, http, index, iPhone, jp, Safa, ticket, tsumitate, use, web, www, インストール, うえ, ウォレット, こと, サービス, サイト, それら, デスク, とき, パス, ブラウザ, プラン, ログイン, 上記, 下記, 予約, 事, 住所, 余白, 内容, 合算, 場合, 封筒, 専用, 延長, 往復, 後, 手順, 搭乗, 方法, 旅行, 旅行券, 日時, 明記, 期限, 決済, 確認, 積立, 簡易書留, 純正, 航空券, 行, 記入, 記載, 追加, 追跡, 送付, 郵便局, 電話,

@Blog{zip358.com}

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

マウスの動きをトラッキング（追跡）する。

ANA積立で決済する方法とiPhoneでウォレット追加する方法。