【エンジニア向け】GA4 / GTM 完全攻略マニュアル 特定の要素クリック編

## はじめに
2022年3月16日にGoogleからユニバーサルアナリティクス（UA）のサポート終了が発表されてしばらく経ちましたが皆さんいかがお過ごしでしょうか。

きっと上司や顧客から「2023年7月までにGA4に移行しろ」と言われている日々かと存じます。

本記事はGA4やGTMの設定を完全攻略するためのマニュアルとなっています。
既に様々な記事が出ていますが、不要な情報が多くて欲しい情報になかなか辿り着けないことも多いかと思います。
本記事では忙しいエンジニアの皆さん向けに必要な情報だけをまとめた記事となっています。

今回は特定の要素クリック編ということで特定の要素がクリックされたことをGTMで判定してGA4でイベントを確認してみます。

前回のPV編はこちらからご確認ください。
GTMの初期設定や動作確認方法についても解説しています。

https://qiita.com/alpaca1231/items/30bc6c5e4c649a2b8979



## 特定の要素をクリックしたときに発火する設定方法
以下のようなボタンをクリックしたときに発火するように設定していきます。
![32574f50-8d6e-4b62-a399-fd5f50a151b3-960x231r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/282f889a-977c-5915-d9e8-e415de024bab.png)
```html
<html lang="ja">
  <body>
    <button onclick="handleClick()">
      <span>詳細を見る</span>
      <img src="icon.svg" alt="右矢印" />
    </button>
  </body>
</html>
```

### １．タグの設定
タグ名は自由です。今回は`Button_Click`にします。
タグの種別は`GA4 イベント`にします。
設定タグは上記で作成したページビューの設定タグを選択するとページビューと一緒に飛ばすことも可能ですが、今回は単体のイベントとして発火させたいので`なし-手動設定したID`にします。
![d10e71ab-51a9-4c3a-b2a7-64af22b36a90-960x290r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/59500ced-1f51-532a-fa40-101367848fe7.png)


測定IDには変数を指定することも可能です。
+アイコンから変数を追加できます。
![61da65a8-f3e1-40ed-8376-815329fbb1e5-960x488r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/4cc70718-91c5-673b-15f2-550575bb3d42.png)
![f4dcdadd-7026-4f72-a7df-b134dea48550-960x204r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/da7a979d-1705-7718-e415-b4c15abddd65.png)


変数名は自由です。今回は`GA4トラッキングID`としています。
変数のタイプは定数にします。
値にトラッキングIDを入力してください。入力できたら保存してください。
![e60d21c4-7611-4d64-ad04-1e2bab047569-960x297r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/e4f95561-cc57-d7e7-71b8-52ea76a64bc1.png)


変数を使う場合は`{{変数名}}`のように入力します。（新規作成後は自動入力されます）
イベント名は自由です。今回は`Button_Click`にします。
![e66c063d-4d7a-4b88-aae4-f25c1d1c2b92-960x453r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/9ca255db-89e5-7160-7e83-39539dd0e020.png)


### ２．トリガーの設定
特定の要素をクリックしたときのトリガーはいくつか方法があります。難易度やコード修正の有無があるので状況によって使い分けてください。

#### ①GTMで要素を指定して発火した要素を特定する方法
LPや小さいサイト、変更されることが少ないサイトにはおすすめです。
コード修正は不要です。ただしコードが書き換わったときに取得できなくなる可能性があります。

トリガー名は自由。今回は`Click_要素指定`とします。
トリガーのタイプは`クリック-すべての要素`にします。
このトリガーの発生場所は`一部のクリック`を選択します。（一部のクリックではクリックが発火する条件を指定できる）
ここで組み込み変数の`Click Element`が`html > body > button, html > body > button *`と`CSSセレクタに一致する`と指定します。
（設定するときは`Click Element``CSSセレクタに一致する``html > body > button, html > body > button *`の順番）
![34740af3-29d8-4756-ab1d-e7e3274118cc-960x310r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/99e7fde7-ff4e-da62-b73b-348868bce737.png)
`html > body > button, html > body > button *`はCSSセレクタを指定しています。
前半の`html > body > button`はbutton要素（青の部分）を意味しており、後半の`html > body > button *`はbuttonタグの子要素すべて（赤と緑の部分）を意味しています。
今回の例ではbutton要素にclass名を指定していないのでこのような簡易な表記ですが、通常はclass名が設定されているのでclass名まで指定して要素を特定します。
例えばbuttonタグに`detail-button`というクラス名が設定されている場合は`html > body > button.ditail-button`になります。
![9b2a3fa0-82fa-4417-825d-9736f706fedf-960x307r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/b2315c97-90dd-9cfa-7fc0-2ccc5f8d62e6.png)


#### ②要素にdata属性やid属性を付与して発火した要素を特定する方法
基本的には①と同様ですが、要素の特定をid属性やdata属性にしたパターンです。
要素の特定をGTM側で指定しないので管理がしやすいですが、コードの修正が必要となります。
基本的な考え方としてclassはCSS、idはJavaScriptやページ内リンクに使用すべきかと思いますので
GTMで使う場合はdata属性に`data-gtm`という属性を付与する方法が一番適切だと思います。（もちろんidでも出来なくない）
下記はbutton要素に`data-gtm="detail-button"`を付与したときの例です。
```html
<button onclick="handleClick()" data-gtm="detail-button">
  <span>詳細を見る</span>
  <img src="icon.svg" alt="右矢印" />
</button>
```

トリガー名は自由。今回は`Click_data属性`とします。
トリガーのタイプは`クリック-すべての要素`にします。
このトリガーの発生場所は`一部のクリック`を選択します。（一部のクリックではクリックが発火する条件を指定できる）
組み込み変数の`Click Element`が`*[data-gtm="detail-button"], *[data-gtm="detail-button"] *`と`CSSセレクタに一致する`と指定します。
（設定するときは`Click Element``CSSセレクタに一致する``*[data-gtm="detail-button"], *[data-gtm="detail-button"] *`の順番）
![7683dc0a-5da5-4d78-9ef7-7dfe20a1afb4-960x312r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/f999ad26-3d74-fa48-320b-0bec4b401cfb.png)


`*[data-gtm="detail-button"], *[data-gtm="detail-button"] *`はCSSセレクタを指定しています。
前半の`*[data-gtm="detail-button"]`はbutton要素（青の部分）を意味しており、後半の`*[data-gtm="detail-button"] *`はbuttonタグの子要素すべて（赤と緑の部分）を意味しています。
![9b2a3fa0-82fa-4417-825d-9736f706fedf-960x307r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/b2315c97-90dd-9cfa-7fc0-2ccc5f8d62e6.png)


#### ③要素のクリックイベントにデータレイヤーを追加して発火する方法
[データレイヤー](https://support.google.com/tagmanager/answer/6164391?hl=ja)はJavaScriptオブジェクトでウェブサイトから変数を設定したり、トリガーを有効にしたりできます。
ReactやVueなどのSPAで使用する場合やアプリ側が持つユーザー情報をGTMに飛ばしたい場合におすすめです。
たくさんのコード修正が必要になりますが、シンプルで理解しやすいです。

コードを以下のように修正します。
今回の例ではHTMLで記載していますが、ReactやVueなどでも同じような処理を追加することで可能です。
```html
<button onclick="handleClick()">
  <span>詳細を見る</span>
  <img src="icon.svg" alt="右矢印" />
</button>

<script>
  window.dataLayer = window.dataLayer || []
  const handleClick = () => {
    dataLayer.push({
      event: 'Click_button',
      event_category: 'button',
      event_label: '詳細を見る',
    })
  }
</script>
```

トリガー名は自由。今回は`Click_dataLayer`とします。
トリガーのタイプは`カスタムイベント`にします。
イベント名は上記のコードでdataLayerに追加したeventと同様に`Click_button`を指定します。（必ず一致させてください）
![c95f88cc-6d96-4d42-99a6-8dacb4581e02-960x334r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/5d7a5fc2-e3a8-96f8-a250-3225f4c50d2f.png)


dataLayerに追加した変数の値を取得するにはGTM側で変数を指定します。
「ユーザー定義変数」を新規で作成します。
変数のタイプは`データレイヤーの変数`にします。
データレイヤーの変数名は上記のコードでdataLayerに追加した取得したい変数のkeyを指定します。今回は`event_label`を取得します。
データレイヤーのバージョンは`バージョン2`を選択します。
![7c5abc27-6841-4600-8c96-07d1ba73be33-960x381r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/ffebfa90-9f7b-7244-d174-e2f5e98ad191.png)


トリガーの設定が完了すれば特定の要素をクリックしたときにGTMを発火してGA4で取得できるようになっています。
動作確認方法については[こちら](https://qiita.com/alpaca1231/items/30bc6c5e4c649a2b8979#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D)を参考にしてみてください。

https://qiita.com/alpaca1231/items/30bc6c5e4c649a2b8979#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D


## さいごに
今回は特定の要素をクリックしたときの取得方法をまとめてみました。
次回は（があれば）特定の要素が画面上に表示されたときに発火するGTMの設定をしてみようと思います。