Bounce rateとExite rateを表示

$date1 = date("Y-m-d H:i:s", strtotime("- 2 day"));
// $date2 = date("Y-m-d H:i:s", strtotime("- 1 day"));
$date2 = date("Y-m-d H:i:s");
echo $date1 ." ~ ".$date2 ."<br>";

$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$filter =  [
	'date' => [ '$gte' => $date1, '$lte' => $date2]
];
$options = [
  'projection' => ['_id' => 0],
  'sort' => ['_id' => -1],
];
$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $mng->executeQuery('app.na007', $query);

foreach ($cursor as $document) {
  // var_dump($document);
  $pv[] = $document->date;
  $cookie[] = $document->cookie;
  $session[] = $document->session;
  if(!is_null($document->referrer)){
  $referrer = $document->referrer;
  }
}
// var_dump($session);
$uu = array_unique($cookie);
$session = array_unique($session);
$bounce = (count($pv) - count($referrer))/ count($pv) * 100;
$exit = (count($pv) - count($session))/ count($pv) * 100;
echo "<br>Users :".count($uu)."<br>";
echo "Pageviews :".count($pv)."<br>";
echo "Bounce rate :" .sprintf('%.2f',$bounce)."%<br>";
echo "Exit rate:" .sprintf('%.2f',$exit)."%<br>";

直帰率、離脱率のところまで一通りできたので、これをAzureに載せたい。

sessionがsetされていた時は、そのままsessionIDを使う

sessionは、リクエスト毎に再setしますが、IDだけは、json.parseした値を再度setします。

var unix = Math.floor((new Date).getTime()/1E3);
var visit = "New User";
var char = "abcdefghijklmnopqrstuvwxyz123456789";
        var id = "";
        for(var i=0; i<10; i++){
            id += char[Math.floor(Math.random()*35)];
        }
if(navigator.cookieEnabled){
    var all=document.cookie + ";";
    var cStart = all.indexOf("_na=",0);
    if(cStart == -1){   
        var expire = new Date();
        expire.setTime(expire.getTime() + 1000*3600*24*365*2);
        document.cookie="_na=NA1."+id+"."+unix+";expires=" + expire.toUTCString();
        var data = '{"path":"'+location.pathname+'", "time":"'+unix+'","id":"'+id+'"}';
        window.sessionStorage.setItem(['ScribeTransport'],[data]);
        a.push(['cookie',id]);
        a.push(['vist',visit]);
        a.push(['referrer',document.referrer]);
    } else {
        visit = "Returned User";
        a.push(['visit',visit]);
        var cEnd = all.indexOf(";",cStart);
		var cID = all.substring(cStart+8,cEnd - 11); //_na=NA1.0000000000.
		a.push(['cookie',cID]);
        var c = window.sessionStorage.getItem(['ScribeTransport']);
        if(c){
            d = JSON.parse(c);
            var data = '{"path":"'+location.pathname+'", "time":"'+unix+'","id":"'+d.id+'"}';
            window.sessionStorage.setItem(['ScribeTransport'],[data]);
            a.push(['referrer',d.path]);
            a.push(['avgtime',(unix - d.time)]);        
        }else {
            var data = '{"path":"'+location.pathname+'", "time":"'+unix+'","id":"'+id+'"}';
            window.sessionStorage.setItem(['ScribeTransport'],[data]);
        }       
    }
}

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

OK!

mongoDBで~以上、~以下

analytics.php

$date1 = date("Y-m-d H:i:s", strtotime("- 2 day"));
$date2 = date("Y-m-d H:i:s", strtotime("- 1 day"));
echo $date1 ."~".$date2 ."<br>";


$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");

$filter =  [
	'date' => [ '$gte' => $date1, '$lte' => $date2]
];
$options = [
  'projection' => ['_id' => 0],
  'sort' => ['_id' => -1],
];
$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $mng->executeQuery('app.na007', $query);

foreach ($cursor as $document) {
  // var_dump($document);
  $pv[] = $document->date;
  $cookie[] = $document->cookie;
  if(!is_null($document->referrer)){
  $referrer = $document->referrer;
  }
}
$uu = array_unique($cookie);
echo "<br>Users :".count($uu)."<br>";
echo "Pageviews :".count($pv)."<br>";
$bounce = (count($pv) - count($referrer))/ count($pv);
echo "Bounce rate :" .sprintf('%.2f',$bounce)."<br>";

Bounce rateは直帰率です。

Exitは離脱率なので、uniqueなsession / PVですね。やはり、sessionのIDは必要のようです。
twitterのsessionのjsonでいう、idあたりでしょうか。

クリックで開閉するアコーディオン

<style>
	.child{
		display:none;
	}
</style>

<ul>
	<li>
		<a class="toggle">サービス別</a>
		<ul class="inner child">
			<li><a href="#demo01">ビッグデータBI</a></li>
			<li><a href="#demo01">クラウドコンピューティング</a></li>
			<li><a href="#demo01">決済</a></li>
			<li><a href="#demo01">CRM(顧客管理)</a></li>
			<li><a href="#demo01">オープンソースソフトウェア</a></li>
		</ul>
	</li>
	<li>
		<a class="toggle">業種別</a>
		<ul class="inner child">
			<li>官公庁・自治体</li>
			<li>教育</li>
			<li>医療・ヘルスケア</li>
			<li>金融</li>
			<li>製造</li>
			<li>流通</li>
		</ul>
	</li>
	<li>
		<a class="toggle">導入事例</a>
		<ul class="inner child">
			<li>NASA</li>
			<li>学校法人伊藤学園</li>
			<li>東京信用金庫</li>
			<li>橋梁モニタリングシステム</li>
			<li>充電管理システム</li>
		</ul>
	</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	function demo01(){
		$(this).next().slideToggle(300);
	}
	$(".toggle").click(demo01);
</script>

slide toggleで開閉します。

jQuery アコーディオン

<style>
pannel {
	width:500px;
}
#pannel > dt {
	border-bottom: solid 1px white;
	background-color: #00BCD4;
	color: white;
	cursor: pointer;
	padding: 10px;
	font-weight: bold;	
}
#pannel > dd {
	border: solid 1px Sliver;
	margin: 0px;
	padding: 10px;
}

</style>
<dl id="pannel">
	<dt>Real-Time</dt>
	<dd>active users on site</dd>
	<dt>Audience</dt>
	<dd>Users, New Users, Sessions</dd>
	<dt>Acquision</dt>
	<dd>Oorganic Search</dd>
</dl>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
	$('#pannel > dd').hide();
	$('#pannel > dt')
		.click(function(e){
			$('+dd', this).slideToggle(100);
		})
});
</script>

PHP・mongoDBでqueryを取得する際にfilterを使う

collectionに4/15のdocumentが3件、4/16のdocumentが2件入っています。

‘$gte’ => $dateがそれ以上という意味らしいです。
analytics.php

$date = date("Y-m-d", strtotime("- 1 day"));
$date = date("Y-m-d");
echo $date ."<br>";


$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");

$filter = [
	'date' => [ '$gte' => $date]
];
$options = [
  'projection' => ['_id' => 0],
  'sort' => ['_id' => -1],
];
$query = new MongoDB\Driver\Query($filter, $options);

$cursor = $mng->executeQuery('app.na007', $query);

foreach ($cursor as $document) {
  var_dump($document);
}

今日のデータが取得できました。

配列をchart.jsに表示したいですね。

PHP・mongoDBで比較演算子を使う

‘date’ => [ ‘$gte’ => $date]とします。

$date = date("Y-m-d");
echo $date ."<br>";


$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");

$filter = [
	'date' => [ '$gte' => $date]
];
$options = [
  'projection' => ['_id' => 0],
  'sort' => ['_id' => -1],
];
$query = new MongoDB\Driver\Query($filter, $options);

$cursor = $mng->executeQuery('app.na007', $query);

foreach ($cursor as $document) {
  var_dump($document);
}

mongodbにトラッキング情報をinsert

挿入するのは、アクセス日時、ip、新規・2回目以降のユーザー、cookieのユニークID、リファラー、前ページの平均滞在時間、閲覧ページ

datasetは以下のような連想配列
[“date”]=> string(19) “2018-04-15 23:12:01” [“ip”]=> string(12) “192.168.33.1” [“visit”]=> string(13) “Returned User” [“cookie”]=> string(10) “a167mn677r” [“referrer”]=> string(9) “/view.php” [“avgtime”]=> string(2) “25” [“page”]=> string(9) “/view.php”

na.js
配列のkeyの名称は、google analyticsの言語をEnglish USにして参考にネーミング

var unix = Math.floor((new Date).getTime()/1E3);
var visit = "New User";
if(navigator.cookieEnabled){
    var all=document.cookie + ";";
    var cStart = all.indexOf("_na=",0);
    if(cStart == -1){   
        var char = "abcdefghijklmnopqrstuvwxyz123456789";
        var id = "";
        for(var i=0; i<10; i++){
            id += char[Math.floor(Math.random()*35)];
        }
        var expire = new Date();
        expire.setTime(expire.getTime() + 1000*3600*24*365*2);
        document.cookie="_na=NA1."+id+"."+unix+";expires=" + expire.toUTCString();
        a.push(['cookie',id]);
        a.push(['vist',visit]);
        a.push(['referrer',document.referrer]);
    } else {
        visit = "Returned User";
        a.push(['visit',visit]);
        var cEnd = all.indexOf(";",cStart);
		var cID = all.substring(cStart+8,cEnd - 11); //_na=NA1.0000000000.
		a.push(['cookie',cID]);
        var c = window.sessionStorage.getItem(['ScribeTransport']);
        if(c){
            d = JSON.parse(c);
            a.push(['referrer',d.path]);
            a.push(['avgtime',(unix - d.time)]);        
        }       
    }
}
var data = '{"path":"'+location.pathname+'", "time":"'+unix+'"}';
window.sessionStorage.setItem(['ScribeTransport'],[data]);

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

doubleclick.php
1.アカウントIDをmongoのcollection名にしたいので、postされたデータから、アカウントIDのみ切り抜いて、array_spliceでそれ以降をdata setにする。
2.連想配列をmongodbにinsert

$data = array("date"=>date("Y-m-d H:i:s"));
$audience = $_POST['userdata']; 
$mongo = "app.na".$audience[0][1];
$audience = array_splice($audience, 1);
foreach($audience as $value){
	$data += array($value[0]=>$value[1]); 
}
var_dump($data);

$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$bulk = new MongoDB\Driver\BulkWrite;
$bulk->insert($data);
$mng->executeBulkWrite($mongo, $bulk);

echo "finished!!!";

うおお、上手く入っている。嬉し~

同じcookie、異なるセッションでアクセスします。

あれ、待てよ、なんか違う気がしてきた。
セッションにもユニークなID発行するべきなんじゃないか...?
ちょっと混乱してきたが、queryのviewを作りながら修正していきましょう。

analyticsの設計を考えていく

まず、最低限必要な項目
1.ページビュー…collectionのdocumentの数、queryのoptionで日付指定
2.ページ訪問数…cookieのユニークなid、queryのoptionで日付指定
3.直帰率…(ページビュー-(ドメインのリファラーがあるページビュー+1))/ページビュー || cookieの重複がないdocumentの数/ページビュー
4.離脱率…ユニークなcookie idの数 / documentの数

これらの指標に必要な項目は、
a.cookieの値
b.アクセスのdate
c.アクセスしたページ
d.リファラ

上記をmongodbに配列で渡したい