[WIP] 簡易な計測用タグを作る

_memo_2018-02-05-001.md

簡易な計測用タグを作る

要件

• 指定したエンドポイントにパラメータを付けてGETする
• S3のWEBサイトホスティングでendpointを公開する（外でも可）
• S3のWEBサイトホスティングのログでIPとUA、時間は取得する
• セッションの測定ができる(30分以内のアクセスは同じセッションとする)
• ユーザーのトラッキングができる（30日以内のアクセスは同じユーザーとする）
• 各IDは、ファーストパーティクッキーに保存する。 ドメインを跨いだトラッキングは出来ない。

S3のWEBサイトホスティングのログの例

8c3cc03706094a0213b7cf2d7982d75f655cb1ee63d76d4eceb805ca66e90348 test-nyannyan [22/Aug/2016:10:00:45 +0000] 52.69.245.217 - E0E5FBF57E012E26 WEBSITE.GET.OBJECT index.html "GET / HTTP/1.1" 200 - 8635 8635 21 21 "-" "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)" -
8c3cc03706094a0213b7cf2d7982d75f655cb1ee63d76d4eceb805ca66e90348 test-nyannyan [22/Aug/2016:10:00:45 +0000] 52.69.245.217 - F35B43B53A45A0EB WEBSITE.GET.OBJECT index.html "GET / HTTP/1.1" 200 - 8635 8635 22 21 "-" "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)" -

メモ

• S3 料金
• クッキーの使用方法
• JavaScriptでユニークな文字列をさくっと生成する

endpoint.html

ok

sample-tag.html

<script async>
    (function (endpoint) {
        // SessionID
        var sessionId = getCookie("simpletag-sessionid");
        if (sessionId === null) {
            sessionId = getUniqueStr();
        }
        var sessionExpire = new Date();
        sessionExpire.setTime(sessionExpire.getTime() + 1000 * 60 * 30); // 30分
        document.cookie = 'simpletag-sessionid=' + sessionId + '; expires=' + sessionExpire.toUTCString();
        
        // UserID
        var userId = getCookie("simpletag-userid");
        if (userId === null) {
            userId = getUniqueStr();
        }
        var userExpire = new Date();
        userExpire.setTime(userExpire.getTime() + 1000 * 3600 * 24 * 30); // 30日
        document.cookie = 'simpletag-userid=' + userId + '; expires=' + userExpire.toUTCString();

        // Send Logs
        var req = new XMLHttpRequest();
        var query = "?";
        query += "userid=" + userId;
        query += "&sessionid=" + sessionId;
        query += "&url=" + location.href;
        req.open("HEAD", endpoint + query, true);
        req.send();
        console.log("ログを送信しました："+ endpoint + query);

        function getCookie(name) {
            var result = null;
            var cookieName = name + '=';
            var allcookies = document.cookie;
            var position = allcookies.indexOf(cookieName);
            if (position != -1) {
                var startIndex = position + cookieName.length;
                var endIndex = allcookies.indexOf(';', startIndex);
                if (endIndex == -1) {
                    endIndex = allcookies.length;
                }
                result = decodeURIComponent(allcookies.substring(startIndex, endIndex));
            }
            return result;
        }
        function getUniqueStr(myStrong) {
            var strong = 1000;
            if (myStrong) strong = myStrong;
            return new Date().getTime().toString(16) + Math.floor(strong * Math.random()).toString(16)
        }
    }("//localhost:8080/endpoint.html"));
</script>