EC-CUBEでGTMとGA4を導入する方法

こんにちは！[株式会社Refine](https://www.re-fine.jp/)の米田です。
本日は、マーケティングの観点からGTMとGA4の設定方法を解説しようと思います。
最後におまけでカスタムイベントの設定方法もご紹介しています！

# はじめに
Googleが提供している最新版ウェブアナリティクスのことをGoogle Analytics 4(通称: GA4)といいます。GA4は、以前のバージョンであるUniversal Analytics(通称: UA)とは異なり、新しいアプローチや機能を導入しています。

本記事では、**非エンジニアでもできる**EC-CUBEでGTM経由でGA4を導入する方法を紹介していきます。
私自身、コードは一切書けませんが設定できたのできっと大丈夫です！！

# GTMを導入する
GA4設定するにあたって、まずはGTMを導入します。

### 1. GTMのアカウントを発行する
GTMアカウント発行後、Googleタグマネージャーをインストールするためのコードを確認してください。
![Screenshot 2023-12-07 at 19.06.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/cc6c3458-ea67-09f0-57e7-734fad19ecb0.png)

### 2. ブロックを作成する
次に、EC-CUBEの管理画面へ行き、ブロックを作成しレイアウト管理から該当箇所に埋めます。

まずは、「コンテンツ管理 -> ブロック管理 -> 新規作成」より、先ほど確認した2種類のコードをそれぞれブロック作成し、貼り付けます。

↓こんな感じ
![Screenshot 2023-12-07 at 19.12.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/af57e997-c332-bc3e-9659-c763385bb423.png)

![Screenshot 2023-12-07 at 19.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/fe76302f-a8d2-c6ff-a2e4-5a00b33fef75.png)

### 3. ブロックを配置する
作成したブロックをそれぞれの位置に配置します。
「コンテンツ管理 -> レイアウト管理」より、全てのレイアウトの<head>部分と<body>部分に作成したブロックを配置します。

↓こんな感じ
![Screenshot 2023-12-07 at 19.13.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/9f1903a2-b9f4-e120-972a-b52fd3067929.png)

### 4. GTMのプレビューで確認する
これでGTMの導入は終わりです！
最後に、きちんとGTMが導入されているかプレビューで確認しましょう。

GTMの管理画面右上「プレビュー」から接続を確認してください。
![Screenshot 2023-12-07 at 19.14.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/fd110aab-bda0-67c6-aaf1-0791bb47e3cd.png)

プレビュー機能でGTMの接続が確認できたら導入は完了です！！
![Screenshot 2023-12-07 at 19.15.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/7a968e41-f409-9494-3008-b0253f6ed904.png)

# GA4を導入する
GTMが導入できたら、GA4を導入してみましょう。
GA4の導入はGTM経由で行います。

### 1. GA4のプロパティを発行する
GA4のプロパティを発行したら、「管理 -> プロパティ設定 -> データの収集と修正 -> データストリーム」より、測定IDを確認します。(G-から始まるIDです)

![Screenshot 2023-12-07 at 19.17.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/68126ec8-7691-d784-b6bc-25a59d956c6d.png)

### 2. GTMでGA4を導入する
測定IDを確認したら、GA4を導入していきましょう！
まずは、GTMの「タグ -> 新規」を押下し、タグの設定を行います。

タグの種類には「Googleタグ」を選択し、タグIDには先ほど確認した測定IDを入力します。
![Screenshot 2023-12-07 at 19.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/14b9419b-aa6e-5070-b8fb-7a1953ddcbd5.png)

次に、トリガーの設定を行います。
これはタグの発火条件なので「Initialization - All Pages」を選択します。
![Screenshot 2023-12-08 at 10.14.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/f36d7c32-0e4e-ab44-05ff-19f6a026c6f9.png)

これでGA4を導入するためのタグの設定は完了です！

### 3. GTMのプレビューで確認する
最後に、先ほどと同様にプレビューで確認して公開しましょう！
プレビューで問題なく発火を確認したら、画面右上の「公開」ボタンより、公開してください。

以上でGA4の導入は完了です！！
![Screenshot 2023-12-08 at 10.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/0c98e985-e621-d602-58d2-2ba4b9117539.png)

# おまけ：GA4のカスタムイベントを設定する
GA4の接続をGTMで行った場合、GTMでカスタムイベントを行った方が管理しやすくなります。
今回は、「**会員登録完了**」のカスタムイベントを作成します！

### 1. 新規タグを作成する
GTMの管理画面から、新規タグを作成します。
タグの種類には「GA4イベント」を選択し、タグIDには先ほど確認した測定IDを入力します。イベント名は「会員登録」にしました。
![Screenshot 2023-12-08 at 10.19.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/70ba1b4a-ab70-22be-32d2-4ad332b03cb1.png)

### 2. トリガーを設定する
次にトリガーの設定をします。
トリガーの選択画面右上の「+」ボタンを押下し、トリガーを設定していきます。

今回は、トリガーのタイプを「ページビュー」にし、トリガーの発生場所を「一部のページビュー」にします。URLが /entry/complete/ の時に発火するように設定します。

↓こんな感じ
![Screenshot 2023-12-08 at 10.20.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/e35e72d6-4c4d-4352-4e54-b00ed33615f4.png)

設定できたらトリガーを保存して、タグも保存しておきましょう。

### 3. GTMのプレビューで確認する
最後にプレビューで正しく設定できているか確認しましょう。
タグの発火を確認できたら公開して完了です！！
![Screenshot 2023-12-08 at 10.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620087/fdafd326-e979-3a0f-b81b-4b066ba025a0.png)

# 最後に
本記事では、非エンジニアでもできるGTM・GA4の導入と、GA4カスタムイベントの作成方法についてご紹介しました。
特に最後にご紹介したカスタムイベントの作成方法は、応用することで自由自在にイベントを作成することができます。
非エンジニアの皆様のご参考になりますと幸いです。

株式会社Refineのブログでは、ECにまつわる流行やマーケティングについて発信しています。もし宜しければご覧ください！

https://www.re-fine.jp/sales-up/