GTM(GoogleTagManager)を使ってボタンクリックを計測する

## はじめに
GTM（Google Tag Manager）を使ってボタンクリック計測の検証を行う機会があったので、その手順をまとめておきたいと思います。

## 1. 事前準備
GA(GoogleAnalytics)とGTMのアカウントを取得しておきます。
以下の参考ページが分かりやすいです。

- GAのアカウント取得
[【GA4とUAを両方導入しよう】2021年版！初心者でもできるGoogleアナリティクスの導入方法 – WEBLE](https://weble.tokyo/blogs/ga4/1534/)

- GTMのアカウント取得
[今さら聞けない！Googleタグマネージャーのアカウント開設と導入方法 – WEBLE](https://weble.tokyo/blogs/ga4/1591/)

## 2.  HTMLページの作成とデプロイ
ボタンを適当に配置したHTMLページを１枚用意してデプロイを行います。
今回は筆者都合で [Netlify](https://www.netlify.com/) にデプロイしますが、既に利用中のサービスにデプロイしていただいてOKです。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 後述するコード１の埋め込み位置 -->
  <meta charset="utf-8">
  <title>ボタンクリック計測</title>
  <style type="text/css">
    a {
      display: inline-block;
      padding: 4px 8px;
      color: #fff;
      background: #999;
      border-radius: 4px;
      text-decoration: none;
    }
    div {
      margin-bottom: 1em;
    }
  </style>
</head>
<body>
  <!-- 後述するコード２の埋め込み位置 -->
  <div>
    <h3>ボタンクリック計測サンプル</h3>
  </div>
  <div>
    <button type="button" data-gtm-click="ボタンA">ボタンA</button>
    <button type="button" data-gtm-click="ボタンB">ボタンB</button>
    <button type="button" data-gtm-click="ボタンC">ボタンC</button>
  </div>
  <div>
    <a href="#A" data-gtm-click="リンクA">リンクA</a>
    <a href="#B" data-gtm-click="リンクB">リンクB</a>
    <a href="#C" data-gtm-click="リンクC">リンクC</a>
  </div>
</body>
</html>
```

画面イメージはこんな感じです。
![画面イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/4215398b-f0b4-90a0-e0d9-8e14810c5c05.png)

## 2. GAの設定
GAの設定を行います。
GAにログインして、管理画面の「＋アカウントを作成」ボタンをクリックします。
![GA01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/648cbbab-3be6-2b07-a43b-87b55022aa62.png)

アカウント名に「任意の分かりやすい名前」を入力し、チェックボックスは全てONのままにします。
![GA02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/af2c90ed-6a70-cbdc-4819-612c32506fbe.png)

プロパティ名に「任意の分かりやすい名前」を入力し、タイムゾーンと通貨は「日本」を選択します。
詳細オプションを表示をクリックして、ユニバーサルアナリティクスプロパティの作成をONにします。
ウェブサイトのURLは、デプロイURLを入力します。
※ちなみに、今回はユニバーサルアナリティクスの検証しか行っていませんが、Googleアナリティクス4のプロパティも作成しています。
![GA03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/0b864f53-8fb6-f37b-c4d7-dd736608152c.png)

ビジネスの概要は検証用なので内容で適当に選択しました。
![GA04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/3f416658-4242-2938-74bb-7c3fa73444a4.png)

日本語表示に変更して、チェックボックスをONにして「同意する」ボタンをクリックします。
![GA05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/27a48d6b-db34-4080-6396-8954549349b9.png)

「プロパティ」の「トラッキング情報」＞「トラッキングコード」をクリックします。
![GA07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/86c56035-c46f-8bc7-b84d-fcbb463cd874.png)

トラッキングIDの値は後工程で使用するため控えておきます。
以上でGAの設定は終わりです。

![GA08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/a27c69c7-8a3f-707d-7eb2-0748716b252b.png)


## 3. GTMの設定
GTMの設定を行います。
GTMにログイン後に「アカウントを作成」ボタンをクリックします。

![GTM01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/70c0c979-0f8b-abf6-5c8d-83dc73098e9c.png)

アカウント名は「任意の分かりやすい名前」を入力し、国は「日本」を選択します。
コンテナ名も「任意の分かりやすい名前」を入力し（今回はデプロイURLにしました）、ターゲットプラットフォームは「ウェブ」を選択します。

![GTM02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/2d5de635-7ada-c5f7-abb7-1c799a6fc609.png)

利用規約が表示されるので、画面下部のチェックボックスをONにして、「はい」ボタンをクリックします。

![GTM03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/4b1375ec-4e5c-f3c7-78fa-38dad2ba947b.png)

タグマネージャーのコードが２つ表示されるので、index.htmlに埋め込みます。
指定された位置に埋め込んだら、忘れずに再デプロイを行います。

![GTM04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/efe0d6ce-7597-5b4a-4b31-0488a7f54608.png)

まず最初に、「ユーザー定義変数」の設定を行います。
変数のタイプに「Googleアナリティクス設定」を選択し、トラッキングIDに「GAで発行したトラッキングID」を入力します。

![GTM05_変数1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/b5c39f1f-a123-14cf-5937-99f30e5f4937.png)

引き続き、「ユーザー定義変数」の設定を行います。
変数のタイプに「データレイヤーの変数」を選択し、データレイヤーの変数名に「gtm.element.dataset.gtmClick」を入力します。
データレイヤーのバージョンは「バージョン２」を選択します。

![GTM05_変数2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/7c42c237-6a42-1dba-0ea4-39bdfac42d8b.png)

次にトリガーの設定を行います。
トリガーのタイプに「クリック - すべての要素」を選択し、このトリガーの発生場所に「一部のクリック」を選択します。
条件は「Click Element, CSSセレクタに一致する, [data-gtm-click]」を入力します。

![GTM06_トリガー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/75ae0d94-b7d7-ce98-d28b-b2a9dcb6ae0e.png)

最後にタグを設定します。
タグの種類は「Googleアナリティクス：ユニバーサルアナリティクス」を選択し、トラッキングタイプに「イベント」を選択します。
カテゴリは「イベント」と入力し、アクションは「クリック」と入力します。
ラベルは前工程で作成した「ユーザー定義変数」を選択し、値はブランクとしています。
非インタラクションヒットは「偽」を選択します。
Googleアナリティクス設定は前工程で作成した「ユーザー定義変数」を選択します。
トリガーは前工程で作成した「トリガー」を選択します。

非インタラクションヒットの真・偽については、以下のサイトが分かりやすいです。
[タグマネージャーでバナーやリンクのクリックを測定する方法](https://www.itti.jp/web-direction/how-to-measure-clicks-on-banners-and-links-in-tag-manager/)

![GTM07_タグ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/82cfd0f2-59df-d1d0-20ae-b15e132b5579.png)

タグの設定が終わったら「プレビュー」ボタンをクリックします。

![GTM08_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/a910e3e3-e174-5660-35cc-11b58603bfdb.png)

プレビューするには公開する必要があるとのメッセージが表示されるため、「空のバージョンを公開」をクリックする。

![GTM08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/6dde0a00-c68b-00a3-b8b5-a0c58ddbe7bc.png)

空のバージョンの公開が終わるとプレビューができるようになるので、URLにデプロイURLを入力して、「Connect」ボタンをクリックします。

![GTM09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/80a99978-7539-0975-74e7-1fad51d156ef.png)

ページが表示されるので適当にボタンをクリックしてみます。
※ボタンAを押してみました。

![GTM12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/303efd62-887c-80eb-d9b8-003a100a59d5.png)

「4 Click」というイベントが表示されるのでそれをクリックすると、"Tags Fired" の所に前工程で作成したタグが表示され、きちんとイベントが発火したことを確認できます。

![GTM11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/a1122b00-9af1-c405-7495-f1daf84bea41.png)

GAにログインして、「リアルタイム」＞「イベント」をクリックすると、クリックイベントを計測できていることを確認できます。
イベントアクションやイベントラベルに表示される文言が、タグで指定したものになっていることも確認できます。

最後に忘れずに「公開」ボタンをクリックして、終わりとなります。

![GTM10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/d77d2f5a-64c3-aee9-22e4-54bab5f08f32.png)

## ハマったところ
「データレイヤーの変数名」の設定でハマりました。

![GTM05_変数2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759747/498c7166-2757-7b08-4b0b-077eadbb1889.png)

今回、`data-gtm-click`というdata属性値に「各ボタンを識別する文言」をセットし、GA画面でラベルとしてその文言を表示させたかったのですが、`gtm.element.dataset.gtm-click`で設定したところ、文言を取得することができませんでした。

そして、色々調べていくうちにキャメルケースで設定しなければならないことが分かり、最終的に上記のように`gtmClick`で解決することができました。