FacebookログインがGAの参照元になるのをGTMでフィルタする

　フィナンシェというサービスを作っていて、ファウンダーが「[僕はインスタやFacebookがそろそろ終わると思っている](https://note.mu/hkunimitsu/n/n6823b9d4b8a6)」といいながらログイン手段がFacebookしかない[^1]のですが、アクセス解析をする際に困ったことが起きました。

![アナリティクス .png](https://qiita-image-store.s3.amazonaws.com/0/8727/a60ae5fa-34a2-2ee7-36e4-0c4fa2a85fbe.png)

Google Analyticsを眺めるぼく：
　　「Social流入圧倒的だなー。どれどれ、どのSNSが1番かな？」

![アナリティクス - .png](https://qiita-image-store.s3.amazonaws.com/0/8727/cf182e2a-90d3-840d-2a32-5830cdb1c206.png)

？？？？？？？**Facebook 99.4%**？？？

これはもしかして、やらかしてしまったか？

![アナリティクス - Google Chrome 2019-04-02 17.48.15.png](https://qiita-image-store.s3.amazonaws.com/0/8727/fcd90a56-8119-b53c-8441-a401bdff9d39.png)

やっぱりーーー！！ほとんどの参照元がOAuthログインで汚染されてた（なおこの画面はログイン済みかつ一定の条件でフィルタしたものだが非ログインも含めてもヒドイ状況）

# Google Tag Managerでなんとかする

通常、このような外部サービスへの一時的な遷移はGoogle Analyticsの「[参照元除外リスト](https://support.google.com/analytics/answer/2795830?hl=ja)」という機能を使います。TwitterなんかはOAuthドメインが `api.twitter.com` だったりするのでそれを設定すればよいのですが、Facebookの場合は一般ユーザが利用するドメインと同一なので、除外してしまうと正しくSNS流入を計測することができません。

そこで、[GAフォーラム](https://www.ja.advertisercommunity.com/t5/%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E8%A8%AD%E5%AE%9A/oauth%E3%81%A7%E8%AA%8D%E8%A8%BC%E3%82%92%E8%A1%8C%E3%81%A3%E3%81%9F%E9%9A%9B%E3%81%AE%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/m-p/13831/highlight/true)や海外のサイトを探したところ、どうもサーバ側でがんばって、OAuthの戻りページのみga()コマンドでリファラを空にするという方法が紹介されていました。ただしこれは本体の開発にも絡んできますし、あまり導入しにくい方法です。

そこで、[この記事を参考](https://www.thyngster.com/tip-maintaining-proper-session-attribution-in-ga-when-using-oauth-providers-with-google-tag-manager/)に、リファラをGTMで加工する方法を選択しました。GTMのカスタムJavaScript変数を使用して、もし `document.referrer` に/dialog/oauth/とかが含まれていればnullをセットするという方法を採用しました。

### （補足）Google Tag Managerとは？

ちなみに、Google Tag Managerを知らない人向けに解説すると、ようはいろんなアクセス解析や広告のタグをまとめて管理してくれるJavaScriptコンテナみたいなものです。`<head>` タグ内にGAやその他いろいろなタグをペタペタ貼るのではなく、GTMのJSを1つ貼っておいて、それ以外はGTMの管理画面に張り付けると動的に読み込んでくれるのです。

しかも、今回みたいに、「この条件ではGAに飛ばさないで！」とか「このページとこのページはURL一緒なんだけど、H2タグがちがうから別のページとしてGAに飛ばして！」といった小技が使えるので、新規サイトではおすすめします。

なお、バージョンアップも割と活発なので、ググるときは直近2年くらいに絞った方が賢明です。Qiita内の記事だとこのあたりがおすすめです。

GoogleTagMangerってこんなもの
https://qiita.com/takepeso/items/b9fc8cb8a535dd4b232a

アクセス解析担当が必ずやってるGoogleAnalytics設定のまとめ【2018年版】
https://qiita.com/__mr_/items/28cba0409675739e9917

タグマネージャーツール設置方法まとめ【2018年更新】
https://qiita.com/aqril_1132/items/d674fa0b576c6a44895f


## GTMでカスタム変数を作成

それでは実際の作業の様子です。

![Google タグ マネージャー - Google Chrome 2019-04-02 17.32.06.png](https://qiita-image-store.s3.amazonaws.com/0/8727/4398e140-7eae-6410-7b4b-b4f77b1f19ae.png)

まずは、ユーザー定義変数を新規作成します。

![Google タグ マネージャー - Google Chrome 2019-04-02 17.36.57.png](https://qiita-image-store.s3.amazonaws.com/0/8727/0a10ce2a-7c21-a765-cf68-2d8acf868397.png)

名前を付けましょう。今回はFiltered Referrerにしました。変数のタイプをカスタムJavaScriptを選び、以下のようなコードをペロッと貼り付けます。

```javascript
function(){
  var r = document.referrer;
  if(r.indexOf('/dialog/oauth') > -1 || r.indexOf('/login.php') > -1) {
    return null;
  }
  return {{Referrer}};
}
```

この最後の `{{Referrer}}` はGTMのもともとの組み込み変数で、フィルタに引っかからない場合はこの組み込み変数を返すようにしておきます。

そして、設定した変数をGAのタグに設定します。

![Google タグ マネージャー - Google Chrome 2019-04-02 17.38.46.png](https://qiita-image-store.s3.amazonaws.com/0/8727/0c8edf19-002c-ccc9-16da-cedf84d8a4c1.png)

これで公開すれば、以降Facebookログインしてもリファラが飛ぶことはなくなるはずです。
Facebook以外にもドメインを除外せず一部だけフィルタしたいものが複数ある場合は、元記事のように配列で管理した方がよいでしょう。

もしお使いのサイトでFacebookログインを導入している場合（特にモバイルサイト）「集客」→「参照元」→セカンダリディメンションで「参照URL」を含めるとこのような問題に気づくことがありますので、一度チェックしてみてはいかがでしょうか。


フィナンシェはまだまだissue山盛りですがより良いサービスに育てていきたいと思います。[Wantedlyもオープンしました](https://www.wantedly.com/projects/297985)。


[^1]: 現在Facebook以外のログイン方法も鋭意実装中です！