Google Analytics & GTM の組み合わせで自由自在なイベント計測を実現する

こんにちは。キャリア事業部マーケティンググループの河又と申します。
今回、Google Analytics + GTMの組み合わせで自由自在なイベント計測を実現する方法について記載します。
計測結果は、ダッシュボードでKPIとして監視したりAdwordsのリストとして使ったりできます。

# 準備
1. GTMのheadコード&bodyコードを対象サイトにインストール。
2. Google Analyticsのユニバーサル トラッキングをGTM経由で対象サイトに配信。

とはいえ既に済んでいる方が大半と思いますので、ここの部分の説明は省かせていただきます。


# あなたの計測したいKPIは？
あなたのサイトで、今計測するべき指標は何でしょうか？
単純なセッション数や直帰率なら、GAはデフォルトで計測可能です。
今回のスキームが役に立つのは、独自のKPIを設けているときです。

* 読了数
* 動画再生数
* 特定の要素の表示数
* ボタンクリック数

などなど、、
これらは全て、今回のスキームで計測可能です。

## KPIを決めたら、GTMで「ユニバーサル アナリティクス」の「イベント」を作る

GTMの画面から赤い「新規」ボタンを押して作成してください。

![12月-07-2017 18-42-34.gif](https://qiita-image-store.s3.amazonaws.com/0/9246/8b23bee0-cef9-a1ac-ddf5-1ebeb69e014c.gif)

作ったら、KPIの「カテゴリ」と「アクション」と「ラベル(これはなくても良い)」を決めます。
例えば記事の読了数ならカテゴリはarticle、アクションはfinish_readingでしょうか。
以下のような雰囲気で決めてください。

> カテゴリ＝計測するデータのグループ名
> 一般的に行為に対する対象物を割り当てる様な使い方がなされます。
> 例：ad（広告）、movie（動画）、image（画像）、link（リンク）、button（ボタン）等

> アクション＝ユーザの操作タイプ
> 例：click（クリック）、download（ダウンロード）等

> ラベル＝計測するデータの最小単位
> 例：「○○へのリンクはこちら」、「リスクル資料ダウンロード」
> 参考: イベントトラッキングとは？Googleアナリティクス初心者でも分かる設定方法 https://liskul.com/event-tracking-15875

最後に「Google アナリティクス設定」からGAトラッキングIDの情報を入力して「設定変数」を入力・保存してください。

![12月-07-2017 19-02-58.gif](https://qiita-image-store.s3.amazonaws.com/0/9246/8ee45954-06a1-b49a-7f4b-ba676fabfe9c.gif)

ここまで終わったら、トリガーの作成に入ります。

## トリガーの作成

![Google_タグマネージャ.png](https://qiita-image-store.s3.amazonaws.com/0/9246/4ab85c7f-ebeb-e1b2-29f0-3bf61b5c2044.png)
![Google_タグマネージャ.png](https://qiita-image-store.s3.amazonaws.com/0/9246/2df41bd0-8b5c-de23-7bb3-0b4c6f02cb21.png)
![ 2017-12-07 19.24.38.png](https://qiita-image-store.s3.amazonaws.com/0/9246/fb0bd743-a6ff-5f3c-72ff-3aa484b90391.png)


トリガーとはGTMの機能で、特定の条件に合致したらタグを発火させるというものです。
デフォルトで用意されているトリガー条件としては以下があります。

* DOM Ready
* ウィンドウの読み込み
* ページビュー
* 要素のクリック
* YouTube動画の再生
* スクロール距離
* フォームの送信
* 要素の表示
* JavaScriptエラー
* カスタムイベント
* タイマー
* 履歴の変更

カスタムイベントや履歴の変更等は特殊ですが、ほかは簡単に意味がわかるかと思います。
これら様々な動作に対して、トリガーを設定可能です。

読了数なら、記事の終わりにある要素のIDやClassを「要素の表示」にて指定してあげれば良いです(アバウトですが)。
デバイスやURLなどの条件も指定可能です。

![ 2017-12-07 19.37.27.png](https://qiita-image-store.s3.amazonaws.com/0/9246/95cf6c40-9600-915f-9db9-49dcf8068ce7.png)

ここまで出来たら計測の準備はOKです。
念のため「プレビュー」で表示に問題がないかチェックした上で、Chromeの「[Tag Assistant \(by Google\) \- Chrome ウェブストア](https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=ja)」拡張を使いイベントの正常発火を確認したら、本番に反映させしましょう。

## Google Analyticsでイベントを監視する

Google Analyticsの画面から「イベント -> 概要」を辿ります。

![ 2017-12-07 19.41.43.png](https://qiita-image-store.s3.amazonaws.com/0/9246/d26c0d80-c09c-d035-5e74-775670756e5b.png)


「イベント カテゴリ」からさきほど設定したarticleを選択します。

![2017-12-07_19_41_35.png](https://qiita-image-store.s3.amazonaws.com/0/9246/076125db-6c05-74c7-5dda-bb2208f735ef.png)


こちらから実値を確認できます。

![2017-12-07_20_20_40.png](https://qiita-image-store.s3.amazonaws.com/0/9246/48e9e743-68f0-be2b-9e16-7f03c3e733fc.png)

## セグメント化して動向を探る

記事を読了したことのある人は、していない人と比べてどう行動が異なるのでしょうか。
会員登録率は？遷移率は？滞在時間は？...
これらを調べる為には、イベントに応じてユーザーをセグメント化してみましょう。

![2017-12-07_20_18_00.png](https://qiita-image-store.s3.amazonaws.com/0/9246/8833006d-f0cc-e28e-d389-f35c2691e83f.png)

カテゴリ、アクション、ラベルを合わせてください。

![ 2017-12-07 20.19.23.png](https://qiita-image-store.s3.amazonaws.com/0/9246/bb7cde57-b88d-241e-ff50-df4fddb60edd.png)

この状態で保存すればセグメントの完成です。

## まとめ
いかがでしたか。この方法なら「onClick=''」等でHTMLを汚さずとも各種KPIを取得・活用できます。
マーケター・ディレクターだけで完結するのも良い所ですね。
ただし要素のID名、Class名、存在有無等は実装が変われば容易に変わってしまうものです。
このスキームを活用するなら、開発サイドとの認識のすり合わせや変更点へのキャッチアップを怠らないようにしましょう。

---

明日は@fkm_yさんです！