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に配列で渡したい

phpからmongodbにinsert

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

$bulk = new MongoDB\Driver\BulkWrite;
$bulk->insert(['visit' => 'new user', 'referrer'=>'/']);
$mng->executeBulkWrite('app.na007', $bulk);

echo "finished";

入りました。

phpのデータが配列の場合、そのままinsertできます。

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

$array = array('visit' => 'return user', 'referrer'=>'/index.php');
$bulk = new MongoDB\Driver\BulkWrite;
$bulk->insert($array);
$mng->executeBulkWrite('app.na007', $bulk);

echo "finished";

素晴らしい!いいですね♪

ちなみに、既にあるcollectionと同じcollectionをつくろうとすると、
以下のように、already existsとなります。
> db.createCollection(‘na007’);
{ “ok” : 0, “errmsg” : “collection already exists”, “code” : 48 }

新しく008のcollectionにdocumentを入れたい場合
->コードに変更なし

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

$array = array('visit' => 'return user', 'referrer'=>'/index.php');
$bulk = new MongoDB\Driver\BulkWrite;
$bulk->insert($array);
$mng->executeBulkWrite('app.na008', $bulk);

echo "finished";

あ、nosqlなので、mysqlのようにifexistでtableを取得して、なければtableをcreate なんて必要はないんでした。完全に忘れていました。なんか、rubyを始めて触った時と同じような感覚になります。

phpでmongodbからデータをfind();

昨日つくったDB名:app、collection:na007をphpで取得します。

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

$filter = [];
$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);
}

Nice!
stdClassのobjectで取れるんですね。

mysqlのselectに慣れてしまったせいか、恐る恐る触ってます。
あ、twitterのsessionがjsonなのは、twitter analyticsにno sql使ってるからでしょうか?

/lib64/libc.so.6: version `GLIBC_2.14′ not found

php.iniにextension=mongo.soを通しても、
/lib64/libc.so.6: version `GLIBC_2.14′ not found

glibcのversion確認

# ldd --version
ldd (GNU libc) 2.23

2.14より新しいやんけ。。

もう嫌だ。
mongodbは諦めて、google big queryを物色し始める。
https://cloud.google.com/bigquery/?hl=ja
google big queryの料金
https://cloud.google.com/bigquery/pricing?hl=ja
>BigQuery の料金は、ストレージの定額料金とクエリの使用料金に基づいています。
>毎月 10 GB まで無料。
え、10GB? iphone8の最も低いスペックで64GBですぞ。。。

ということで、再度mongoDB phpドライバのインストールに挑戦
そもそもpearってなんだ、ということで、
pearをアップデートしてみる。

# yum update --enablerepo=remi-php56 php-pear

再度,peclをコマンドラインで打つ

pecl install mongo

Build process completed successfully
Installing ‘/usr/lib64/php/modules/mongodb.so’
install ok: channel://pecl.php.net/mongodb-1.4.2
configuration option “php_ini” is not set to php.ini location
You should add “extension=mongodb.so” to php.ini

あ~まじかよ、朝から6~7時間位、これしかやってないんですけど。

viでphp.iniに”extension=mongodb.so” を追加して、httpd restart

phpinfo()

php-pearを最新にしてpecl install mongoしないと駄目なのね。
どっか旅に出たい。

mongoDB PHPドライバのインストール

先ほど作ったcollectionにアクセスしたいと思います。

$m = new Mongo();
$db = $m0>selectDB("app");
$col = $db->selectCollection("na007");
$doc = $col->find();
var_dump($doc);

おっと
192.168.33.1:49742 [500]: /test4.php – Class ‘Mongo’ not found in /home/vagrant/cookie/test4.php on line 2

pearをインストール

yum install php-pear
pear upgrade --force Archive_Tar
pear upgrade --force Console_Getopt
pear upgrade PEAR

>>XML Extension not found
なに!?

こちらの記事を参考に、php -m とphp -n -mを打つ
https://serverfault.com/questions/589877/pecl-command-produces-long-list-of-errors

$ php -m
bz2
calendar
...
xml

[vagrant@localhost ~]$ php -n -m
Core
date
ereg
filter
hash
libxml
mhash
openssl
pcntl
pcre
readline
Reflection
session
SPL
standard
zlib

vi `which pecl`で、-nを削除します。

#!/bin/sh
exec /usr/bin/php -C -n -q -d include_path=/usr/share/pear \
    -d date.timezone=UTC \
    -d output_buffering=1 /usr/share/pear/peclcmd.php "$@"
pecl install mongo

Download of “pecl/mongo” succeeded, but it is not a valid package archive

なに????
stack overflowを見ます。
https://stackoverflow.com/questions/25590621/pecl-install-mongo-command-for-mongo-1-5-5-tgz-produce-invalid-tgz-error

再度インストール

sudo pecl install --nocompress mongo

引き続き、
Download of “pecl/mongo” succeeded, but it is not a valid package archive

頭来た、php.netを参考に手動でインストール
http://php.net/manual/ja/mongo.installation.php

$ tar zxvf mongo-1.6.16.tar
$ cd mongo-1.6.16
$ phpize
$ ./configure
$ make all
$ sudo make install

mongo.soが/usr/lib64/php/modulesに通ったので、php.iniでextension=mongo.soを追加
httpd restart

error messasge
/lib64/libc.so.6: version `GLIBC_2.14′ not found
はあ???

mongoDB基本操作

// app dbを使う
use app
// collection ‘na007’ を作成
db.createCollection(‘na007′);
// collectionにdocumentをinsert
db.na007.insert({訪問時間:’2018-04-15 07:27:13′, ip:’192.168.33.1’});
// collection ‘na007’からfind
db.na007.find();

nosqlなので、data typeを指定する必要がありません。
先頭のカラムに”_id”: ObjectID(“hogehoge”); というidが自動的に附番されています。これは、ハッシュ化されたような英数字の為、autoincrementではなさそうです。(mongoDBの中のアルゴリズムで、順番をソートできるようにしているかもしれません)

なかなかお洒落ですね。気になるのはdocumentのカラム

// シングルクオテーションで囲ってinsert
db.na007.insert({‘visit’:’Returned User’, ‘referrer’:’/view.php’});

->結果
{ “_id” : ObjectId(“5ad283afb83c546bc5d039bd”), “visit” : “Returned User”, “referrer” : “/view.php” }
囲っても囲わなくても、同じですね。

documentがjsonみたいなので、jsonと相性がいいかもしれませんね。
insert、updateやfind()の機能はいっぱいあるようですが、全通りやっても覚えきれないので、作りながら必要な機能を学んでいきたいと思います。