javascriptでランダムな英数字10桁と数字10桁

console.time('timer1');
var char = "abcdefghijklmnopqrstuvwxyz123456789"
var id = "";
for(var i=0; i<10; i++){
	id += char[Math.floor(Math.random()*35)];
}
document.write(id);
console.timeEnd('timer1');

0.24609375ms
timer1: 0.411865234375ms ※2回目
timer1: 0.324951171875ms ※3回目

min:1000000000 ~ max 9999999999 の10桁の数字の場合

var id = Math.floor(Math.random() * 9000000000)+ 1000000000;
document.write(id);

timer1: 0.329833984375ms
timer1: 0.248779296875ms ※2回目
timer1: 0.24462890625ms ※3回目

感覚的に、1回の演算処理に較べて10回のforループを回す場合、レジストリの演算処理が10倍に増えるので、処理時間も約10倍位になるかと思いきや、計算してみるとforループでも処理時間はほとんど変わらない(2倍以下)ですね。multiplyとplusのCPUの処理はそんなに時間がかからない、ということなんでしょうか。よくわかりませんね。

cookieから何回目の訪問か判定する

<script>
var cook;
var cStart,cEnd;
var cnt;

if(navigator.cookieEnabled)
{
	cook=document.cookie + ";";
	console.log(cook);

	cStart = cook.indexOf("counts=",0);

	if(cStart == -1){   //indexOfで存在しない時は-1を返す
		document.write("1回目の訪問です!");
		document.cookie="counts=1;";
	} else {
		cEnd = cook.indexOf(";",cStart);
		cnt = cook.substring(cStart+7,cEnd); // cStart + "counts="
		try {
			cnt = parseInt(cnt)+1;
			document.write(cnt+"回目の訪問です!");

			document.cookie="counts="+cnt+";";
		} catch(e){
			document.write("訪問回数の取得に失敗しました。");
		}
	}
}else{
	document.write("cookieが使用できません。");
}

</script>

ga.jsのcookieの処理 18箇所出てきます。
出てくるのは、
_setCookiePath、_setVisitorCookieTimeout、_setSessionCookieTimeout、_setCampaignCookieTimeout、_cookiePathCopy、_setCookieTimeout、_setCookiePersistence
後半の、J.cookieは、J=documentなので、普通にdocument.cookieです。

b=n.cookie.split(";");

var Mc=N(),Nc=N(),Yb=N(),Jc=N(),Kc=N(),Lc=Va("utmtCookieName"),Cd=Va("displayFeatures"),Oc=N(),of=Va("gtmid"),Oe=Va("uaName"),Pe=Va("uaDomain"),Qe=Va("uaPath"),pf=Va("linkid"),w=N(),x=N(),y=N(),z=N();

V("_setCookiePath",P,9,0);

V("_setVisitorCookieTimeout",cb,28,1);V("_setSessionCookieTimeout",db,26,1);V("_setCampaignCookieTimeout",eb,29,1);

a("_cookiePathCopy",U.prototype.ha,30);

V("_setCookieTimeout",eb,25,3);V("_setCookiePersistence",cb,24,1);

pd=function(a){
	var b=[],c=J.cookie.split(";");
	a=new RegExp("^\\s*"+a+"=\\s*(.*?)\\s*$");
	for(var d=0;d

cookieのvalueは、"GA1.1.200404109.1517112693"とした場合、Timeoutの処理はUNIX timeで処理していそうですね。
あ、J.domain は、document.domainなので、refererのdomainが一緒だった場合は、UNIX Timeを引けば、滞在時間を求められますね。 なるほど、そういうことか。めちゃくちゃ頭いいな~、Paul Muret。閲覧開始数、直帰率は、リファラを見れば、判別できますね。
あれ、でも、同じドメインに遷移の場合はunix timeもsubstructすれば滞在時間が取得できますが、他のドメインに行ったり、ブラウザを閉じた場合、どうやってページ滞在時間を取得しているんでしょうか? 
なに~、わからん

あれ、こんな記載が。。。
>最後に訪問したページの滞在時間はGoogleアナリティクスが測定できないという注意点があるので気を付けましょう。
なるほど、やっぱりそうか!なぜ、cookieにunixtime入れてるのか完全に理解した!

ユーザー固有の ID:200404109 は何でしょうか?
あれ、もしかして、このユーザー(ID:200404109)が1回のセッションでどういうページ遷移をしたかを判別しているために発行しているのでは?
おお、少し仕組みが判ってきた~

計測タグを発行して、そのページのアクセス情報をajaxでpostする

Google Analyticsの挙動と比較しやすいように、view.php, na.js, doubleclick.php の3つのファイルを用意します。view.php はタグを埋め込むhtmlファイル、na.jsはview.phpの情報を読み込んで処理しdoubleclick.phpに情報を渡す、doubleclick.phpはna.jsから送られた情報を受け取るサーバー側の処理。

まず、view.php
var objにアカウントidを入れて、ajaxとna.jsを読み込みます。
ここでは仮で id = 007 とします。

<style>
.box{
    width:400px;
    height: 400px;
    background-color:#ddd;
}
</style>
<body>
    <div class="box"></div>
</body>
<script type="text/javascript">
    var obj = obj || [];
    obj.push(['id','007']);
    var scripts =['https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js', 'na.js'];
    var i = 0;
    (function appendScript(){
        var script = document.createElement('script');
        script.src = scripts[i];
        document.body.appendChild(script);
        if(i++ < 2){
            script.onload = appendScript;
        }
    })();
</script>

na.js
var objに、ユーザー情報を追加して、doubleclick.phpにdataをpostします。

obj.push(['host',location.host]);
$(function(){
    $(document).ready(function(){
            var postData = {"userdata": obj};
            $.post(
                "doubleclick.php",
                 postData,
                 function(data){
                    $(".box").html(data);
                }
            );
        });
});

doulbeclick.php
na.jsから送られてきた配列を$_POSTで受け取ります。

 
$data = $_POST['userdata'];
var_dump($data);

うお!やばい

少し加工すると、タグを埋め込んだページに

ああ、そうか、setCookieをして、ユーザーが最初の訪問か、return userかを判別しているんですね。なるほど♪

google analyticsをつくろう

まず、tableをつくります。

create table cookie.analytics(
	host varchar(255),
	host_name varchar(255),
	port varchar(255),
	request varchar(255),
	code varchar(255),
	browser varchar(255),
	version varchar(255),
	platform varchar(255),
	useragent varchar(255),
	referer varchar(255),
	domain varchar(255),
	screen_w varchar(255),
	screen_h varchar(255),
	ip varchar(255),
	access datetime
);

次に、ajaxで、アクセスがあったらデータをpostします。

<style>
.box{
    width:200px;
    height: 200px;
    background-color:#ddd;
}
</style>
<body>
    <div class="box"></div>
    <button id="ajax-button">送信</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
$(function(){
    $(document).ready(function(){
            var postData = {"HOST": location.host,
                "HOST_NAME":location.hostname,
                "PORT": location.port,
                "REQUEST":location.pathname,
                "CODE": navigator.appCodeName,
                "BROWSER":navigator.appName,
                "VERSION": navigator.appVersion,
                "PLATFORM":navigator.platform,
                "USERAGENT": navigator.userAgent,
                "REFERER": document.referrer,
                "DOMAIN": document.domain,
                "SCREENW":screen.width,
                "SCREENH": screen.height,
                "IP":"<?php echo $_SERVER&#91;'REMOTE_ADDR'&#93;; ?>"};
            $.post(
                "test1.php",
                 postData,
            );
        });
});
</script>

ajaxで送られてきたデータをdbに格納します。

$date = date("Y-m-d H:i:s");
$host = $_POST['HOST'];
$host_name = $_POST['HOST_NAME']; 
$port = $_POST['PORT']; 
$request = $_POST['REQUEST']; 
$code = $_POST['CODE']; 
$browser = $_POST['BROWSER']; 
$version = $_POST['VERSION']; 
$platform = $_POST['PLATFORM']; 
$useragent = $_POST['USERAGENT']; 
$referer = $_POST['REFERER']; 
$domain = $_POST['DOMAIN']; 
$screen_w = $_POST['SCREENW']; 
$screen_h = $_POST['SCREENH']; 
$ip = $_POST['IP']; 


$dsn = "mysql:dbname=cookie;host=localhost";
$user = "hoge";
$password = "hogehoge";	 
try {
    $dbh = new PDO($dsn, $user, $password);
} catch (PDOException $e){
    print('connection failed:'.$e->getMessage());
} 

$stmt = $dbh -> prepare("INSERT INTO analytics (host, host_name, port, request, code, browser, version, platform, useragent, referer, domain, screen_w, screen_h, ip, access) VALUES(:host, :host_name, :port, :request, :code, :browser, :version, :platform, :useragent, :referer, :domain, :screen_w, :screen_h, :ip, :access)");
$stmt->bindParam(':host', $host, PDO::PARAM_STR);
$stmt->bindParam(':host_name', $host_name, PDO::PARAM_STR);
$stmt->bindParam(':port', $port, PDO::PARAM_STR);
$stmt->bindParam(':request', $request, PDO::PARAM_STR);
$stmt->bindParam(':code', $code, PDO::PARAM_STR);
$stmt->bindParam(':browser', $browser, PDO::PARAM_STR);
$stmt->bindParam(':version', $version, PDO::PARAM_STR);
$stmt->bindParam(':platform', $platform, PDO::PARAM_STR);
$stmt->bindParam(':useragent', $useragent, PDO::PARAM_STR);
$stmt->bindParam(':referer', $referer, PDO::PARAM_STR);
$stmt->bindParam(':domain', $domain, PDO::PARAM_STR);
$stmt->bindParam(':screen_w', $screen_w, PDO::PARAM_STR);
$stmt->bindParam(':screen_h', $screen_h, PDO::PARAM_STR);
$stmt->bindParam(':ip', $ip, PDO::PARAM_STR);
$stmt->bindParam(':access', $date, PDO::PARAM_STR);
$stmt->execute();

ユーザーのアクセス開始のデータがdbに格納されました。

1.cookieの使い方が良くわからない。
2.サイトにscriptタグを埋め込んで、jsにidの配列を送るとした場合、js側はajaxの処理ができるのか?
3.ユーザーが訪問ページを離れた時に、ajax・jsでは、どのように書いたらいいのか?

なんだかんだ難しいな。。

Ajaxでpostして、DBに格納する

まず、mysql側でhostというtableをつくります。

mysql> use cookie
Database changed
mysql> create table cookie.host(
    -> host varchar(41),
    -> hostname varchar(41)
    -> );
Query OK, 0 rows affected (0.33 sec)

受信側で、pdoのinsertを書きます。
test1.php

$Host = $_POST['HOST'];
$HostName = $_POST['HOST_NAME']; 


$dsn = "mysql:dbname=cookie;host=localhost";
$user = "hoge";
$password = "hogehoge";	 
try {
    $dbh = new PDO($dsn, $user, $password);
} catch (PDOException $e){
    print('connection failed:'.$e->getMessage());
} 

$stmt = $dbh -> prepare("INSERT INTO host (host, hostname) VALUES(:host, :hostname)");
$stmt->bindParam(':host', $Host, PDO::PARAM_STR);
$stmt->bindParam(':hostname', $HostName, PDO::PARAM_STR);
$stmt->execute();

$result = 'HOST' . $Host . '<br>HostName'.$HostName;
echo $result;

送信側は、buttonが押されたら、postと書きます。
test.php

<script>
$(function(){

    $('#ajax-button').click(
        function(){
            var postData = {"HOST": location.host,"HOST_NAME":location.hostname};
            $.post(
                "test1.php",
                postData,
                function(data){
                    $(".box").html(data);
                }
            );

        });
});
</script>

ボタンを押して、mysqlをselectすると、、、、
入ってる! まじかー

“$(‘#ajax-button’).click(” のところを、$(document).ready(function(){に変えます。
test.phpをリロードすると、
あああああああああああああああああ

$(“.box”).html(data);をコメントアウトしてリロードすると

// function(data){
                //     $(".box").html(data);
                // }

あれ、ちょっと待て、混乱してきた、あれ、これ、もしかしてアナリティクスいける?

AjaxでPOST

test.php

<style>
.box{
    width:200px;
    height: 200px;
    background-color:#ddd;
}
</style>
<body>
    <div class="box"></div>
    <button id="ajax-button">送信</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
$(function(){
    $('#ajax-button').click(
        function(){
            var postData = {"HOST": location.host,"HOST_NAME":location.hostname};
            $.post(
                "test1.php",
                postData,
                function(data){
                    $(".box").html(data);
                }
            );

        });
});
</script>

test1.php

$Host = $_POST['HOST'];
$HostName = $_POST['HOST_NAME'];
$result = 'HOST' . $Host . '<br>HostName'.$HostName;
echo $result;

hoverした時だけ送信される、と書くこともできる

$(function(){
    $(".box").hover(function(){
            var postData = {"HOST": location.host,"HOST_NAME":location.hostname};
            $.post(
                "test1.php",
                postData,
                function(data){
                    $(".box").html(data);
                }
            );

        }, function(){
            $(".box").html("");
        });
});

$(document).ready(function(){ なら、読み終わった後に処理。

ajaxでボタンを押すごとに写真の表示を変える

buttonをclickするごとに、var iを++;して、表示を変えます。

<body>
    <button class="button">写真を表示</button><br>
    <img src="img/01.gif">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
var img = ['img/01.gif','img/02.gif','img/03.gif','img/04.gif'];
var i = 1;
$(document).ready(function(){
    $(".button").click(function(){
        $("img").attr("src", img[i]);
        i++;
        if(i == (img.length)){
            i = 0;
        }
    });
});
</script>

ははーん、これは色々応用できそうですね。

ajax

<style>
.box{
    width:200px;
    height: 200px;
    background-color:#ddd;
}
</style>
<body>
    <div class="box"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).css({
            "background-color":"#ff9999",
        });
    }, function(){
        $(this).css({
            "background-color": "#dddddd",
        });
    });
});
</script>

$(document).ready(function()
HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行

書き方を変えて試してみます。

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(".box").html("hello");
    }, function(){
        $(".box").html("你好");
    });
});
</script>

おお、すこし馴染んできました。

クリックされた時

$(document).ready(function(){
    $(".box").click(function(){
        $(".box").html("クリックされました");
    });
});

buttonがクリックされたら、.boxの表示を変える

<body>
    <div class="box">こんにちは</div>
    <button class="button">表示</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
$(document).ready(function(){
    $(".button").click(function(){
        $(".box").html("クリックされました");
    });
});
</script>

なるほど!

少し応用して、Math.floor(Math.random * 配列の数)として、配列の乱数をつくると、おみくじも簡単にできますね♪

<body>
    <div class="box"></div>
    <button class="button">おみくじを引く</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</body>
<script>
var kuji = ['大吉','中吉','小吉','吉','凶','大凶']
$(document).ready(function(){
    $(".button").click(function(){
        var rand = Math.floor(Math.random() * 6);
        $(".box").html(kuji[rand]);
    });
});
</script>

ga.jsからのデータ送信はAjax?

ga.jsの最後の方でW.XMLHttpRequest;と書かれており、

df=function(a,b,c,d){
		var e=W.XMLHttpRequest;
		if(!e)return!1;
		var f=new e;
		if(!("withCredentials"in f))return!1;

onreadystatechangeでhttps://stats.g.doubleclick.net/j/collect? となっているので、
Ajaxで非同期で送っているようですな。

f.setRequestHeader("Content-Type","text/plain");
	f.onreadystatechange=function(){
		if(4==f.readyState){if(d)try{var a=f.responseText;
			if(1>a.length||"1"!=a.charAt(0))Ra("xhr","ver",a),b();
			else if...

つまり、cookieなどを取得し、ga.jsで処理して、Ajaxでサーバー側に送っているということでしょうか。
すると、Ajaxからですね。

gaがデータを送信しているように見えるdoubleclick.netとは?

doubleclick.net 
アクセスすると、doubleclickbygoogle にリダイレクトされます。。よくわからないですね。トラッキングのデータがすべて入ってくるので、広告関係をやっているのでしょうか?サイトを見ると、adコンテンツばかりです。
googleの検索アルゴリズムと、double clickが無関係(な訳ないか)なのか、どう連携しているのかも気になるところですが、運営がgoogleになっている。。
https://www.doubleclickbygoogle.com/

再び、ga.jsですが、どうやってデータを送っているのか、よくわかりません。この変だと思うのですが。。。

return"https:"==J.location.protocol||M.G?"https://ssl.google-analytics.com":"http://www.google-analytics.com"},
														Ce=function(a){
															this.name="len";this.message=a+"-8192"},
															De=function(a){
																this.name="ff2post";
																this.message=a+"-2036"},Sa=function(a,b,c,d){b=b||Fa;if(d||2036>=a.length)gf(a,b,c);
																	else if(8192>=a.length){
																		if(0<=W.navigator.userAgent.indexOf("Firefox")&&![].reduce)throw new De(a.length);