Google AnalyticsでVercel NowのDevelopmentとProductionを区別する

このサイトは、GitHubにプッシュすると自動的にVercel Nowにデプロイされるようになっています。 masterブランチはProductionとして、それ以外のブランチはDevelopmentとしてデプロイされるので、リリース前のチェックが手軽に出来て嬉しい。

ただこれ、1つ問題があって。 デプロイされるプログラム自身は自分がプロダクションか否かを知らないので、デバッグ用だろうが問答無用でGoogle Analyticsに記録をしてしまいます。

対処法としては、とりあえず記録は取らせてしまって、後からビューという機能を使ってフィルタするのが良さそうです。

やりかた

1. ビューを作る

Google Analyticsの管理画面に行って、左下の 管理 をクリックします。

開いた設定画面で、一番右の列の上にある ビューを作成 をクリックすると新しいビューを作ることが出来ます。

3つ列があるうちの、一番右の列がビューに関する設定です。この列の一番上に「ビューを作成」ボタンがあります。

名前やタイムゾーンを聞かれるので、適当に答えます。 とりあえず、ProductionとDevelopmentで2つ作るのが良いと思います。

2. フィルタを設定する

ビューが出来たら、ドメイン名を使ってProduction(このサイトの場合はblanktar.jp)とDevelopment(こっちは.now.shで終わるドメイン)を区別するようにします。

まず、設定画面から フィルタ をクリックします。 出てきた画面の フィルタを追加 で新しいフィルタを作ります。

このサイトの場合、以下のような設定になっています。

「プロダクションのみ」の場合、「右のみを含む」「ホスト名へのトラフィック」「等しい」で、ホスト名の欄が「blanktar.jp」になるようにしています。 「開発環境のみ」の場合、「右のみを含む」「ホスト名へのトラフィック」「最後が一致」で、ホスト名の欄が「.now.sh」になるようにしています。

3. 確認する

これで、以下のようにビューを切り替えることでそれぞれのデプロイのデータを見ることが出来るようになりました。 普段はProductionの方を見ておいて、analytics関係のテストをしたいときはDevelopmentを見れば良い。とっても便利。

ビュー切り替えのメニュー。「Development」「Production」「すべてのウェブサイトのデータ」の3つが表示されている。