検証時のターゲィング設定のために – 独自Cookieを発行できるブックマークレットの作成方法 | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年02月23日

検証時のターゲィング設定のために – 独自Cookieを発行できるブックマークレットの作成方法

タグ :

ブックマークレットを利用して任意のCookieをブラウザに付与する手法をご案内します。

この記事は下記のようなとき役に立ちます
・Cookieを条件とした訪問者グループとしてページにアクセスして行いたい場合
・任意のCookieを保持した状態でサイトにアクセスしたいが、サイト自体には手を加えられない場合

ブックマークレットの作成方法

PCブラウザ(Google Chrome)の場合

step1.ブックマークマネージャーを開く

ブラウザ上部の「ブックマークバー」を右クリックして、表示されるメニューの中から「ブックマークマネージャー」を選択します。
※「ブックマークバー」が表示されていない場合は、キーボードの「Shift + Ctrl + B」キーを同時に押すことで表示されます。

Step1

step2.ページの追加を行う

「ブックマークマネージャー」が開くと左側に「フォルダ」、右側に選択されているフォルダ内の内容が表示されています。
右側の空白になっているエリアで、右クリックするとメニューが表示されるので、「ページを追加」を選択します。

step2

step3.名前・URLを設定する

step2 の操作を行うと、下記の入力エリアが表示されます。

step3

「名前」は任意で入力を行い、
「URL」には下記のコードを入力して「Enter」キーを押します。
※下記のコードでは、「opty_eatest」というCookieを付与しています。

	
javascript:(function(){
	var hostname = window.location.hostname;
	var parts = hostname.split(".");
	var publicSuffix = hostname;
	var last = parts[parts.length - 1];
	var expireDate = new Date();
	expireDate.setDate(expireDate.getDate() + 7);
	var TOP_LEVEL_DOMAINS = ["com", "local", "net", "org", "xxx", "edu", "es", "gov", "biz", "info", "fr",
	"gr", "nl", "ca", "de", "kr", "it", "me", "ly", "tv", "mx", "cn", "jp", "il", "in", "iq"];
	var SPECIAL_DOMAINS = ["jp", "uk", "au"];
	if(parts.length > 2 && SPECIAL_DOMAINS.indexOf(last) != -1){
		publicSuffix = parts[parts.length - 3] + "."+ parts[parts.length - 2] + "."+ last
	} else if(parts.length > 1 && TOP_LEVEL_DOMAINS.indexOf(last) != -1) {
		publicSuffix = parts[parts.length - 2] + "."+ last
	}
	document.cookie = "opty_eatest=true;
	domain=."+publicSuffix+";
	path=/;
	expires="+expireDate.toGMTString()+";";
	window.alert("Set Cookie : 'opty_eatest' on Domain : "+publicSuffix);
})();
	

ページの追加が正常に行えた場合、下記の様に表示されます。

step2

step4.Cookieの付与

ブラウザで任意のページを開き、step3で追加したブックマークをクリックします。
すると下記のようなアラート画面が表示され、Cookieを付与したことが表示されます。

step4

step5.Cookieの確認

次に開発者モード(F12キー)を開き、[Application] タブ内の [Storage] – [Cookies] 内からアクセスしているドメイン名をクリックすると、
右側に表示されている Cookie の一覧の中に、ブックマークレットによって追加された「opty_eatest」が存在していることを確認することができます。

開発者モード

スマートフォンブラウザ(Safari)の場合

step1.ブックマークを追加

まず、事前準備としてどのページでもいいので、ブックマークを1件追加します。
この際、「ブックマークレット」などの名前を付けておけば、後の操作でわかりやすくなります。

ブックマークの追加と保存

step2.ブックマークの編集

「ブックマークリスト」を開き、[編集] をタップします。
次にstep1 で追加したブックマークをタップします。

ブックマークの編集

「URL」欄の内容をすべて削除し、下記のコードを入力し、[完了] をタップします。
※事前に下記のコードをコピーしておき、ペーストを行える状態にしておくとスムーズに設定が行えます。
※下記のコードでは、「opty_eatest」というCookieを付与しています。

コードの入力

	
javascript:(function(){
	var hostname = window.location.hostname;
	var parts = hostname.split(".");
	var publicSuffix = hostname;
	var last = parts[parts.length - 1];
	var expireDate = new Date();
	expireDate.setDate(expireDate.getDate() + 7);
	var TOP_LEVEL_DOMAINS = ["com", "local", "net", "org", "xxx", "edu", "es", "gov", "biz", "info", "fr",
	"gr", "nl", "ca", "de", "kr", "it", "me", "ly", "tv", "mx", "cn", "jp", "il", "in", "iq"];
	var SPECIAL_DOMAINS = ["jp", "uk", "au"];
	if(parts.length > 2 && SPECIAL_DOMAINS.indexOf(last) != -1){
		publicSuffix = parts[parts.length - 3] + "."+ parts[parts.length - 2] + "."+ last
	} else if(parts.length > 1 && TOP_LEVEL_DOMAINS.indexOf(last) != -1) {
		publicSuffix = parts[parts.length - 2] + "."+ last
	}
	document.cookie = "opty_eatest=true;
	domain=."+publicSuffix+";
	path=/;
	expires="+expireDate.toGMTString()+";";
	window.alert("Set Cookie : 'opty_eatest' on Domain : "+publicSuffix);
})();
	

step3.Cookieの付与

ブラウザで任意のページを開き、step3で追加したブックマークをタップします。
すると下記のような、Cookieを付与したこと示すアラート画面が表示されます。

Cookie付与の確認

Android Chromeの場合の注意事項

ご利用のスマートフォン端末がAndroid・ブラウザがChromeの場合、
ブラウザメニューからブックマークレットを呼び出しても処理が行われないことがあります。
以下の手順をお試し下さい。
ブラウザのアドレスバーに、ブックマークレット名を入力すると、
該当ブックマークレットがサジェストされますので選択して下さい。
ブックマークレットが呼び出されます。

Optimizelyのサポートに関するお問い合わせはこちらまで

コメントは受け付けていません。

ヘルプの関連記事

Optimizely X カスタムコードの特性について(Optimizely X)
投稿日: 2017年03月29日
今すぐ使える正規表現
投稿日: 2016年10月27日
自分をテスト対象から除外する方法 オプトアウト
投稿日: 2016年10月21日
SNS ボタンのクリック目標の計測
投稿日: 2016年09月26日

ヘルプのよく読まれている記事