Google Tag Managerを使ってイベント取得

これは[actindi Advent Calendar 2018](https://adventar.org/calendars/3391)、22日目の記事です。
WEBディレクター兼ad（ネット広告）を担当しているminamiです。
[5日目も担当](https://qiita.com/minami-actindi/items/fdcad88ae0c16df79e54)していますので、よろしかったらそちらもご覧ください。

##Google Tag Managerを使ってイベント取得
Google Analytics（以下GA）のイベントは、コンバージョン数を計測するのに広く知られた方法です。
例えば、どちらのボタンがよりクリックされたのか。
例えば、ユーザーはどのあたりまで画面をスクロールさせたのか。
ECサイトであれば実際に商品購入に至ったのか、もしくはどこで離脱してしまったのか。

Google Tag Manager（以下GTM）を使えば**コードを埋め込まなくてもGAのイベントを取得**できます。
本日はGTMを活用したGAのイベント取得を二例紹介します。
ぶっちゃけ社内向けのドキュメント兼私的な備忘録です（笑）。

##（例1）指定したテキストをイベント発火条件にする

一般的なECサイトの場合、商品購入後に「お買い上げありがとうございました」のテキストが表示されます。
このサンクスページはコンバージョンを示しており、このページのPVはKPIの一つになりますよね。
ところがサイトによっては、申込みフォーム、確認画面、商品購入完了後の3つのURLが同じ場合があります。
このような場合PVをKPIにはできません。

ではどうしたらいいのか。
「お買い上げありがとうございました」の**テキストが表示されたらイベントを発火**させたらいいじゃん。

###イベント発火条件
>条件1：特定の文字列が表示された
条件2：1の文字列が特定のURL（Path）である
条件3：1の文字列が特定のclass（id）配下にある

注意すべきは意図しないページをカウントしてしまうこと。
例えば「もっと見る」というテキストのボタンを計測したいとき。
「もっと見る」の文字列はサイトのいたるところにあり、意図しないボタンも計測してしまう可能性がある。
そこで念には念を押して条件を加えます。
**「このページのここを計測したい」と意図を明確**にしておく必要があります。

###GTMの設定
####手順1：条件3の特定のclassを変数として設定
![9d19ed3c9a2a7019e9853dd0ce5e477a.png](https://qiita-image-store.s3.amazonaws.com/0/223154/d7a345e6-4b61-59c5-2bf5-b58c5430970f.png)

上記の設定は下記のようなhtmlソースコードを想定しています。

```
<div class="c-frame--red">
  <div class="u-text--center">
     //特定の文字列
  </div>
</div>
```



####手順2：トリガーの設定
![45420eb3139d44692aab04ea9ff5e610.png](https://qiita-image-store.s3.amazonaws.com/0/223154/1e70520e-9232-3f66-4f7e-c114fa54e80c.png)

「//イベント取得したいテキスト」には「もっと見る」や「お買い上げありがとうございました」という文字列を入力。
また、Page Path（or Page URL）を指定して条件2の設定も忘れずに。


####手順3：タグの設定
![c193a8917c06a49f2a12f216ba60e2b6.png](https://qiita-image-store.s3.amazonaws.com/0/223154/8b65b0a5-5bcb-1e14-4622-1ac2d3b4b0f6.png)
タグの設定は簡単。
任意のカテゴリ、アクション、ラベルを入力し、手順2で作成したトリガーを設定するだけ。

**『非インタラクションヒット：真』はイベントが発火しても直帰率には影響を与えない設定**。
特定の文字列がLPで表示されている場合は真にしないと、LPの直帰率が0になってしまうので要注意。


ここまで来たらあとは確認作業。
1.GTMをプレビューモードにし、
2.特定ページにアクセスしてGTMのイベント発火を確認し、
3.GAのリアルタイムでイベントが反映されていることを確認。

以上終了ーーーーーーーーーーー。


##（例2）記事ページの読了率を計測する
GTMのデフォルトの機能で、ユーザーの画面スクロール率をイベントとして計測できます。
この機能を使えば、例えばページの60%までスクロールしたかどうかわかります。
ですが、実際の運用にあたり、『60%』が記事のどのあたりかわからないと意味がない。
そこで別アプローチで、**記事の見出しでイベント発火させ、どのパラグラフまでユーザーが達したか**を計測してみます。

###イベント発火条件
>条件1：記事の見出し（h2やh3）が画面に表示されたとき

####手順1：見出しを装飾しているclassを変数として設定
![9dca6289acbabc5ce8c3d3ce064fe87c.png](https://qiita-image-store.s3.amazonaws.com/0/223154/c625e359-9faa-24c2-65fc-e6b73bdfdd0f.png)
いこーよの記事のh2はPCもスマホも、『p-art_cnt_h2_tit』というclassが付いているのでこれを設定します。

####手順2：見出しのテキストを取得するための変数を設定
![5657a36fcea65ed26e38e4f4b8ff88be.png](https://qiita-image-store.s3.amazonaws.com/0/223154/65462c9f-e2c1-3b67-ce5b-f1db7ad4180b.png)


####手順3：トリガーの設定
![519afe967cf7d5a1f9969ba88807e6c7.png](https://qiita-image-store.s3.amazonaws.com/0/223154/578f2108-243e-77f3-4c5b-791bd6b4f743.png)
ポイントは**1要素につき1度**にすること。
記事内には複数の見出しが存在するので、**各見出しが表示されたときに最大1回のイベントを発火**させる。


####手順4：タグの設定
![aff14bb6327c99d705cad3fcc2d59220.png](https://qiita-image-store.s3.amazonaws.com/0/223154/60cdd440-f4b2-3b9e-6c9d-336ee8df9b83.png)

このように設定するとGAでは以下のように表示されます。（数値は一例）
![63cebb6dfda9fdb2509250bae943a182.png](https://qiita-image-store.s3.amazonaws.com/0/223154/a7797410-ea78-78a6-8a66-519e0c27853d.png)

イベントラベルを見出しテキストにすると、どのパラグラフまでユーザーが達しているか一目瞭然。

以上終了ーーーーーーーーーーー。


##注意点
・イベント名に{{Page URL}}を設定すると、意図したページのみ取得しているか確認が容易
・非インタラクションヒットは適宜設定

レスポンシブサイトでない場合
・PCとスマホでclass名やテキストが一致しているか要確認
→一致していなければ、PC/スマホそれぞれ設定が必要


##まとめ
いかがだったでしょうか。
GTMは使いこなせるとかなり便利なツールだと思います。もっと勉強しようっと。

こんな感じでWEBディレクターっぽいお仕事もゆるーくやっています（笑）。