サイト上の値の取得 ~パート③:実際に値を取得してみよう(cookieからの取得編)~

 前々回、サイト上の値を取得に関しての前提知識をご紹介させて頂き、前回は実際にHTMLソース上から値を取得することに関して、実践部分も兼ねてご紹介をしていきました。ここまでの内容はいかがでしたでしょうか。実際に色んなページでチャレンジしてみると前回の話だけでは実現できないことも多々あるかと思います。それは、HTMLソース上に表示されているがこの前紹介した程度のJavaScriptのソースだけでは取得できないケースがあるということ、及びHTMLソースだとそもそも取得できないケースがあることに起因します。
 今回の記事では、HTMLソース上に表示されているものをより複雑なJavaScriptで値を取得しようという話は置いておいて、HTMLソースだとそもそも取得できないケースに関してご紹介が出来ればと思います。特にその代表的なケースとして、以前ご紹介したcookieからの値の取得を実践できればと思います。
www.digitaldolphin.jp
www.digitaldolphin.jp

目次

そもそもcookieとは何だったか?

 前々回の記事「サイト上の値の取得 ~パート①:前提知識~ - デジタル社会を泳ぐイルカ」の中でご紹介を簡単にさせて頂きましたが、cookieとは、Webブラウザ上の保存領域の一つで、cookieに保存されている情報は毎回閲覧しようとするページを持つWebサーバーに値を送信するという特徴があります。そして、cookieというキーワードはWebページに流入した際などに「cookieを許可しますか?」というポップアップを見たことがあるかもしれませんが、広告のリターゲティング*1や自動ログイン、ECサイトでカートに入れた商品情報の保持などといったところでcookieは役立っています。
 また、cookieと言われるとよく「ファーストパーティー(first party)」や「サードパーティー(third party)」といったキーワードも一緒に聞くこともあるかと思います。今回の値の取得には直接関係ありませんが、cookieに関する基礎知識にもなりますので、ご紹介できればと思います。

 結構、多くのマーケターの方々が、よくわからなくなってしまうものの一つが、first party cookieとthird party cookieかというcookieの種類かと思います。ただ、cookie以外でもfirst party、third partyという概念は利用されることがありますので、一般的にfirst partyやthird partyが何かを覚えておきましょう。これもイメージで覚えておいた方が印象に残りやすいかと思いますので、まずは以下のキャプチャをご覧ください。

first partyとthird partyのデータの概念

 この概念図の中でも記載しましたが、まずfirst partyのデータとは、「自分」が取得して、「自分のみ」で使うデータとなります。例えば、自社の会員情報や受注情報、自社サイトで取得したアクセスログの情報などの情報はfirst party情報となります。一方で、third partyのデータとは、「自分含め任意の誰か」が取得して、「自分含めて任意の誰か」でも使うデータとなります。例えば、天気情報や為替情報、他社サイトで取得したアクセスログの情報などといった情報で、要はだれでもアクセスできる情報がthird partyの情報となります。
 ちなみに、「second partyってないの?」って疑問はあるかと思いますが、概念としてはthird partyにかなり近く、second partyのデータとは、特定の範囲を定めた上で、「自分含め特定の誰か」が取得して、「自分含めて特定の誰か」でも使うデータとなります。ただ、ほとんど出てこないので概念だけ頭の隅っこで知っておけば良い気がします。
 では、cookieにおけるfirst party cookieとthird party cookieとは何かという部分をご紹介できればと思います。上記でご紹介したfirst partyとthird partyの概念と似ておりますが、first party cookieとは自社サイトでcookie情報に値(key-valueの形式)を付与して、自社で利用するcookieのことで、一方のthird party cookieとは自社含め任意の企業のサイトでcookie情報に値(key-valueの形式)を付与して、自社含めて任意の企業の企業で利用するcookieのことになります。そのため、ログイン時の情報やECサイトでのカート落ち商品情報などは、first party cookieで保持されることが多いですし、広告のリターゲティング用に使われるcookieはthird party cookieで保持されることが多いです。

cookieが持つ代表的な情報

 では、cookieに関して、key-value形式で値を持つとは言いましたが、他にも保持している情報もありますので、簡単にご紹介できればと思います。そこで前々回のご紹介したブラウザの開発者ツールのアプリケーションメニューを開いて確認していきましょう。

開発者ツールのアプリケーションにて、cookieの確認

 見てもらえると分かりやすいかと思いますが、項目としては「名前」、「値」、「Domain」、「Path」、「Expires / Max-Age」、「サイズ」、等などの項目が各項目(レコード)に記載されております。色んな項目がありますが、先ほど挙げたkey-valueというのは、「名前」、「値」が該当し、「ドメイン」というのは誰が各cookieを付与したかを表すもの、「Expires / Max-Age」は各cookieの有効期限、「サイズ」は各cookieのサイズという情報を持っております。今あげたもの以外もありますが、一旦は基礎知識としてこの辺から覚えておいてください。
 そして、cookieには有効期限やサイズというものがありますが、この辺には制限もあります。有効期限の制限は後述したいなと思いますが、サイズは以前紹介した記事の中でも記載したように、全てのcookieの合計が4kBと決まっております。

cookieの制限

 また、cookieといえば、よく最近制限が厳しいという話を聞いたことがあるかもしれません。その部分をcookieの紹介として、最後に触れられればと思います。
 そもそもなぜ、cookieは制限対象となってしまったのかという部分をお話ししないといけないかと思いますが、よくWebサイトに個人情報が吸い取られているということを聞いたことがあるかと思います。それこそ、ログイン情報を入力しなくても、ログインが勝手に出来たり、カートに入っている商品が自動で再現されたり、広告では自分が見たサイトの商品が表示されたりと、自分の情報がどんどん取られている感覚があるのは否めないかと思います。その中でも特に広告であれば、広告のプラットフォームとしてGoogleFacebook、また、ブラウザ側ではGoogle ChromeApplesafariが有名ですが、これらの企業は全てアメリカの会社だったこともあり、ヨーロッパ各国ではcookieにより個人情報がアメリカに吸い取られているとして最も早くcookieの制限をかけ始めておりました。そして、登場したものがGDPRGeneral Data Protection Regulation)という、EU域内の各国に適用される、cookie含めた個人データの保護やその取り扱いを定めた法令になります。これにより、cookieは個人情報として制限の対象となり、多くのWebサイトで「cookieを許可しますか?」というポップアップが出るようになりました。
 そして、AppleGoogle等の企業側としても、海外でもビジネスをしているゆえ、自分たちも個人情報の取得に誠意に対応していることを示す上で、AppleのITP(Intelligent Tracking Prevention)というブラウザ「Safari」に搭載されているサイトトラッキング防止機能(iOS11以降)も出てきました。それゆえに、cookieの仕様に関しては、特にthird party cookieですが、制限が強くなっております。そして、GoogleChromeにおけるthird party cookieの制限を強めようとしているため、third party cookieはあまり使えないようなcookieとなりつつあります。*2

cookieの値の取得

 では、ここまでずっと前提知識の話になりましたが、cookieから具体的に値を取得する方法をご紹介します。ただ、cookieからすべての値を取得すること自体は実はそんなに大したことがないため、早速、以下に開発者ツールのコンソールにて、実行するJavaScriptのソースを記載します。

実行するJavaScript

document.cookie;
JavaScript①の実行結果

 この結果からわかるように、このJavaScriptのソースでは、cookie内に保持されている全てのcookieが「key=value」という形式で、「; 」というテキストにより結合されたテキストとして出力されます。そのため、自分が欲しいcookieの値を取得したいとなると、このテキストから該当箇所のみを取得するためのJavaScriptの知識の方が必要となります。そこで以下のように、splitというものを利用して、取得したテキストを分解していきましょう。

実行するJavaScript

document.cookie.split('; ');
JavaScript②の実行結果

 そうすると実行結果がキャプチャのように、「key-value」毎に分解される形になります。そして、分解された中で、必要なkeyのものを抽出することが次に大事になります。この辺は一旦こんなJavaScriptで記載できるんだというレベルで覚えておいてください。今回はGoogle Analyticsで取得したい「_ga」というkeyのcookieを取得出来ればと思います。実際に実行するJavaScriptは以下のようなものとなります。

実行するJavaScript

for(var i=0;i<document.cookie.split('; ').length;i++){
    if(document.cookie.split('; ')[i].match(/_ga/)){
        document.cookie.split('; ')[i].split('=')[1];
    }
}
JavaScript③の実行結果

 この実行内容の詳細に関しては、簡単に解説できればと思いますが、for文というのは繰り返し文となっており、変数(varで指定)「i」というものが、0番目から格納されているcookie数の分繰り返すということを表しております。そして、その次のif文は条件文となっており、cookie中で、「_ga」という文字を含むものに合致する場合には、if文の中のJavaScriptを実行するというものとなります。そして、if文の中では、「key=value」となっているものを「=」で分割して、1番目(0番目から数えるため2つ目)の値を取得するという内容となっております。
 これにより、cookie中の特定の「key」の値を取得できることとなります。

さいごに

 ここまでで、ブラウザのcookieに保存されている値を取得する方法をご紹介させて頂きましたが、これも色んなサイトで何度も実践してみて、初めて身に着けられるものかと思いますので、しっかりと実践してみてください!
 次回はもっと簡単な内容ですが、WebStorageからの値の取得の話を出来ればと思います。

*1:閲覧しているWebサイトの情報を元に、FacebookInstagram、LINE、メディアサイト等で出てくるディスプレイ広告を出し分ける機能。これにより自分が見たことがあるサイトの広告が自分宛てに表示されるようになります。

*2:この辺の詳細は、僕の記事ではありませんが、「【2022年最新】ITPアップデート情報とその歴史~Cookie規制などWeb広告への影響を解説~」という記事も見てみてください。