読者です 読者をやめる 読者になる 読者になる

サードパーティクッキーの使い方・使い分けまとめメモ

はじめに

今回やりたかったこととしては
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に固定で記述していますが、全てのアクセス元を許可したい場合、
.htaccesshttpd.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 true

httpd.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

iPhone(safari)でサードパーティクッキーを扱う場合の問題点

iPhone(safari)の初期設定では、クッキーの設定が「訪問したWebサイトを許可」となっています。
これがやっかいで、上記のiframe版とjs版どちらで実装してもクッキーは送信されません。
サイトをまたいでのユニークなIDなどが必要でなければアナリティクス形式で実装しておけばOKなんですけどね、、、

以上です