サードパーティクッキーの使い方・使い分けまとめメモ
はじめに
今回やりたかったこととしては
・Googleアナリティクス
・各社の広告用トラッキングタグ
みたいに他サービスに自分が作ったタグなりJSのコードを埋めてもらってクッキーを扱いたかったことです
で、大きく分けて上記のタグの形式（Googleアナリティクス形式と広告用タグ形式）にわけて考えられるのではないかと思ってます
Googleアナリティクス形式のクッキー
基本的にクッキーはドメイン単位で使用するのですが、このタイプのクッキーはタグを埋め込んだサイトのドメインでクッキーが発行されます。
なのでタイトルとは異なりますがファーストパーティクッキーとなります。
my-site.jp・・・自分のサイト(アナリティクスのタグを仕込むサイト)
other-analytics.jp・・・解析用サーバ(googleアナリティクスなど)
上記の形だと、トラッキング用のタグはクッキーがmy-site.jpドメインに対して発行されます。
実際にクッキーを発行しているのはother-analytics.jpによって配布されたjsコードですが、my-site.jpで作ったクッキーをother-analytics.jpサーバに送る形になります。
そのためサイトをまたぐと別クッキーとなります
実装例
tag.js(other-analytics.jp)
var id = null;
if (document.cookie) {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] == "id") {
id = cookie[1];
break;
}
}
}
if (!id) {
id = ユニークなIDを生成;
document.cookie = "id=" + id;
}
// 解析サーバにIDを送信
var request = new XMLHttpRequest();
request.open("GET", "//other-analytics.jp/send.php?id=" + id, true);
request.send();html(my-site.jp)
<script type="text/javascript" src="//other-analytics.jp/tag.js"></script>
広告用トラッキングタグ形式のクッキー
my-site.jp・・・自分のサイト(広告用のタグを仕込むサイト)
other-advertise.jp・・・広告用トラッキング情報を収集するサーバー
この場合だと、クッキーはmy-advertise.jpに対して発行されます。
なのでサイトをまたいでも同じクッキーが使える形となります
この場合に、実際に訪れていないサイトのクッキーが発行されるためサードパーティクッキーとなります
実装例(HTML版)
html(my-site.jp)
<iframe src="//other-advertise.jp/tag.html" width="" height=""></iframe>
tag.html(other-advertise.jp)
※上のtag.jsとほぼ同じ。こちらはIDを作ってクッキーにセットするだけ
var id = null;
if (document.cookie) {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] == "id") {
id = cookie[1];
break;
}
}
}
if (!id) {
id = ユニークなIDを生成;
document.cookie = "id=" + id;
}
実装例(js版)
html(my-site.jp)
<script type="text/javascript" src="//other-advertise.jp/tag.js"></script>
tag.js(other-advertise.jp)
var request = new XMLHttpRequest()
request.open("get", "//other-advertise.jp/send.php", true);
request.withCredentials = true; // ★jsでサードパーティクッキーを送信するにはこれが必要
request.send();send.php(other-advertise.jp)
header('Access-Control-Allow-Origin: http://my-site.jp');
header("Access-Control-Allow-Credentials: true");ここでは許可Originをmy-site.jpに固定で記述していますが、全てのアクセス元を許可したい場合、
.htaccessやhttpd.confをいじれる環境であれば以下みたいに記述する形でもOK（どこかのサイトのコピーです）
.htaccss
RewriteCond %{HTTP:Origin} (.+)
RewriteRule . - [E=CORS_ORIGIN:%1]
Header set Access-Control-Allow-Origin %{CORS_ORIGIN}e env=CORS_ORIGIN
Header set Access-Control-Allow-Credentials truehttpd.conf
SetEnvIf Origin (.+) CORS_ORIGIN=$0
Header set Access-Control-Allow-Origin %{CORS_ORIGIN}e env=CORS_ORIGIN
Header set Access-Control-Allow-Credentials true
