【エンジニア向け】GA4 / GTM 完全攻略マニュアル PV編

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

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

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

初回はPV編ということでGTMで取得したPVをGA4で確認してみます。


## GA4の設定
アカウントとプロパティの作成がまだの方は[こちら](https://www.seohacks.net/blog/10560/)の記事を参考に設定してください。

### トラッキングIDを確認する
「設定」＞「管理」＞「アカウント」＞「プロパティ」＞「データストリーム」＞「測定ID」をクリックしてコピー

![8ce67e71-5f6e-40a9-be38-e8477d5c2f38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/fc289ce5-badb-20e0-4135-c895ad81fb4e.png)
![39dea265-788d-44d0-9fbf-bfa2795e5d27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/550574df-7406-d8ef-b79f-949e5d24757d.png)
![bb2faf0f-a79b-4d53-ae6d-a6c2a9be907b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/474da9aa-2f4e-5cb2-9b48-eb6602859ef8.png)

GTMでトラッキングIDを設定することでGA4に送信できるようになります。


## GTMの設定

### 初期設定
#### １．アカウント作成
アカウント名は自由。国は日本にしておく。
![a0ace044-df7b-4cab-9b65-c370624c78aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/009349af-18a7-376a-fba6-13cd508ea0d4.png)

#### ２．コンテナの設定
コンテナ名は自由。今回はウェブを選択する。
![aaaaab2e-65e6-45f6-ba17-822e693f7570.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/cf35ea19-7c5f-74ab-a318-cc9211b2acbd.png)

#### ３．トラッキングコードをHTMLに埋め込む
指示に従って`<head>`タグと`<body>`タグにコードを埋め込む。
![454d9dca-ff8b-4f5b-b717-2763289555ca.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/87aa9295-35a6-5956-15fc-42bab744beed.png)

ここまで出来たらワークスペースに移動してタグ等の設定をする。

### ワークスペースの解説
#### サマリー
現在のワークスペースのバージョンや変更箇所を確認できる。

#### タグ
飛ばす先のGA4と作成したトリガーを設定するもの。タグが発火することでGA4にデータが飛びます。

#### トリガー
ユーザーがどのような操作をしたかを検出する設定をするもの。例えば「ページを開いた」とか「ボタンをクリックした」とか。

#### 変数
GTMで使うことができる様々な変数を指定できるもの。デフォルトで使用できる「組み込み変数」だけでなく「ユーザー定義変数」で独自の変数を作成することもできる。
デフォルトで表示されていない「組み込み変数」は設定を開いてチェックボックスを有効にすることで使用できる。
![4547ced0-0aac-41c0-921f-d2995b40c0bd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/f9a69001-229d-a2de-2e02-49a150769e1b.png)
![7942cf32-ffe0-4aed-901e-fdd114f71d3b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/4162085a-5b2f-98f6-652a-20b691a13f36.png)

#### フォルダ
作成したアイテム(タグ, トリガー 等)を管理できるフォルダを作成できる。あんまり使ったことない。

#### テンプレート
タグや変数をテンプレート化して使うことができる。他の人が作成したテンプレートを検索して使うこともできる。


## ページビューの設定方法

### １．タグの設定
最初にGA4に飛ばすための設定タグを作成する。
「タグ」＞「新規」を押下して新しくタグを作成する。
タグ名は自由。今回は`GA4_ページビュー`とした。
測定IDは上記で確認したトラッキングIDを入力する。
![e76a92f5-2efc-44ca-b88c-6d1baaefcca0-960x401r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/8d2e82d1-337c-eb16-da35-2b5b3592ec45.png)

### ２．トリガーの設定
トリガーは`All Pages`を選択。
`All Pages`はすべてのページで取得できるデフォルトのトリガーです。
![e598f6b8-c844-4568-a52e-9f6101545622-960x325r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/4a86d0aa-04d7-b336-8fcd-76baf0f4d7f9.png)

設定が完了したら保存する。
![b7b8418f-e7b9-4fa6-8b5e-3bd4a0e43290-960x376r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/eb05a038-587c-f5dd-6c69-9ea449d5d381.png)

これでページビューの取得設定は完了です。


## 動作確認

### GTMの動作確認
GTMの画面右上にある「プレビュー」をクリックすると別タブでプレビュー画面が表示される。
![4708a387-9728-4cd3-b82b-2d5cea049096.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/a100aa4f-e801-045e-a20c-8f69f4967ec4.png)

「Your website's URL」に動作確認したいURLを入力する。
ここでlocalhostを指定することもできます。
「Connect」をクリックすると入力したURLでページが表示されます。
![7ffd03c6-4dc9-4320-8a44-182dc5572471-960x781r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/ea74c642-d50e-da6c-27f3-0340ee6e886b.png)

表示されたページ内で実行されたことは実際にタグが発火してGA4に送信されます。
作成した`GA4_ページビュー`ですが、「Tags Fired」に表示されており、実際に発火している様子がわかります。
![1e24614a-52a2-4c17-911f-66ff0f000245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/b7d313a5-bab7-83d9-526e-4984a05de846.png)


### GA4の動作確認（リアルタイム）
GA4はリアルタイム(1分ごと)で更新される表示で動作確認することができます。

GA4の画面左端のメニューから「レポート」＞「リアルタイム」をクリックする。
![66f442e4-766b-4eb4-9f43-0dba2e3eeabd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/9367a0ed-b5a8-9c4c-8ecd-4ae631371fd6.png)


1分ごとに更新される画面でページビューやイベントの発火を確認することができる。
![68b4147c-2d84-48d0-8898-4bfb9087cdaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148979/0e74f139-fd5b-3d9a-e092-a0d804425095.png)


## さいごに
今回は一番簡単なPVの取得方法をまとめてみました。
次回は（があれば）特定のボタンを押したときに発火するGTMの設定をしてみようと思います。