用途がかなり限られる実装コードサンプルですが、今回は他ドメイン上のアクセス情報を自社サーバー内に一定間隔で記録するためのコードをご紹介したいと思います。
こういった実装が必要になるのは、アクセス解析サービスなんかを自前で作る場合になるかと思います。
※アフィリエイト広告の成果取得のようにアクセス時に一回情報を取得できればよい場合には、実装方法はもっとシンプルです。
実装方法
①HTMLのbodyタグにID追加（相手サーバー側）
<body id="tadCount"> </body>
まずJavascriptが動的にHTMLタグを追加できるように設置先ページのbodyタグに任意のユニークなIDを振ってもらいます。（ここでは「tadCount」という名称に統一します。）
②Javascriptによるイメージファイル表示処理追加（相手サーバー側）
<script><!--
<link rel="stylesheet" href="https://xxx.xx.xx/xxx.css">
<script><!--
window.onload = function(){
createCnt();
setInterval("createCnt()", 60000);
}
function createCnt(){
const elm1 = document.createElement("div");
elm1.setAttribute('id', 'tadImage');
const elm2 = document.createElement("img");
elm2.setAttribute('src', 'https://xxx.xx.xx/xxx.php');
elm2.setAttribute('width', '1');
elm2.setAttribute('heigth', '1');
elm1.appendChild(elm2);
tadCount.appendChild(elm1);
setTimeout("deleteCnt()", 5000);
}
function deleteCnt(){
const elm1 = document.getElementById("tadImage");
elm1.remove(elm1);
}
--></script>
上記Javascriptコードを情報を取得したい相手のサイト上に設置してもらいます。
このJavascriptコードでは、1分間毎に自社サーバー上に設置した画像ファイル形式の情報取得プログラム（PHP）を生成～消滅させる処理をしています。
画像を表示しっぱなしにした場合、ユーザーのアクセス情報はページを開いた最初の一回しか取得できません。つまりユーザーがページを開きっぱなしにしているような場合に、一定間隔でアクセス情報を取得するには動的に画像プログラムを出したり消したりする必要があるということになります。
ちなみに画像プログラムでは1px四方の透過画像を出力しているためユーザーには見えません。（設置側がhttp、取得側がhttpsの場合画像なしアイコンが表示されてしまう場合があるため要注意です）
③追加HTMLのCSS（自社サーバー側）
<style><!--
#tadImage{
position:fixed;
width:1px;
height:1px;
bottom:0;
right:0;
}
--></style>
追加する透過画像がユーザー画面に常に表示される位置に来るように表示位置をfixedにします。
④PHPによる情報取得処理（自社サーバー側）
<?php
header("Content-type: image/gif");
/*
ここにカウント処理を記述します。
Javascript側のURLに引数を持たせればサイト情報を持たせることもできます。
*/
readfile('./xxx.gif');
?>
最初と最後に透過画像を表示するコードを記述し、その間に処理を記述します。この画像が表示された時点で該当ユーザーのアクセスは自社サーバー側に来ていますので、IPアドレス等の取得が可能です。
個人情報に該当する情報を取得する際はその旨のアナウンスが必要になるかもしれません。
※別途透過画像の用意は必要となります。
まとめ
他ドメインへのアクセスユーザーの情報を取得するというのは用途としてはかなり限られますが、あまりこの辺の実装サンプルは見かけないので共有をさせて頂きました。