Month: April 2018

IBM developerWorks

IBMって、どうなんでしょう？
勝屋さんが元IBMのVCですよね。

とりあえず、翻訳系のサービスが作りたい。
っま、動かしながら考えましょう。

watson APIs　Language Translator

The IBM Watson Language Translator service converts text input in one language into a destination language for the end user using background from domain-specific models. Translation is available among Arabic, Chinese (Simplified and Traditional), English, French, Portuguese, German, Spanish, Dutch, Turkish, Russian, Korean, Italian and Polish (some languages may not be available for all domains).

日本語　原文

現在、我が国では、IT投資が活発化するとともに、グローバルな事業展開が一層の拡大傾向にあります。一方で、先端IT技術を活用した新しいビジネスモデルへの需要が高まっています。企業に対しても、持続可能な社会の実現を見据えた投資によってイノベーションを発揮し、事業を通じた社会課題の解決に積極的に取り組んでいくことが求められています。

watson 翻訳結果(英語)
想像以上に悪くない気がする。。

In Japan, IT investment is becoming more active, and global business expansion is becoming more and more expanding.On the other hand, there is a growing demand for new business models using cutting-edge IT technologies.It is also necessary for companies to exert innovation through investment that is a view to realizing a sustainable society, and to actively work on solving social issues through business.

あああああああああああああああああ
Japanese からは Englishしかないいいいいいいいいいいい
というか、英語以外は、ほとんど英語への翻訳しかないですね。

tableの背景色を縞々にする

偶数なら　tr:nth-child(even)、奇数なら　tr:nth-child(odd)で指定します。

#table tr:nth-child(even) { 
   background-color: #ECECEC;
  }

PC版

SP版

大分見た目が良くなった(笑)

さあ、次は、ドメインを取得して、Vagrant -> VPSのサーバー側の構築。
バーチャルホスト、mongoDB、php mongoDBドライバーのインストールまでは何も問題なく終了。

trafficの分類

document.referrerで取得したURLにRegular Expressionで該当すればフラグを立てたい。

1.Organic Search
https://www.google.co.jp
https://www.bing.com/
https://www.yahoo.co.jp/
https://www.msn.com/ja-jp/
http://www.baidu.com/

2.Social
https://www.facebook.com/
https://twitter.com/?lang=ja
https://www.instagram.com/?hl=ja
https://line.me/ja/

3.Direct

4.Referral

早速書いてみる。

$url = "ttps://www.google.co.jp/search?q=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&oq=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&aqs=chrome..69i57j69i61l3j0l2.3764j0j7&sourceid=chrome&ie=UTF-8";
if(preg_match("/www.google/", $url)){
  $channel = "Organic Search"; 
  $media = "google";
} else{
  $channel = "else";
}
echo $channel;

項目を増やします。yahooはco.jpもcomも検索時に、https://search.yahoo.comとサブドメインにsearchが付きます。(分かり易い！)

$url = "http://hpscript.com/ip/";
if(empty($url)){
  $channel = "Direct"; 
}elseif(preg_match("/www.google/", $url)){
  $channel = "Organic Search"; 
  $media = "google";
}elseif(preg_match("/www.bing/", $url)){
  $channel = "Organic Search"; 
  $media = "bing";
}elseif(preg_match("/search.yahoo/", $url)){
  $channel = "Organic Search"; 
  $media = "yahoo";
}elseif(preg_match("/www.baidu/", $url)){
  $channel = "Organic Search"; 
  $media = "baidu";
}elseif(preg_match("/www.facebook/", $url)){
  $channel = "Social"; 
  $media = "facebook";
}elseif(preg_match("/twitter/", $url)){
  $channel = "Social"; 
  $media = "twitter";
}elseif(preg_match("/www.instagram/", $url)){
  $channel = "Social"; 
  $media = "twitter";
}elseif(preg_match("/line/", $url)){
  $channel = "Social"; 
  $media = "line";
}else{
  $channel = "Referral";
}
echo $channel;

doubleclick.php(js受け取り)のphpで処理を書いていきます。

if(!is_null($data["acquisition"])){
	$url = $data["acquisition"];
	if(empty($url)){
	  $channel = "Direct"; 
	  $media = "(not set)";
	}elseif(preg_match("/www.google/", $url)){
	  $channel = "Organic Search"; 
	  $media = "google";
	}elseif(preg_match("/www.bing/", $url)){
	  $channel = "Organic Search"; 
	  $media = "bing";
	}elseif(preg_match("/search.yahoo/", $url)){
	  $channel = "Organic Search"; 
	  $media = "yahoo";
	}elseif(preg_match("/www.baidu/", $url)){
	  $channel = "Organic Search"; 
	  $media = "baidu";
	}elseif(preg_match("/www.facebook/", $url)){
	  $channel = "Social"; 
	  $media = "facebook";
	}elseif(preg_match("/twitter/", $url)){
	  $channel = "Social"; 
	  $media = "twitter";
	}elseif(preg_match("/www.instagram/", $url)){
	  $channel = "Social"; 
	  $media = "twitter";
	}elseif(preg_match("/line/", $url)){
	  $channel = "Social"; 
	  $media = "line";
	}else{
	  $channel = "Referral";
	  $media = $url;
	}
	$data = $data + array('channel'=>$channel, 'media'=>$media);
}

directの場合は、mediaは(not set)

urlがbingにマッチしたら、channelはorganic searchになります。

mongoDBにも入っています。

つづいて、データを入れてanalytics側のviewをつくっていきます。
organic, social, direct, refferalの分類はchart.jsを使いたい。

OK!!!!!!!!!!!!!!!!!!!!!!!
リファクタリングして、次はスタイリングです！
今回はweb fontを使って、fontにもこだわりたい。

document.referrer

document.referrerでどう入るか？
hpscript.comにipのディレクトリを作って、aタグを設置する。

js

a.push(['acquisition',document.referrer]);

document.referrerだと、プロトコルから入る。

リファラーを定義

<script>
Object.defineProperty(document,"referrer",
{value:"https://www.google.com/"});
console.log(document.referrer);
</script>
<a href="http://192.168.33.10:8000/wwwroot/view.php">リンク</a>

例えば、google, yahooで「機械学習」と検索すると、検索結果のURLは以下のようになる。

https://www.google.co.jp/search?q=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&oq=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&aqs=chrome..69i57j69i61l3j0l2.3764j0j7&sourceid=chrome&ie=UTF-8

https://search.yahoo.co.jp/search;_ylt=A2RA0Dp_2OVaYhIAmnaJBtF7?p=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&search.x=1&fr=top_ga1_sa&tid=top_ga1_sa&ei=UTF-8&aq=-1&oq=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&at=&aa=&ai=s2uf6ZtEQS6rZIfyd2LYHA&ts=4050

マルチドメインの場合は
-https://wwww.hoge
-https://hoge
-http://www.hoge
-http://hoge

その他検討事項
-メールの場合
-直リンク
-サブドメインがある場合

ページごとのユニークなユーザー数(cookie単位)を取得する

cookieとpageを文字列で連結して、array_uniqueでcookieとpage完全一致の重複を削除して、そこからsubstrでurlのみ切り抜いて、array_count_valuesする。
※最初、cookieとpageで連想配列をつくって、そこから、連想配列のvalueの重複削除しようとしたが、何度やってもうまくいかず、これ考えるのに、4~5時間くらいかかった。。。

foreach ($cursor as $document) {
  if(!is_null($document->referrer) and $document->referrer != ""){
  $referrer = $document->referrer;
  $avgtime = $document->avgtime;
  $data1[] = array($referrer=>$avgtime); 
  }
  $page[] = $document->page;

  $a = $document->cookie;
  $b = $document->page;
  $data2[] = $a.$b;
}

$unique = array_values(array_unique($data2));
foreach($unique as $value){
    $urls[] = substr($value, 10);
}
$urls = array_count_values($urls);
arsort($urls);
var_dump($urls);

よしよしよし

繋げると

viewに反映

次は鬼門のリファラー関係
1.document.referrer　でどれだけ取れるか
2.ga.js・twitterのsessionがどうやって定義しているか参考にする
3.vagrantだけでなく、実ドメインからのリンクでテストしながらつくる
->GAのようにorganic searchの検索ワードは抽出できないので、代替案を考える

リファラーからページごとの滞在時間を計算してPVと一緒に表示する

array_merge_recursiveでPVの配列と平均滞在時間の配列同士を結合させて、tableで表示する。

<?php 

$date1 = date("Y-m-d", strtotime("-10 day"));
  $date2 = date("Y-m-d H:i:s");

$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$filter =  &#91;
    '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) {
  if(!is_null($document->referrer) and $document->referrer != ""){
  $referrer = $document->referrer;
  $avgtime = $document->avgtime;
  $data[] = array($referrer=>$avgtime); 
  }
  $page[] = $document->page;   
}
// var_dump($data);

function arraySum(array $arr)
{
    $res = [];
    if (is_array($arr)) {
        foreach ($arr as $val) {
            foreach ($val as $k => $v) {
                if (isset($res[$k])) {
                    $res[$k] = (double)($res[$k] + $v)/2;
                } else {
                    $res[$k] = (double)$v;
                }
            }
        }
    }
    return $res;
}
$data = arraySum($data);
// var_dump(arraySum($data));
$page = array_count_values($page);
// var_dump($page);
$newdata = (array_merge_recursive($page, $data));
arsort($newdata);
print_r("<pre>");
var_dump($newdata);
print_r("</pre>");
function s2h($avgtime){
  $hours = floor($avgtime / 3600);
  $minutes = floor(($avgtime / 60)%60);
  $seconds = $avgtime % 60;
  $hms = sprintf("%02d:%02d:%02d", $hours, $minutes, $seconds);
  return $hms; 
}
?>
<table>
<th>Page</th><th>PageView</th><th>Avg time</th>
      <?php
        $i = 0;
        foreach($newdata as $key => $value){
          if($i < 10 and !is_null($value&#91;1&#93;)){
            echo "<tr>";
            echo "<td>".$key."</td><td>".$value[0]."</td><td>".s2h($value[1])."</td>";
            echo "</tr>";
          } else {
            echo "<tr>";
            echo "<td>".$key."</td><td>".$value."</td><td>00:00:00</td>";
            echo "</tr>";
          }
          $i++;    
        }
      ?>
</table>

あ、ページごとのユニークなユーザー数もカウントしたくなってきた(笑)

リファラーの平均滞在時間を算出する

foreachでkeyにvalueを入れる際に、すでにvalue1があれば、(value1 + value2)/2とすれば、valueの平均が算出されるので、それをforeachで回せばよい。
具体的には、$res[$k] = ($res[$k] + $v)/2;　のところ。

foreach ($cursor as $document) {
  if(!is_null($document->referrer) and $document->referrer != ""){
  $referrer = $document->referrer;
  $avgtime = $document->avgtime;
  $data[] = array($referrer=>$avgtime); 
  }  
}
var_dump($data);

function arraySum(array $arr)
{
    $res = [];
    if (is_array($arr)) {
        foreach ($arr as $val) {
            foreach ($val as $k => $v) {
                if (isset($res[$k])) {
                    $res[$k] = ($res[$k] + $v)/2;
                } else {
                    $res[$k] = $v;
                }
            }
        }
    }
    return $res;
}
var_dump(arraySum($data));

リファラーがある場合の各ページの平均滞在時間

tracking code取得画面を作成する

初期画面

<?php if($_GET&#91;"tracking"&#93; == 'tracking-code'): ?>
  hoge
<?php else: ?>
<?php endif; ?>

クリックするとコピーする機能を付けたい。
onclick=”this.select(0,this.value.length)”と書くと、クリックで全選択できる。

<?php if($_GET&#91;"tracking"&#93; == 'tracking-code'): ?>
  <b>サイトタグ(デモ)</b><br>
  これは、サイトのユニバーサルアナリティクストラッキングコードです。このプロパティ(アナリティクストラッキングコード)を最大限に活用できるよう、このコードをコピーして、トラッキングする全てのページのbodyタグの前に貼り付けてください。<br>
  ntag.jsは、サイト測定、コンバージョン トラッキング、リマーケティング サービス用のウェブのタグ付けライブラリです。ntag.jsを使用すると、タグの管理や実装が容易になり、公開される最新の動的な機能や統合のメリットをすぐに活用することができます。<br><br>
  <textarea name="tracking-code" rows="13" cols="75" onclick="this.select(0,this.value.length)">
  <script type="text/javascript">
    var a = [['acount','007'],["ip","<?php echo $_SERVER&#91;'REMOTE_ADDR'&#93;; ?>"]];
    var b =['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 = b[i];
        document.body.appendChild(script);
        if(i++ < 2){
            script.onload = appendScript;
        }
    })();
</script>
</textarea><br><br>
The Site Tag provides streamlined tagging across site measurement, conversion tracking, and remarketing products – giving you better control while making implementation easier. By using ntag.js, you will be able to benefit from the latest dynamic features and integrations as they become available.

よく見たら、echo $_SERVER[‘REMOTE_ADDR’];が上手くいってない。

htmlspecialcharでエスケープします。

<?php 
$hoge = '<?php echo $_SERVER&#91;\'REMOTE_ADDR\'&#93;; ?>';
?>
<?php echo htmlspecialchars($hoge);?>

修正しました。

問題はこっからどうするかだな。。
GAでよく見るのはページごとのavg timeと、リファラーがOrganic・social・directか、あたりの指標なので、そこをチャレンジしたい。