GoogleTagManagerを簡単に使うためのRails用Gemを作ってみた(GTMを使ったPV計測の設定方法)

会社でGoogleTagManagerやらGoogleAnalyticsやらを使った計測・解析自体やその設定周りも担当してたりするんですが、それを他プロジェクトでも使う必要が出てきたので、Gemにしてみました。
そのGemの使い方や、具体的なGoogleTagManagerとの連携(設定)の例を社内への共有も兼ねて紹介します。

# 作ったGemについて
<img src="https://qiita-image-store.s3.amazonaws.com/0/108414/7989c00b-4cc4-09da-572a-5d8546e26026.png" width="300px" alt="GTMonRAILS.png">
(※OGP用)

https://github.com/ykogure/gtm_on_rails
https://rubygems.org/gems/gtm_on_rails
これです。
今回作ったGemでは、GoogleTagManager用のheadタグとbodyタグに挿入する必要のあるスニペットの追加だけでなく、bodyタグ側に挿入するコードによってGoogleTagManagerに送信される`dataLayer`というjsの変数をRuby側でいじれるような感じにしてあります。
ちなみに、GoogleTagManager関連のGem自体は他にもいくつかあるようですが、おそらく他のGemはほとんどがスニペットを追加するだけのもののようです。(違ったらごめんなさい)

# GoogleTagManagerを用いてGoogleAnalyticsで基本的な計測を行う
とりあえず今回作ったGemを使ってGoogleAnalyticsで基本的なPV計測を行うための手順を紹介します
。
他にもクリックイベントの汎用計測用設定やらイベントの汎用計測用設定やら色々あるんですが、それはまた別の記事で紹介します。(予定)

## Gemの導入
Gem自体の初期設定はReadmeに書いてあるのでそっちと内容かぶります。

Gemfileに

```rb:Gemfile
gem 'gtm_on_rails'
```

と書いて`bundle install`します。
インストール後、

```bash
rails g gtm_on_rails:install
```

のコマンドを実行し、初期設定(configファイル生成等)を行います。
この時、`app/views/layouts/application.html.erb`のheadタグとbodyタグ内の一番上にスニペット吐き出し用のヘルパーメソッドが追加されますが、インデントがおかしいので手動で修正して下さい。
(誰か自動でインデント揃える方法知ってたら教えてください…)

## Gemの初期設定
生成された`config/initializers/gtm_on_rails.rb`でGemの設定を変更します。
設定値の内容は[githubのREADME](https://github.com/ZIGExN/gtm_on_rails/blob/master/README.ja.md#configure)に書いてあるので、そっちを参照して下さい。

※ちなみに私としては`rescue_when_error_occurred`の設定は有効にしておくことをおすすめします。計測のエラーによって売上の損失が発生しうるってのはこわいです…

## GoogleTagManager側の初期設定
### GAトラッキングIDの設定
[変数]
変数の種類：定数
値：GAトラッキングID
<img width="1280" alt="GTM_GAトラッキングID.png" src="https://qiita-image-store.s3.amazonaws.com/0/108414/6a17149d-f520-86a9-6041-e1a2f8374112.png">
上記のように設定しておくと。タグ設定の時に毎回トラッキングIDをコピペしなくていいので楽です。

### 基本PV計測タグの設定
[タグ]
タグタイプ：ユニバーサルアナリティクス
トラッキングID：GAトラッキングID(さっき設定した変数)
設定するフィールド：「フィールド名：cookieDomain」「値：auto」
トリガー：All Pages
<img width="1280" alt="GTM_基本PV計測タグ.png" src="https://qiita-image-store.s3.amazonaws.com/0/108414/d980b517-7852-1272-6afc-9b7f4c8ca458.png">
上記のフィールドの設定は、cookieのドメインの設定なのですが、autoにしておけばとりあえずGAがうまいことやってくれるので問題ないです。

## PV計測タグにコンテンツグループを設定する
これは必須ではないのですが、設定しておくとあとで結構便利です。

GAではページ単位でセグメントやディメンションなどで絞り込む際、基本的にURL(パス)で条件を設定することしかできません。
ですが、PV計測の際にコンテンツグループを設定しておくことで、そのグループで条件設定ができるようになります。
これは例えば、特定のパラメータがある場合は大きく別の意味合いのあるページになるページや、そもそもURLだけでは判別できない要素(データの有無やセッション情報によるものなど)で切り替わるページなどでもそれらを簡単に別のページとして調査可能になるため、動的要素が多いサービスではかなり重要になるんじゃないかと思います。

### コンテンツグループ名をGoogleTagManagerに送信
```rb:application_controller.rb等
data_layer.push({contens_group: "#{controller_path}##{action_name}"})
```
上記のように`application_controller.rb`内に記述します。
今回はコンテンツグループ名をシンプルに`"controller名#action名"`にしていますが、自分の好きなように設定してしまって大丈夫です。

### GoogleTagManager側で値を設定
[変数]
変数の種類：データレイヤーの変数
データレイヤーの変数名：contents_group
データレイヤーのバージョン：バージョン2
<img width="1280" alt="GTM_コンテンツグループ変数.png" src="https://qiita-image-store.s3.amazonaws.com/0/108414/fe4400b3-38ca-a7f0-049a-ada0fc4cd031.png">
上記のように設定することでdataLayerで送信した変数をGoogleTagManage内で使用できます。

コンテンツグループ：「インデックス：(GoogleAnalytics側で設定したインデックス)」「コンテンツグループ：(上で設定したコンテンツグループの変数名)」
<img width="1280" alt="GTM_基本PV計測タグ_コンテンツグループ設定.png" src="https://qiita-image-store.s3.amazonaws.com/0/108414/ecda20b3-132d-a143-0ab4-fd249e7e018a.png">
上記のように先程設定した基本PV計測タグにコンテンツグループを追加します。
※先にGoogleAnalytics側でコンテンツグループの設定をする必要があります。

これで設定は終わりです。最後にプレビューモードを用いてちゃんと計測できているかどうかテストしましょう。

## プレビューモードで計測できているか確認する
<img width="455" alt="GTM_プレビューモード1.png" src="https://qiita-image-store.s3.amazonaws.com/0/108414/5090a84a-c2c7-e09b-6c33-0669c0cf83a8.png">
右上の方のプレビューボタンを押してプレビューモードを起動する。

<img width="634" alt="GTM_プレビューモード2.png" src="https://qiita-image-store.s3.amazonaws.com/0/108414/0fab2a4e-208b-6831-093a-f62cadace290.png">
GoogleTagManagerのスニペットを埋め込んだテスト用ページを表示すると、このようなプレビューモードの表示が開く。
上記のように「Tags Fired On This Page:」に基本PV計測タグが表示されていればタグが正常に発火しています。

<img width="789" alt="GTM_プレビューモード3.png" src="https://qiita-image-store.s3.amazonaws.com/0/108414/e50bb2d9-d472-552f-c39e-55d47b642cb0.png">
「基本PV計測タグ」をクリックして「Show More」で詳細を確認して、上記のように設定したコンテンツグループやフィールドが設定されていればタグは正常に機能しています。

## 最後に
GTMの設定に関する記事等は日本語でもいくらか存在するのですが(GTMは英語の情報が圧倒的に多いですね)、大概はいわゆるマーケッター向けに書かれているもので、html側をいじらないのが前提になっているようなのが多い印象です。
それはそれで全然いいのですが(エンジニアを通さずに運用できるのであればそれに越したことはない)、結局設定がより複雑になっていたり、汎用性や再利用性にかける設定になっていたりする印象が強いです。
なので自分としては今回作ったGemやらこの記事やらを元に、より無駄なくGTMで計測周りのことを運用してもらえればなと思います。

今後は簡単にクリックイベントを取るための設定や、簡単に汎用的にイベント計測するための設定などもまた暇な時にまとめようかと思ってます。