Cookieを利用してアクセス解析から自分を除外する手順

2015/02/23

Cookieを利用してアクセス解析タグなどの特定のJavaScriptタグの読み込みを、
「する・しない」といった制御はCookieを利用すると簡単に行えます。
ここでは、jquery.js　と　jquery.cookie.jsを利用した実装例をご紹介します。

Cookieを利用してアクセス解析から自分を除外する手順

今回利用するアクセス解析は「NINJA ANALYZE」を例にご紹介します。

解析タグがJavaScriptであれば、どのアクセス解析でも手順は同じです。

尚、導入に当たっては、jquery.js　と　jquery.cookie.jsのダウンロードを行って、
スクリプトが読み込み可能な状態である必要があります。

手順は以下でご紹介しています。

jquery.cookie.jsを利用したCookie制御

公開ディレクトリ内の「js」に展開したものとして、
以下のタグをページに設定します。

<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>

1 2	<script type="text/javascript" src="/js/jquery-2.1.3.js"></script> <script type="text/javascript" src="/js/jquery.cookie.js"></script>

実装例

以下のような関数をそれぞれ定義して、Cookieを制御します。
スクリプトの外部化は適宜行って下さい。

ブラウザにCookieを設定する管理ページ用

このスクリプトを自分専用のページに配置して、
自分のブラウザに対して、「ninja=exclusion」というキーと値のcookieをセットします。

<script type="text/javascript">
function set_cookie(){
	$.cookie("ninja", "exclusion", { 
		expires: 365,
		path:"/",
		domain:location.hostname
		});
}
function del_cookie(){
	$.removeCookie("ninja", { 
		expires: -1,
		path:"/",
		domain:location.hostname
	});
}
</script>

function set_cookie(){

$.cookie("ninja", "exclusion", {

expires: 365,

path:"/",

domain:location.hostname

});

}

function del_cookie(){

$.removeCookie("ninja", {

expires: -1,

path:"/",

domain:location.hostname

});

}

</script>

HTML側ではボタンか何かから関数を呼び出して利用する感じです。

<input type="button" id="inclusion" value="自分のアクセス解析を含む" onclick="del_cookie()">
<input type="button" id="exclusion" value="自分のアクセス解析を除く" onclick="set_cookie()">

1 2	<input type="button" id="inclusion" value="自分のアクセス解析を含む" onclick="del_cookie()"> <input type="button" id="exclusion" value="自分のアクセス解析を除く" onclick="set_cookie()">

公開ページへのアクセス解析導入タグ

アクセス解析を導入する際には、
解析タグをifで囲むことで条件分岐を行います。

「//自分以外のアクセスの場合の処理」の部分に対して、
各社の解析タグの本体を挿入します。

「//自分によるアクセスの処理(cookie有り)」の部分に対しては、
「cookieがセットされている場合＝自分」と判断し、
アクセス解析のタグを読み込みません。何かメッセージでも表示するといいでしょう。

<script type="text/javascript">
res = $.cookie("ninja");
if(typeof(res) == "undefined"){
	//自分以外のアクセスの場合の処理
}else{
	//自分によるアクセスの処理(cookie有り)
}
</script>

res = $.cookie("ninja");

if(typeof(res) == "undefined"){

//自分以外のアクセスの場合の処理

}else{

//自分によるアクセスの処理(cookie有り)

}

</script>

動作環境

通常は、上記のように管理用のページでCookieを設定し、
公開ページにはCookieの条件分岐と、解析タグを設定しますが、
ここでは動作確認を目的として、１ページで実装しご紹介します。

以下のようなHTMLページでCookie動作の確認を行います。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
</head>
<body>
<h1>Ninja Analyzeアクセス解析の回避検証ページ</h1>
<p>このページはcookieの状態によってアクセス解析の回避を確認するものです。<br />
cookieが設定されていない場合にはアクセス解析されます。</p>
<p style="color:green;">※右上にバナーが表示されている場合には解析中です。<br />
　バナーが表示されていない場合には、解析タグは実行されていません。</p>
<p id="res"></p>
<input type="button" id="inclusion" value="自分のアクセス解析を含む" onclick="del_cookie()">
<input type="button" id="exclusion" value="自分のアクセス解析を除く" onclick="set_cookie()">
<a href="/ninja_analyze/">検証ページへ</a> <a href="/ninja_analyze/subdir/">サブディレクトリの確認</a>


<script type="text/javascript">
res = $.cookie("ninja");
if(typeof(res) == "undefined"){
	//自分以外の為、アクセス解析
	//<!-- NINJA ANALYZE -->
	(function(d) {
		var sc=d.createElement("script"),
		ins=d.getElementsByTagName("script")[0];
		sc.type="text/javascript";
		sc.src=("https:"==d.location.protocol?"https://":"http://") + "code.analysis.shinobi.jp" + "/ninja_ar/NewScript?id=00233009&hash=76c29f70&zone=36";
		sc.async=true;
		ins.parentNode.insertBefore(sc, ins);
	})(document);
	//<!-- /NINJA ANALYZE -->
	$("#res").html('<p>アクセス解析 <span style="color:blue;font-weight:bold;">実施中</span> です。<br />cookieの値は '+res+' でした。</p>');
}else{
	//自分によるアクセス
	$("#res").html('<p>アクセス解析 <span style="color:red;font-weight:bold;">回避中</span> です。<br />cookieの値は '+res+' でした。</p>');
}

function set_cookie(){
	$.cookie("ninja", "exclusion", { 
		expires: 365,
		path:"/",
		domain:location.hostname
		});
	ck = $.cookie("ninja");
	$("#res").html('<p>cookieに '+ck+' をセットしました</p><p style="color:red;">ページを更新してください。</p>');
}
function del_cookie(){
	$.removeCookie("ninja", { 
		expires: -1,
		path:"/",
		domain:location.hostname
	});
	ck = $.cookie("ninja");
	$("#res").html('<p>cookieからninjaを削除しました。値は '+ck+' です。</p><p style="color:red;">ページを更新してください。</p>');
}
</script>

</body>
</html>

<head>

</head>

<body>

<h1>Ninja Analyzeアクセス解析の回避検証ページ</h1>

<p>このページはcookieの状態によってアクセス解析の回避を確認するものです。<br />

cookieが設定されていない場合にはアクセス解析されます。</p>

<p style="color:green;">※右上にバナーが表示されている場合には解析中です。<br />

　バナーが表示されていない場合には、解析タグは実行されていません。</p>

<a href="/ninja_analyze/">検証ページへ</a> <a href="/ninja_analyze/subdir/">サブディレクトリの確認</a>

res = $.cookie("ninja");

if(typeof(res) == "undefined"){

//自分以外の為、アクセス解析

//

(function(d) {

var sc=d.createElement("script"),

ins=d.getElementsByTagName("script")[0];

sc.type="text/javascript";

sc.src=("https:"==d.location.protocol?"https://":"http://") + "code.analysis.shinobi.jp" + "/ninja_ar/NewScript?id=00233009&hash=76c29f70&zone=36";

sc.async=true;

ins.parentNode.insertBefore(sc, ins);

})(document);

//

$("#res").html('<p>アクセス解析 <span style="color:blue;font-weight:bold;">実施中</span> です。<br />cookieの値は '+res+' でした。</p>');

}else{

//自分によるアクセス

$("#res").html('<p>アクセス解析 <span style="color:red;font-weight:bold;">回避中</span> です。<br />cookieの値は '+res+' でした。</p>');

}

function set_cookie(){

$.cookie("ninja", "exclusion", {

expires: 365,

path:"/",

domain:location.hostname

});

ck = $.cookie("ninja");

$("#res").html('<p>cookieに '+ck+' をセットしました</p><p style="color:red;">ページを更新してください。</p>');

}

function del_cookie(){

$.removeCookie("ninja", {

expires: -1,

path:"/",

domain:location.hostname

});

ck = $.cookie("ninja");

$("#res").html('<p>cookieからninjaを削除しました。値は '+ck+' です。</p><p style="color:red;">ページを更新してください。</p>');

}

</script>

</body>

</html>

管理ページ

以下にアクセスすると、状態を表すメッセージと設定するボタンが表示されます。

http://algorhythnn.jp/ninja_analyze/

右上に広告のバナー表示がされていますので、
NINJA ANALYZEが動作しているのが確認できます。

またメッセージは「アクセス解析を実施中です」と表示されています。

これがCookieを設定していない一般のアクセス（自分以外）の表示例です。

NINJA ANALYZE一般表示例

アクセス解析を回避する

では、次に、Cookieをセットします。

[自分のアクセス解析を除く]をクリックすると、
上記の関数「set_cookie()」が呼び出され、ブラウザにCookieが設定されます。

これで、自分のアクセスであるという印がブラウザに付与されました。

メッセージには「cookieに exclusion をセットしました」と表示されます。

ページを更新します。

アクセス解析の除外Cookieを設定

尚、設定したCookieはブラウザから確認することができます。

Chromeの場合[≡]をクリックして[設定]を開き、
スクロールした下部の[詳細設定を表示…]をクリックします。

表示された「プライバシー」内の[コンテンツの設定]をクリックします。

Chromeの設定・プライバシー

[すべてのCookieとデータ]をクリックします。

すべてのCookieとサイトデータ

右上のフィールドに自分のサイトのドメインを入力して、
フィルタリングしてCookieを確認します。

以下のように設定されているCookieが表示されます。

今設定したcookieも表示されています。（ninja）

対象ドメインのCookie

設定されているCookie名をクリックすると、詳細情報が確認できます。

Cookieの詳細

戻ります。

ページを更新すると、以下のようにページの表示が変わります。

「アクセス解析回避中です。」
cookieの値は exclusion でした。

広告のバナー表示も消えています。

これで自分のアクセスでは解析がされないようになりました。

ページの更新とアクセス回避

条件分岐を行ったJavaScriptタグでサイトのすべてに導入することで、
自分のアクセスではページビューをカウントさせないように動作させることができます。

尚、オプションの「path:」に対して「”/”」を指定していることで、
ドメイン配下のすべてのディレクトリURLに対してCookieが有効になっています。

サブディレクトリにアクセスしても、アクセス回避が正しく行えていることが確認できます。

http://algorhythnn.jp/ninja_analyze/subdir/

サブディレクトリ内の有効確認

アクセス解析を再開

通常、自分のアクセスをカウントしたいことなどないと思いますが、

再び、自分のアクセスでもカウントさせたい場合には、
Cookieを削除することで一般のアクセスとおなじように

[自分のアクセス解析を含む]をクリックすると、

上記の関数「del_cookie()」が呼び出され、ブラウザからCookieが削除されます。

※尚、このデモページでCookieを設定した場合には、
[自分のアクセス解析を含む]をクリックしてCookieを削除しておくといいかと思います。

アクセス解析の再開とCookieの削除

メッセージには「cookieからninjaを削除しました。

値は undefined です。」と表示されます。

値が取れなくなっている(undefined)ことから、
Cookieが削除されていることがわかります。

削除結果

ブラウザのCookieからの削除されています。

ChromeのCookie確認

ページを更新します。

ページを更新するとCookieがありませんので、
元の一般アクセスと同じようにアクセス解析が再び開始されます。

ページの更新とアクセス解析

このようにして自分専用のCookieを設定することで、
他のユーザーと切り分けて「自分のアクセスの場合」という条件を設けることができます。

各ページに設定する場合には、以下のように判定部分のみを設定することで十分です。

<script type="text/javascript" src="/js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript">
res = $.cookie("ninja");
if(typeof(res) == "undefined"){
	//<!-- NINJA ANALYZE -->
	(function(d) {
		var sc=d.createElement("script"),
		ins=d.getElementsByTagName("script")[0];
		sc.type="text/javascript";
		sc.src=("https:"==d.location.protocol?"https://":"http://") + "code.analysis.shinobi.jp" + "/ninja_ar/NewScript?id=00233009&hash=76c29f70&zone=36";
		sc.async=true;
		ins.parentNode.insertBefore(sc, ins);
	})(document);
	//<!-- /NINJA ANALYZE -->
}
</script>

res = $.cookie("ninja");

if(typeof(res) == "undefined"){

//

(function(d) {

var sc=d.createElement("script"),

ins=d.getElementsByTagName("script")[0];

sc.type="text/javascript";

sc.src=("https:"==d.location.protocol?"https://":"http://") + "code.analysis.shinobi.jp" + "/ninja_ar/NewScript?id=00233009&hash=76c29f70&zone=36";

sc.async=true;

ins.parentNode.insertBefore(sc, ins);

})(document);

//

}

</script>

さいごに

自分のページビューでは、アクセス解析以外にも広告を表示したくないなど、
色々な制御をしたい場合もあると思います。

そんな場合には、通常利用するブラウザや端末に対して、
Cookieを仕込んでおくと処理の分岐が行えます。

尚、JavaScriptのソースは誰でも見ることができますし、
このCookie判定は”ninja”というキーのCookieの有無しか判定していません。

その為、セキュリティー的な意味合いで導入する機能には、
こうした条件分岐は利用しない方がいいと思います。

アクセス解析程度であればこれで十分だと思いますが。

当サイト内のコンテンツおよび画像を含むすべてにおいて、管理人が著作権を保持しております。
当サイトでご紹介しております写真につきましては著作権の放棄はしませんが、
ライセンスフリーでご利用いただいて構いません。

コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。
サイト内コンテンツを引用される際には、出典元として当サイト(個別記事)へのリンクをお願いいたします。
申し訳ございませんが、無断転載、複製をお断りさせて頂いております。