SNSが一般的になって久しい昨今、SNSアカウントでサイトのサービスへログイン可能とする、いわゆるOAuth認証をよく見かけるようになってきました。
OAuth認証ログイン機能は、ユーザーからしてもサイトごとにログインIDやパスワードを覚えてなくて済むようになるため、とても有用な機能です。
ただし、そんな便利なOAuth認証ですがサイトからすると外部ドメインにあたるため、うまく設定をしないとGoogleアナリティクスでセッションが切れてしまうケースがあります。
今回はOAuth認証利用時にもセッションを切れないようにするための方法を紹介します。
なぜOAuth認証のための特別な設定が必要なのか
Googleアナリティクスではセッション中に外部ドメインへの行き来が発生した場合、帰ってきた際に「外部ドメインからの流入」と判定されてしまい、セッションがそこで切れてしまいます。
これを避けるには、プロパティの管理画面から「参照元除外リスト」へ該当ドメインを登録する必要があります。
OAuth認証機能は各SNSのログイン画面などを経由するため、前述のように「外部ドメインと行き来する」仕様となります。
そのため、OAuth認証ログインの前後でセッションが繋がるようにするには、OAuth認証で使用されるドメインを参照元除外リストへ登録しなければなりません。
ただし、SNSの本来のドメインを参照元除外リストへ登録してしまうと、該当SNSからの流入まで参照元から消えてしまいます。
例えばfacebook.comを参照元除外リストへ登録してしまうと、facebook.com全体からの流入も該当するため、ユーザーが投稿したツイートからの流入などもすべてdirect扱いになってしまいます。
OAuth認証のための専用サブドメインなどを用意されているSNSであれば、そのサブドメインを登録する形で問題ありません。
しかし、一部にはそういった「OAuth認証専用のサブドメイン」が用意されていないSNSも存在します。
- Point
- OAuth認証のドメインを参照元除外リストへ登録すればセッションが繋がるようになる
- OAuth認証専用のサブドメインがあるSNSはそのサブドメインを登録すればOK
- OAuth認証専用のサブドメインを持たないSNSは後述の設定が必要
代表的なSNSのOAuth認証ログインから帰ってきた際のリファラーを調べてみたところ、2019年9月現在は下記のようになっていました。
| SNS名 | OAuth認証ログイン帰還時のリファラー | 備考 |
|---|---|---|
| https://api.twitter.com/oauth/authorize | api.twitter.comを登録すればOK | |
| https://www.facebook.com/v〇〇/dialog/oauth/read/ | NG | |
| LINE | https://access.line.me/oauth2/v2.1/login?returnUri=〇〇&loginChannelId=〇〇&loginState=〇〇 | access.line.meを登録すればOK |
| Googleアカウント | https://accounts.google.com/signin/oauth/oauthchooseaccount?client_id=〇〇&as=〇〇&destination=〇〇&approval_state=〇〇&oauthgdpr=〇〇&xsrfsig=〇〇&flowName=〇〇 | accounts.google.comを登録すればOK |
| Yahoo! JAPAN | https://auth.login.yahoo.co.jp/ | auth.login.yahoo.co.jpを登録すればOK |
つまりFacebookのOAuth認証を利用している場合は、後述のような設定対応が必要です。
対応方法の考え方
対応は、理屈としては簡単です。
- 問題
- OAuth認証から帰ってきた際のリファラーのホスト名が専用のサブドメインになっておらず、SNSのユーザー投稿などと同じになってしまっている
- 解決
- OAuth認証から帰ってきた際のリファラーのホスト名を書き換えてしまおう
「リファラーのホスト名で区別がつかない」のが問題になっていますが、それはホスト名についてのみの話です。
パスやクエリなどを含むリファラーURL全体で見れば、OAuth認証から戻ってきた、というのは十分に判別がつきます。
幸い、Googleアナリティクスではリファラー情報を設定できるオプションがあります。（analytics.jsであればreferrerフィールド）
これを使い、「特定リファラー時にリファラーのホスト名を書き換える」ことで「OAuth認証帰還時に送信されるリファラー」を独自のものへ変更し、その変更後のホスト名を「参照元除外リストへ登録」しましょう。
- Point
- OAuth認証ログインからの帰還時（リファラーURLで判断）に
- ホスト名部分を任意のものへ変更して、
- タグのオプションとしてリファラーのURLとする。
- GAのプロパティ管理画面から、↑の書き換え後のホスト名を参照元除外リストへ登録
GTMでの具体的な対応の手順
本記事ではGoogleタグマネージャーでの設定方法について紹介させていただきます。
もし直書きのタグで、といった場合は前述の概要のロジックをご参考いただき、JavaScriptをご用意してご対応いただければと思います。
設定内容としては、以下になります。
- GTM側での設定
- リファラーURLを取得するための組み込み変数「Referrer」を有効化
- リファラーURLのホスト名を取得するための変数を登録
- ページURLのホスト名を取得するための組み込み変数「Page Hostname」を有効化
- undefinedを返す未定義値変数を登録
- リファラーURLを書き換える正規表現の表変数を登録
- リファラーが対象かどうかを判定するルックアップテーブル変数を登録
- GA設定変数またはGA計測タグ各種へオプション設定を追加
- GA側での設定
- プロパティ管理画面から参照元除外リストへ登録
GTM側での設定
必要となる変数6つを順に登録していき、その後GAの設定変数（または計測タグ各種）のオプション設定欄へリファラーを設定します。
最後にプレビューなどで動作確認の後、公開、という流れになります。
なお変数については、すでに同じような内容のものが登録済みの場合は、既存のものをそのまま流用いただけます。
- リファラーURLを取得するための組み込み変数「Referrer」を有効化
変数一覧画面の「組み込み変数」の「設定」から「Referrer」を有効化してください。
すでに有効化済みの場合は手順を飛ばしてください。 - リファラーURLのホスト名を取得するための変数を登録
ユーザー定義変数の新規変数登録画面にて、下記の設定内容で登録してください。
変数のタイプ：HTTP参照
要素タイプ：ホスト名
「www.」を削除：OFF - ページURLのホスト名を取得するための組み込み変数「Page Hostname」を有効化
変数一覧画面の「組み込み変数」の「設定」から「Page Hostname」を有効化してください。
すでに有効化済みの場合は手順を飛ばしてください。 - undefinedを返す未定義変数を登録
ユーザー定義変数の新規変数登録画面にて、下記の設定内容で登録してください。
変数のタイプ：未定義値
「未定義値」変数はさらっと追加されていた変数で、常にundefinedを返す変数です。 - リファラーURLを書き換える正規表現の表変数を登録
ユーザー定義変数の新規変数登録画面にて、下記の設定内容で登録してください。
変数のタイプ：正規表現の表
入力変数：Referrer
正規表現の表：※下記を書き換え対象URL分追加
パターン：(.+)www\.facebook\.com/v(.+)/dialog/oauth/(.*)
出力：$1oauth.facebook.com/v$2/dialog/oauth/$3
デフォルト値を設定する：ON
デフォルト値：{{Referrer}} - リファラーが対象かどうかを判定するルックアップテーブル変数を登録
ユーザー定義変数の新規変数登録画面にて、下記の設定内容で登録してください。
変数のタイプ：ルックアップテーブル
変数を入力：（[2]で登録した変数）
ルックアップテーブル：1行目
入力：{{Page Hostname}}
出力：{{（[4]で登録した変数）}}
デフォルト値を設定：ON
デフォルト値：{{（[5]で登録した変数）}}
デフォルトのGAの挙動に準じるため、リファラーを送信するのは「リファラーのホスト名が現在地と異なる場合のみ」という判定を行うための変数です。
リファラーのホスト名が現在地と異なる場合のみ、前述の[5]の変数を参照するようにします。 - GA設定変数またはGA計測タグ各種へオプション設定を追加
「詳細設定 > 設定するフィールド」へ「フィールド名：referrer」、「値：{{（[6で登録した変数）}}」の行を追加してください。
なお上図はGA設定変数へ追加する場合の例です。
GA設定変数を使わずに各種GA計測タグ側で設定している場合は、タグ側の設定へ追加ください。 - プレビューで動作確認し、問題なければ公開
ポイントは[5]の「正規表現の表」変数の設定内容です。
上記はFacebookのOAuth認証から帰還した際に、ホスト名を「oauth.facebook.com」へ書き換える処理をしています。
- 現状のリファラーURL
- https://www.facebook.com/vX.XX/dialog/oauth/read/
※Xの箇所は数値が入ります。 - パターンの値
- (.+)www\.facebook\.com/v(.+)/dialog/oauth/(.*)
※リファラーURLのうち、「vX.XX」の箇所は変更されることが予想されるため、「v(.+)」と可変にしました。
また、「/dialog/oauth/read/」の箇所もちょっと怪しかったので、これはさすがに変わらないだろうという「/dialog/oauth/」のみとしました。 - 出力の値
- $1oauth.facebook.com/v$2/dialog/oauth/$3
※「$数値」はパターン内の「(～)」の箇所がそれぞれ引き継がれます。
「正規表現の表」変数について、詳しくは下記の記事もご参考ください。
参考）「正規表現の表」変数で「部分一致が可能なルックアップテーブル的変数」が可能になりました
GA側での設定
GTM側の設定が終われば（公開済みであれば）すでにOAuth認証ログインから戻ってきたときのリファラーは変更後のものとなっています。
ですので、変更後のホスト名を参照元除外リストへ登録すれば一連の設定対応は完了です。
- プロパティ管理画面の「トラッキング情報 > 参照元除外リスト」から参照元除外リストを開く
- 「参照の除外を追加」ボタンから新規登録画面を開き、GTM側の設定で指定した「変更後のホスト名」を登録
前述のGTM設定例であれば「oauth.facebook.com」と入力してください。 - 「作成」ボタンで保存して完了
ちなみにGAの参照元は
- 計測する際、現在地ページのホスト名とリファラーのホスト名が異なっていた場合にリファラーが送信される
- 送信されてきたリファラーURLを元に参照元が取得される
という仕様になっています。
今回使った「referrer」オプション設定（analytics.jsの場合）は、このGAへ送信されるリファラーを任意で設定するためのものとなります。
そのため、ここを書き換えれば実際にGA上で集計される参照元へも反映される、というわけです。
GTMの設定サンプルダウンロード
実際に前述のGTM設定例をエクスポートしたJSONを用意してみました。
下記ファイルをダウンロードし、使いたいGTMコンテナの管理画面からインポートしてご利用ください。
- 利用したいGTMコンテナを開き、管理画面のコンテナ設定にある「コンテナをインポート」をクリック
- 「インポートするファイルを選択」で上記からダウンロードしたファイルを指定
ZIP形式で圧縮していますので、解凍してご利用ください - 「ワークスペースを選択」は「新規」を選択
「既存」を選択しても構いませんが、何も設定していないワークスペースをお選びください - 「インポート オプションを選択」は「統合」を選び（重要）、「矛盾するタグ、トリガー、変数を上書きします。」を選択
もし重複する名前の要素が存在している場合は「～～の名前を変更します。」を選んでください - 「確認」ボタンをクリックして完了
以上、いかがでしたでしょうか。
OAuth認証ログインを見かける機会が増えてきたため、対応方法をまとめてみた次第です。
なお、今回の肝は「特定URLからの流入時にリファラーを書き換えることで、参照元除外を設定できるようにする」という方法そのものです。
これはOAuth認証以外でも応用が利きますので、覚えておいてきっと損はないかと思います。
よくあるケースで言うと、
「複数サブドメインを運用しているサイトで」「メインドメインはwww.を付けずに使っていて」
「各サブドメイン毎に専用プロパティで計測していて」「www.無しドメイン専用プロパティで他のサブドメインを参照元として出したい」
場合などですね。
「www.」を付けないドメインは、シンプルで美しく良いものです。ですが、GAの参照元除外は「部分一致」での判定となるため「www.」を付けないドメインを参照元除外リストへ登録すると、自動的に他のサブドメインも除外される設定となってしまいます。
今回紹介させていただいた方法を使えば、例えば他のサブドメインのリファラーホスト名を書き換えるなどすることで、（書き換え後のホスト名を）参照元としてレポートへ表示させることができるようになります。
正規表現はことほどさように便利なもので、パッと見はよくわからない複雑怪奇なものに見えますが、実は意外とそんなに難しくありません。
ぜひ、簡単にでも、さっと調べてみられることをおすすめいたします。
