ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

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にもこだわりたい。

初期画面

<?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か、あたりの指標なので、そこをチャレンジしたい。