WebでのGA4のイベント設定方法

GA4 (Google Analytics 4) のイベントを設定する方法についてまとめます。

## イベント送信の流れ
イベント発火 -> GTM (Google Tag Manager) -> GA4という流れでイベントが送信されます。

## GTMのスニペット取得・挿入
1. GTMを開きます。
2. `管理` をクリックします。<br>![91a50c2e-efee-a3f8-998f-b53f38743702 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/21b31a4b-2204-a934-2089-6f954e6dab21.png)
1. `Google タグ マネージャーをインストール` をクリックします。<br>![d28c7082-89f9-b35b-8362-4f52915ebf1a (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/a10d399e-8249-ae43-a6ca-bb76a0276a59.png)
1. 記載されている手順に従って、HTML内にGTMのスニペットを挿入します。

## 実装
以下のコードをHTMLの `head` 内にあるGTMのスニペットより前に記述することで、イベントを発火させる処理を実装します。

```html
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    "イベント名": イベントの値,
    ...
  });
</script>
```

## GTM設定
### 変数設定
発火させるイベントを設定します。

1. 左ペインの `変数` をクリックします。<br>![14298dc0-9c23-a2c4-d22a-7a2de50c508b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/e73c44d2-1294-0236-32af-197a15d633ce.png)
2. `ユーザー定義変数` セクションの `新規` をクリックします。 `ユーザー定義変数` セクションは `組み込み変数` セクションの下にあります。<br>![a72fa717-1c19-26bd-c872-8f8fe39feb8b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/499ceccf-7a90-eb1e-5837-e2b8be7f4164.png)
3. `変数の設定` セクションをクリックします。<br>![a9b5cdff-bcb8-3f03-1754-4b5bd39c6695.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/78d412c9-2bfd-a911-501f-9ea13538729b.png)
4. `変数タイプを選択` ペインの `ページ変数` セクション内にある `データレイヤーの変数` をクリックします。<br>![702abf11-b8df-b05b-6190-dba84f588211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/89f3156a-ce7a-e52a-6e84-5fd38248d34f.png)
5. 以下の項目を入力し、 `保存` ボタンをクリックします。
    * 変数名 (左上): 任意
    * データレイヤーの変数名: 実装で指定したイベント名
   ![090220ed-e92e-bd7a-0825-7c3a41f233e7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/bdef9590-0225-bf52-8bfe-0d23b1872252.png)

### タグ設定
GA4への送信設定を行います。タグはイベントを発火させる操作単位で設定します。

1. 左ペインの `タグ` をクリックします。<br>![4691b290-b844-5d2e-e88c-86ebb5c2315c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/60a31548-621f-d187-da65-0d5177dc52aa.png)

2. `タグ` セクションの `新規` をクリックします。<br>![b7dd4439-cbfa-e992-f047-bd8f70fb7723.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/6f5adc20-23a9-a864-309a-3088e0d5ed19.png)
3. タグ名を入力します。<br>![cba9c68e-3950-846f-fd05-02fa4a3e29ad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/2d2b87ec-d74c-e13a-85d0-b47d4d8454ae.png)
4. `タグの設定` セクションをクリックします。<br>![a1bc45a9-d37f-9bee-0c66-d73c78a53c8b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/f62f6261-c126-1562-85a3-dce1885d35f1.png)
5. `タグタイプを選択` ペインの `おすすめ` セクション内にある `Google アナリティクス: GA4 イベント` をクリックします。<br>![5ebf2d06-6cc5-6717-ae92-ae9ab9693c6e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/94df379b-8891-a1b5-f052-f406ec6c93b5.png)
6. `タグの設定` セクションの `設定タグ` を設定します。<br>![4a27225f-7c1b-9c0d-78b8-e957f344a5aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/66eb9036-a2b7-3853-f89f-265652b7ff74.png)
7. 以下を設定します。
   * イベント名: 任意の英数字
   * イベント パラメータ: 対象の操作で送信する変数
      * パラメータ名: 変数設定で設定した変数名
      * 値: <img width="46" alt="fee7ea4a-2ff7-c122-5703-d170d997eacc.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/2352ed31-49d1-040d-d847-1a802363270a.png">をクリックし、設定する変数をクリック
   ![7222dc1e-30c5-c06c-8280-b0eef1c12430.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/23f5019c-bfaf-f7dc-8c45-50957e964b14.png)
1. `トリガー` セクションをクリックし、GA4に送信する条件を設定します。<br>![92fe121d-191e-b110-7b8c-87317a31a6a2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/cde8e262-459b-4ab2-7e61-f8d0706b146b.png)
2. `保存` をクリックします。<br>![eb40e13d-5ea0-dc48-eb8c-fe34ede18916.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/ea5dec11-ca4a-635c-2cdf-39fb372d5101.png)


## GA4設定
### コンバージョン設定
イベントを発火させる操作 (GTMのタグ) 単位で設定します。
コンバージョンとして設定しない場合はスキップしてください。

1. 左ペインの `管理` をクリックします。<br>![476d1045-6feb-172e-1e7e-7b2d299397fd (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/73543418-7cf8-0a96-b808-628f67238e35.png)
2. `プロパティ` セクションの `イベント` をクリックします。<br>![7fa332b7-190b-e3e5-1d15-90a8a27caa6c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/9ed2b9f3-5f74-b958-ed41-b6b259d33bbc.png)
2. 対象の操作の `コンバージョンとしてマークを付ける` をオンにします。<br>![83c72b3f-a391-d6ee-10da-7935e849ff94.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/494986ac-e892-c722-f711-205a7eba94c0.png)

### カスタムディメンション設定
発火させるイベント (GTMの変数) 単位で設定します。

1. 左ペインの `管理` をクリックします。<br>![476d1045-6feb-172e-1e7e-7b2d299397fd (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/73543418-7cf8-0a96-b808-628f67238e35.png)
2. `プロパティ` セクションの `カスタム定義` をクリックします。<br>![a520984c-097f-e10d-f759-26df639a6428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/ef5269da-1a75-8672-23be-fd4f65ba05c0.png)
3. `カスタム ディメンションを作成` をクリックします。<br>![2eafa7d1-eaf5-7601-d46d-67179597cbf3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/9b7a9adb-e0dc-b44b-749c-0b1c7578a30a.png)
4. 以下を設定し `保存` をクリックします。
   * ディメンション名: 任意
   * 範囲: ユーザー属性 (性別・年齢等) をイベントとして取得する場合は `ユーザー`、それ以外の場合は `イベント` を選択
   * 説明: 任意
   * イベント パラメータ: GTMの変数名
   ![c4b581ab-8046-f1a3-d055-b85fe37fa00c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/074ee2b3-58e9-9f33-ae0d-46c1f23e7c98.png)

## 動作確認
1. Chromeに拡張機能[Tag Assistant Companion](https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm)をインストールします。
2. GTMの `プレビュー` をクリックします。<br>![538f92ae-40bd-ca8c-880d-0e1297f22dae.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/65c9eb64-5f47-0c85-8cd2-9a3641d0ea30.png)
3. `Your website's URL` に動作確認環境のURLを入力し `Connect` をクリックします。<br>![b8ddadf8-cabf-4e6a-e23d-01b1c92d908e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/e8e066eb-6d15-b4f6-e209-2896fe4b3737.png)
4. 別タブで開いたサイトでイベントを発火させる操作を行います。
5. 手順3で開いたタブを開き、左ペインのイベントを発火させたページをクリックします。<br>![6a4e0a27-3a7e-f654-9a26-5669d02f9f6b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/fe0826c7-d228-36f8-c292-d7eafb7e5353.png)
6. `Tags Fired` に対象のGTMのタグが表示されていることを確認し、そのタグをクリックします。ここに表示されていない場合はイベントが発火していないので実装や設定を見直してください。<br>![2e045fe4-67ef-21b4-c817-8c66379f10f6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/71ad787a-ab64-dc79-03d2-3a7af50cc693.png)
1. `Messages Where This Tag Fired` の `~ Container Loaded` をクリックします。 <br>![cfbba28a-37ba-ad2f-a508-29350d3a0808.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/d5a5e815-9b3e-3888-f795-f8de3b166abd.png)
1. `Properties` の `ユーザー プロパティ` に意図通りのイベントの値が入っていることを確認します。<br>![890a257d-25ca-6ef0-0452-efec8760c862.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/412449ce-7a0f-3e68-e0b2-4a7fbac5a941.png)
1. (翌日以降) GA4のレポート・探索で送信されたイベントが見れることを確認します。

## GTM設定公開
イベント設定を行った場合は実装のリリースの他にGTM設定の公開が必要になります。

1. `公開` をクリックします。<br>![489d8a70-a9ee-3728-7b72-7f40dcf94360.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/8914b067-17ec-89e2-c6a3-0d50e7e9885d.png)
2. `バージョン名` や `バージョンの説明` を入力し `公開` をクリックします。<br>![4a538789-974e-257c-8986-2f113b8d9852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52291/eada42fd-bbb7-add8-d397-1a3e1d40077a.png)