🐣

GTM(Google Tag Manager)でユーザ行動分析の土台を整える

2020/11/19に公開

Google Analytics

Googleさん、いつもお世話になっております

Google Analytics 4が出てきたり、GTMでサーバーサイドタグが登場したりと、最近は話題が多い印象の計測まわり。改めて、こういったツールの役割、ちょっとした活用のヒントをまとめていきます。実装例は、Nuxt.js製ウェブサイトへの導入になっています。

ユーザの行動、分析していますか？

ウェブサイトやECサイトなどを運営していると、切っても切り離せない、ユーザの行動分析。

ユーザは...

どこから、なぜやってきて
サイトのどこで何をやって
どういう結果になったのか

これを定量的にとらえて、ネックになっているポイントを見つけ、改善を行い、ユーザをより良い状態にすることが、行動分析の一連の流れになります。
例えば、社内向けツールや、ユーザを絞ったサービスなどもあるでしょう。そういったものであれば、実際のユーザにヒアリングを行うことで得られる気づきもあると思います。
ですが、広くインターネット上で公開しているサービスでユーザと直接コミュニケーションを取るのは難しいですし、何より、話すことで出てくる内容というのは結構氷山の一角でして、本能と言いますか、本性と言いますか、そういったものが数字には現れると思っています。
ですので、定性的なヒアリングは行えるに越したことはありませんが、定量の材料を持っておくことは大切なことだと考えます。

サイトの計測といえばGA(Google Analytics)

基本無料で使えるGoogleが提供するアクセス解析ツールGoogle Analytics。
トラッキングコードと呼ばれるJavaScriptのコードを指定された通りにページに貼るだけで、ユーザやセッション、PV(ページビュー)といった基本的な計測が行えます。
ただ、これだけだと「サイトのどこで、何をやって」の解像度が荒い状態です。「どこのボタンがどれくらい押されているのか」といった内容は、追加でイベントトラッキングを仕込む必要があります。
ここで登場するのが、GTM(Google Tag Manager)です。

GTM(Google Tag Manager)とは

その名の通り、タグマネージメントツールです。
"ココにこのJavaScriptタグを入れたい！"というのを管理してくれるツールです。
さて、先ほどのイベントトラッキングの話の続きです。GTMを使っていない場合。

マーケターのMさん「今回新たに、各商品ページに紹介動画を追加してみたが、どれくらい見られているのだろうか？知りたいな。」
エンジニアのEさん「・・・（いやー...それ、動画の機能追加の開発してる時に言ってよ...）」

ウェブ系のエンジニアであれば、1度は見たことがあるであろう...

ga('send', 'event', [カテゴリ], [アクション], [ラベル], [値]);

これは、ソースコードに追加するものなので、それは開発してる時に言ってよ...となるんですよね。
GTMを使っていれば、サービス本体のソースコードとは別の系統として、こう言ったタグを出し入れできるため、後から"ここの数字とって見よう"のハードルがだいぶ下がります。

GTMの導入方法

React,Django,Vue.js,Ruby on Rails...さまざまウェブフレームワークがありますが、どれにおいても、GAのトラッキングコードの代わりにGTMのコードを設置すればOKです。
発行されたコードを指定通りベタ書きしても良いですし、各フレームワークのコミュニティが提供しているモジュールなどを使用しても良いかと思います。
後述しますが、1つのコンテナから開発環境と本番環境と言った、環境別のコードを発行できたりもするので、開発中のポチポチが計測されるのが嫌という場合などに活用できるかと。

導入は至って簡単。READMEにある通りです。

nuxtのプロジェクトにインストール

yarn add @nuxtjs/gtm # or npm install @nuxtjs/gtm

nuxt.config.jsにGTMのIDを記載する

export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX'
  }
}

ここからがGTMで土台を整えていく作業になります。

GTMでタグとトリガーを準備する

タグ: データを Google アナリティクスなどのシステムに送信するコードです。
トリガー: クリック、フォームの送信、ページの読み込みなど、特定のイベントをリッスンします。

タグは、やりたいことそのものを指しているととらえるとわかりやすいです。PVやイベントの送信、はたまた独自のHTMLを挿入するなど、です。トリガーというのは、それを発火させる場所やタイミングを定義します。タグとトリガーを紐づけることで、「どこで/どんなタイミング」で「何をする」というのが決まります。

今回使用しているgtm-moduleでは、「nuxtRoute」というカスタムイベントを飛ばしているので、これを受け取ってPVが取れるようにします。

例えば、特定の箇所のクリックを計測したい場合は、「飛ばしたいイベントタグ」と「クリックによるトリガー」、イベントに含めたいページの要素（クリックされたボタンの名前など）を取得する「変数」を設定します。

トリガーいろいろ

イベントトラッキングでカテゴリやラベルに入れる値は、「変数」を使って管理します。
こちらはDOM要素を使った例になります。

タグ設定の中では{{変数名}}で、変数の値を呼び出すことができます。

設定が整ったら、プレビューを実行し、想定通りタグが発火しているか確認します。別ウィンドウでサイトが立ち上がるため、サイト自体の動作に問題ないかも確認します。GAのリアルタイムも確認すると、なお良しです。

タグをクリックすると詳細を見ることができます。

うまく動かない時は、Variablesなどの詳細も見ていきます。

問題ないことが確認できたら、バージョンを作成し公開します。（バージョン作成のみも可能）

GTM Tips

複数人で運用するときはワークスペース機能を活用
gitでいうbranchですね。バージョン作成時などに、最新バージョンとの設定内容の同期、差分チェックも行われます。複数人で運用するときは、このワークスペース機能を活用すると良いでしょう。
環境別のコード発行が便利
例えば、dev環境にあげているサイトで計測を確認したい時に、dev環境にだけ変更を公開といったことができます。環境の作り方次第で、切り分け方法は他にもあると思いますが、このような形で正式に提供されていたりもします。
GAに送りたくない内容は、そこだけ抜いたり、GTMで上書き
GAに送りたくない内容がある場合は、その場所でタグ発火させないや、値を上書きしたりします。この辺りはプレビューで、取得されているデータをしっかり確認して、必要に応じて制御を入れていきましょう。
値の上書きは、タグの「このタグでオーバーライド設定を有効にする」にチェックを入れ、詳細設定で定義します。

GTMの注意点

エンジニアでなくても操作しやすい一方、その操作がサービス本体の動作に思わぬ影響を与えてしまうこともあります。設計や変更の内容によっては表示崩れが起こることも。プレビューでは、タグの発火はもちろん、ページの動作にも注意を払って確認をしましょう。

まとめ

サイトとかECとかやっている人は、GTMを入れておくと計測で小回りが効くので、分析がしやすくなるね、という話でした。今回はイベントトラッキングまででしたが、収益やコンバージョン、広告出稿などをつなげることで、分析の幅をさらに広げることも可能です。
計測がたくさん混じってくるとコードも読みづらくなりますし、早いサイクルで施策を打つほど、どこに何を入れた？漏れはないか？の心配が増えるため、私は特段のNGがなければGTMを使った整備をおすすめしています。GTMは知っているけど、どうやるのかイマイチ知らないという人にとっても、イメージが具体的になっていれば幸いです。
引き続き、データまわりのうんぬんを書いていけたらな、と思います。