クロスドメインについて（クロスドメイン制約・トラッキング設定）
クロスドメインとはWEBサイトが2つ以上のドメインをまたいで運営されている状態を指します。
商品ページとショッピングカート部分でサイト間を行き来する場合や、ページ内でコンテンツや画像など外部のリソースを直接利用する場合などです。
javascript等プログラムコンポーネントで外部サイトのソースを活用する事は制限されていますが、双方の同意があればCORSなどで解除する方法があります。
クロスドメインとは
クロスドメインとは、WEBサイトが2つ以上のドメインをまたいで運営されている状態を指します。
通常WEBサイトは、TOPページからお問い合わせまで一つのドメインサイトデータの中で完結するように構築されます。
しかし中には2つ以上のドメインデータを併用する場合があるのですね。
2つのドメイン間を往来する場合
例えばショッピングサイトなどが良い例ではないでしょうか。
商品の一覧や詳細ページまでは元々のドメインサイトの中にあるのですが、カートに入れた時に別サイトに飛んでしまう場合ですね。
URLの切り替わり例
通常ページ部分：https://llpeg.info/contents/
ショッピングカート部分：https://shopcart.jp/llpeg_shop/
特にショッピングサイトの場合は商品をカートに入れた後に、別商品を見るためまた元のドメインサイトに戻ったりしますよね。
この様に2つのWEBサイトを行き来する状態をクロスドメインと呼びます。
ページ内で別ドメインのコンテンツを表示する場合
クロスドメインは、上記の様にサイト間を行き来する場合だけではありません。
例えばhtmlファイルは本来のサーバーから読込し、一部の画像のみを別のドメインサイト（サーバー）から持ってくる事もできます。
一部コンテンツの表示例
llpeg.info内ページで外部サイト画像を読み込む
<img src="https://example/images/img.jpg" alt="">
imgタグのsrc部分で別サイトURLの画像を読み込んでいます。
この状態もクロスドメインにあたります。
相互リンクバナーの掲載
以前、相互リンクのバナー掲載時によくリンク先の画像を直接読み込んだりしていました。
今はほとんどしていないと思いますが、あれもまさにクロスドメインです。
クロスドメインの問題：アナリティクス解析が正常に計測できない
このクロスドメインで一番問題になるのが、Googleアナリティクス解析の時です。
クロスドメインに対して何も対応をしないままだと、アナリティクスの数値が正しく計測できなくなります。
例えばGoogle検索でECサイトの「llpeg.info」を訪問したユーザーが、商品をカートに入れて「https://shopcart.jp/llpeg_shop/」のカートページへ来たとします。
ドメイン間を移動するとセッションが切れる
この時、元々はGoogle検索から訪問してきているのですが、この様にドメインをまたぐとセッションが切れてしまいます。
そして新しくセッションが構築され、参照元（訪問する前のサイト）が、「Google検索」ではなく「llpeg.info」になってしまうのです。
参照元が変更されてしまう
本来は自然検索からの流入だったはずのセッションが、llpeg.infoサイトからの流入だと判定されてしまいます。
しかしlleg.infoサイトへの流入経路は、Google検索からの訪問だった事は間違いないのです。
この事実が消えてしまう事で、正確な流入経路が測定できなくなります。
クロスドメイントラッキング
このような場合に対応するため、Googleアナリティクスに「クロスドメイントラッキング」を設定する必要があります。
クロスドメイントラッキングとは、ドメインをまたいだページ遷移を計測するときに必要な設定です。
この設定をおこなうことで、異なるドメイン間のセッションをまとめられるようになります。
ですので、ドメインをまたいでもユーザーの参照元やページ遷移状況がしっかり追える様になる訳です。
クロスドメインのトラッキング設定方法
クロスドメイントラッキングの設定手順は大まかに以下の流れになります。
１．トラッキングコードを変更
２．参照元除外リストへのドメイン追加
３．レポートビューへのフィルタ追加
４．目標設定URLの変更
それでは順番通りにご紹介しましょう。
トラッキングコードの変更
まずは従来設置しているトラッキングコードを以下の様に書換します。
ga('create', 'UA-XXXXXXXX-X', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('linker:autoLink', ['aaa.jp','bbb.com']); ga('send', 'pageview');
赤字部分はクロスドメインの対象となるWEBサイトドメインを入れて下さい。
この変更によりユーザーがドメイン名が切り替わる移動をする場合、Googleアナリティクス側が自動的に元々保持していたセッション情報を維持した状態で移動します。
トラッキングコード変更の問題点
ただし上記の様にトラッキングコードを変更すると、2つの問題に直面します。
１．参照元に自分のサイトドメインが表示されてしまう事
２．ドメイン名以下が同じURLの場合、それを両方とも「同一ページ」としてカウントしてしまう事
例：「aaa.jp/index.html」「bbb.com/index.html」など
この2つの問題を解消するために、次の設定が必要になります。
参照元除外リストの追加
Googleアナリティクスでは、サイトにアクセスがあった場合にその参照元をドメインごとに確認できる機能が備わっています。
「参照元」とはユーザーの「流入元」の事で、今回の例で言うとgoogle検索ページやllpeg.info等のドメインですね。
参照元除外リストとは、登録された参照元リストをこの計測の対象外とする設定です。
クロスドメインの対象となるサイトは参照元に判定しない
このリストに対象のクロスドメイン名（両方とも）を登録しておけば、2つのドメインはいずれも参照元として判定されなくなります。
つまり2つのドメイン間をどれだけ行き来しても、最初の参照元だった「Google検索ページ」の存在が残る訳ですね。
設定方法
菅頼→プロパティ欄→トラッキング情報欄→参照元除外リストへ進みます。
ここに追加したドメインサイトは全て「一つのWEBサイト圏内」の判定となり、行き来しても参照元は変わりません。
レポートビューへのフィルタ追加
Googleアナリティクスのレポートには、ファイル名は表示されていますがドメイン名部分は表示されてません。
例えばhtmlサイトのTOPであれば「/index.html」と表示されていると思います。
しかしこの状態だとクロスドメインサイトのどちらなのかを判別する事ができません。
ディレクトリ＋ファイル名まで同じだと一つとみなされる
そしてさらに「aaa.jp/index.html」と「bbb.com/index.html」の様に完全に同じURLがあると、両方同じ「index.html」として合算されてしまうのです。
そこでフィルタ作成をおこなえば「http://aaa.jp/index.html」に表示の仕方を変更できます。
こうすればそれぞれを別々のURLとしてカウントしてくれるようになります。
設定方法
管理→ビュー欄→フィルタ→「フィルタを追加」をクリックします。
上記の様に選択・入力します。
目標URLの変更
目標のURLを設定している場合、完了ページを「/thanks.html」等に設定していると思います。
クロスドメインを設定した場合は、ここもドメインを含むURLに変更して下さい。
クロスドメインの制約について
ショッピングサイトの例以外に「1つのWEBサイト上に2つのドメインデータが混在する事」も、クロスドメインを意味すると冒頭で説明しました。
先述した外部サイトにある画像を読み込む様な場合ですね。
これ位は許可されていますが、許可されていない利用方法もあります。それがクロスドメインの制約です。
クロスドメインの制約とは
例えば、llpeg.info WEBサイト内にとあるhtmlページがあるとしましょう。
そのページ上でJavaScriptなどのWEBブラウザ上のコンポーネントを使って、別ドメイン (例えばmicrosoft.comなど他社) のサービスに直接接続をしようとする場合です。
これもllpeg.infoとmicrosoft.comのクロスドメイン状態ですが、この場合WEBブラウザがエラーや警告を表示して接続をブロックします。
外部のリソースをjavascriptなどで操作する事は禁止
WEBではこういったプログラムコンポーネントで外部サイトに接続する事ができない様な制約が掛かっています。
これがクロスドメインの制約です。
画像データを単に読み込むくらいならそれ程害はありませんし、セキュリティ的にも問題はありません。
しかしJavaScriptの様なプログラムコンポーネントが、別ドメインサイトのリソースに接続する場合は違います。
XMLHttpRequestオブジェクト
例えばブラウザには 「XMLHttpRequestオブジェクト」と呼ばれる機能が実装されています。
JavaScriptによってWEB上の必要なデータやファイルの内容を取得する事ができる機能です。
何も制限が無いと、こういったプログラムコンポーネントで簡単に外部リソースが利用できる訳ですね。
クロスドメインを使ったハッキング
クロスドメインにこういった制約が設けられていないと、データは簡単にハッキングの対象にされてしまいます。
仮にこの制約が無かった場合にどのような事が起こりうるのか、シミュレーションしてみましょう。
ハッキングされやすいWEBサイトデータ
例えば利用するユーザーを判別し、そのユーザーごとに表示動作を変える様なWEBサイトがあったとします。
ショッピングサイトなどがまさにそうですよね。
ユーザーがいつも接続している端末であれば、ログイン情報が最初から入った状態で閲覧できるようになります。
CookieやIPアドレスによる個人判定
訪問時に自動でログインできるのは、CookieやIPアドレスによる判別がされているためです。
基本的にこの情報は、このユーザーのブラウザだけが扱う事ができるものである必要があります。
仮に他のユーザーが閲覧しようとしても、Cookieや接続元のIPアドレス制限など何らかのシステムによって保護される訳です。
ハッキング被害の事例
では前述のXMLHttpRequestオブジェクトを使って、JavaScriptでこのWEBサイトデータに接続するとどうなるでしょう。
悪意ある開発者が、元のWEBサイトとは異なる「偽サイト」にJavaScriptを埋め込んで、本来のサイトのシステムデータを表示できる様になっていたとします。
偽サイト上に本来のWEBサイトと同じコンテンツが表示される訳ですね。
偽サイト内を通して本来のサイトコンテンツを映す
ユーザーは本来のWEBサイトに接続したつもりですから、偽サイト上で情報を表示させてしまうでしょう。
本来のWEBサイトから見ても、ユーザーのブラウザから要求された内容ではあるので止める事ができません。
まさにブラウザが乗っ取られたような状態ですね。
偽サイト上で表示させた情報がこの悪意ある開発者に盗み見られる仕組みになっていれば、大切な個人情報が盗まれてしまうのです。
クロスドメイン制約を解除したい場合もある
こうしたセキュリティー上の脆弱性を突かれない様に守るため、WEB上にはクロスドメインの制約が存在しています。
しかし双方に利用の同意があれば、コンポーネントを通じてリソースをシェアする事に問題はありません。
ですので時には、このクロスドメインの制約がネックになる場合もあります。
クロスドメインで積極的にリソース利用したいケース
状況によっては双方にメリットがあるため積極的に活用したというケースもあるでしょう。
その場合、設けられているクロスドメインの制約を解除・解決させる必要があります。
その代表例が「CORS (Cross-Origin Resource Sharing)」です。
CORS（Cross-Origin Resource Sharing）とは
CORSとは外部のサイトを同一の生成元（ドメインサイト）として判定する様に追加する手段です。
これにより外部サイトからリソースに対してのアクセスがあった場合に、その外部サイトを同じ生成元と判断しているので利用を許可します。
（Cross-Origin Resource Sharing）については、また別記事にてご紹介します。
クロスドメイン重複コンテンツに気を付ける
これまでお話したように、クロスドメインは2つ以上のドメインサイトでデータをシェアした状態です。
時には「llpeg.info/contents.html」を表示するにあたり、別サイト「aaa.jp/resouce.html」のページをそのまま丸ごと表示・利用する事もできます。
テキストや画像など部分的なものでは無く、1ページ全体あるいはサイト全体に渡って、外部リソースデータを活用できる訳です。
極端なお話、llpeg.infoとaaa.jpの両方で全く同じWEBデータを見せる事ができます。
SEO：Googleの判定に注意
この場合、複数ドメイン上に同じページ・コンテンツが存在する事になりますが、ここで注意が必要です。
SEOの観点から、Googleに対してはどちらが本来のソースなのかをしっかり打診しておく必要があるのです。
このようなタグを設置しないで両者を運営していると、複製コピーのWEBサイトと判断されペナルティをうける場合があるからです。
WEBサイトにとって検索順位やSEOは無視できない要素ですからね。
canonicalタグを使う
このようにGoogleにどちらが正規データかを打診するために、「canonicalタグ」を設置します。
<link rel="canonical" href="指定されたurl">
このタグを設置したページが「複製を利用する側」であり、そのタグで示したページが「正規データ」になります。
これによりGoogleが重複したコンテンツやサイトのどちらが正規データであるかを把握できる訳です。
関連：URLの正規化について
まとめ
以上、クロスドメインの概念や仕組み、アナリティクス解析の設定を紹介しました。
ドメインが異なるサイトを運営されている方は必須の知識になりますので、ぜひこの機会にマスターして下さい。
クロスドメインの制約の突破方法の代表例であるCORSについては別記事をご参照下さい。
