tenpuの運用開発を行ってる @gorou_178 です。この記事は、イノベーター・ジャパンAdvent Calendar 2017の15日目の記事です。14日目の記事では、「人によって期待されるサービスが全然違う」という経験についての話がありましたが、この期待されるサービスは、何気ない行動から何を期待しているのかを観察することで発見できると思っています。
ユーザーの行動や蓄積されたデータを計測・分析することで「期待されているサービス」を知ることができ、それはサービス開発には欠かせない部分だと感じています。
tenpuでは、GoogleTagManager・Keen.io・Newrelic・Mackerelなどを活用して色々な計測・分析をしています。今回は、GoogleTagManagerで計測する上で、GoogleTagManager自体の管理方法について書きたいと思います。
GoogleTagManagerとは
GoogleTagManager（以下、GTM）とは、管理画面上から対象のサイトに対して、特定のタグを任意のタイミングで差し込む事ができるツールです。
たとえば、「GoogleAnalyticsのトラッキングコードをwebサイトの全ページに差し込む」ことができます。GoogleAnalytics（以下、GA）は、「○○の値を取りたい」とき、webサイトに対してJavaScriptコードを差し込む作業がどうしても発生します。GTMでGAを管理すると、その差し込む作業がなくなり、管理画面の設定のみで完結します。
GAのトラッキングコードだけでなく、任意のHTMLコードであったりCSS・JS、他サービスとの連携も行えます。とても便利です！
準備するもの
以下の環境を前提としています。
- 計測対象のwebサイトの本番環境とステージング環境がある
- GAを本番環境用とステージング環境用の2つ準備
- GTMのコンテナを1つ作成
計測もチームでテスト
GAを使っていた時、ローカルだとちゃんと計測できているか確認しにくいところがありました。
GTMだと、プレビュー機能というものがあり、新しい計測を追加してそれがちゃんと反映されて動くことを、自分のアクセスのみ、実際のサイト上で確認することができます。
この機能とてもとても便利なのですが、チームで確認となると1人ずつプレビューしないといけないため煩雑です。そこでGTMの「環境」という機能を利用します。
環境の自動切り替え
GTMの「環境」を作成します。「環境」とは、GTMの設定を適用するサイトを複数管理できる機能です。この機能を利用することで、ステージング環境にGTMの設定を反映するということができ、チームで確認することが出来ます。では作っていきます。
まずコンテナの管理画面を開きます。
管理画面から、コンテナの環境を開きます。
環境の画面の「新規」ボタンから環境を作成します。名前にStaging、説明は任意で入力、デバックをデフォルトで有効にするチェックボックスはチェックなし、リンク先URLはステージング環境のURLを入力して作成します。このStagingという環境の名前はとても重要であとで利用します。
環境毎にGTMのコードが異なります。それぞれの環境に、それぞれのGTMコードを反映しましょう。ステージング環境にはStagingのコード、本番環境にはLiveのコードを、実際のwebサイトに反映されるようにします。
各環境の右側の「操作」メニューから「コードを取得」で差し込むコードを取得できます。差し込むコードは、<head>に反映するコードと<body>に反映する2つのコードがあります。どちらも確実に反映しましょう。*1
次に変数を作成します。左側メニューの「変数」を開き、組み込み変数の「設定」を開きます。
組み込み変数を利用するかどうか設定する画面が右側に表示されます。この中から「Environment Name」のチェックを付けます。チェックを付けた時点で設定が保存されるので、「x」ボタンで閉じます。
次にユーザ定義変数を作成します。組み込み変数の下の、ユーザ定義変数欄「新規」を開きます。
変数名（左上）をanalyticsTrackingID、変数タイプをルックアップテーブルにします。
ルックアップテーブルに環境毎のGAのトラッキングIDを入力します。変数の欄には先ほど組み込み変数で有効化した変数{{Environment Name}}を指定します。ルックアップテーブルには、以下の情報を追加します。
| 入力 | 出力 |
|---|---|
| Staging | UA-XXXXXXXXX123 |
| Live | UA-XXXXXXXXX456 |
この変数analyticsTrackingIDは、利用している環境名{{Environment Name}}がStagingの場合、UA-XXXXXXXXX123が設定され、Liveの場合、UA-XXXXXXXXX456 が設定されます。環境によってGA設定を振り分けることが出来ました。
GA設定
Googleアナリティクス設定変数を作成します。変数ページのユーザー定義変数の「新規」を開き、名前を「xxx Analytics」、変数タイプで「Googleアナリティクス設定」を選択。
Googleアナリティクス設定で、「トラッキングID」には先ほど作成したanalyticsTrackingID変数を指定します。右側のブロックマークをクリックすると変数一覧が表示されるので、そこから選択すると変なタイポしなくて済みます。「Cookieドメイン」はとりあえずautoでよいです。詳細設定は任意で設定しましょう。
最後に、この「xxx Analytics」を利用してユニバーサルアナリティクスのタグを作成します。タグページの「新規」を開きます。
タグタイプから「ユニバーサルアナリティクス」を選択します。
ユニバーサルアナリティクス設定の「Googleアナリティクス設定」に、先ほど作成した「xxx Analytics」を設定します。こうすることで、利用している環境に合わせて、Googleアナリティクスを自動で切り替わる仕組みが完成します。長かったですね、お疲れさまでした。
タグでオーバーライド設定について
タグのユニバーサルアナリティクス設定には、「このタグでオーバーライド設定を有効にする」というチェックボックスがあり、これにチェックを入れるとトラッキングIDや、その他アナリティクスの設定が行えます。
しかし、この設定をしてしまうと、それぞれのタグにアナリティクスの設定が分散してしまい、あとで設定を変更したい時に全てのタグを修正しないといけなくなります。あくまで上書き設定は、限定的に設定を変更したいときに利用しましょう。上書き設定は極力使わず、共通化してGoogleアナリティクス変数化してしまうのがおすすめです。
まとめ
GTMの管理方法について書きました。GTMの管理画面はとても柔軟にいろんな事が管理できるようになっています。反面、何がどこで計測されているのか収集がつかない状態になってしまいがちです。計測しやすい環境を作って、しっかり分析を行っていきたいです。
今後は、Google Data Studioや、Google Optimizeなどもうまく活用できたら良いなと思っています。
イノベーター・ジャパンAdvent Calendar 2017、16日目はオシオが担当です。お楽しみに！
*1:bodyタグ側のコードのnoscriptタグ動かなそうと思い、反映していなかったら、SearchConsole側で所有者確認エラーというのが発生しました。ちゃんとどちらも書きましょう
