25
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-10-28

はじめに

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

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

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

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

GA4の設定

アカウントとプロパティの作成がまだの方はこちらの記事を参考に設定してください。

トラッキングIDを確認する

「設定」>「管理」>「アカウント」>「プロパティ」>「データストリーム」>「測定ID」をクリックしてコピー

8ce67e71-5f6e-40a9-be38-e8477d5c2f38.png
39dea265-788d-44d0-9fbf-bfa2795e5d27.png
bb2faf0f-a79b-4d53-ae6d-a6c2a9be907b.png

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

GTMの設定

初期設定

1.アカウント作成

アカウント名は自由。国は日本にしておく。
a0ace044-df7b-4cab-9b65-c370624c78aa.png

2.コンテナの設定

コンテナ名は自由。今回はウェブを選択する。
aaaaab2e-65e6-45f6-ba17-822e693f7570.png

3.トラッキングコードをHTMLに埋め込む

指示に従って<head>タグと<body>タグにコードを埋め込む。
454d9dca-ff8b-4f5b-b717-2763289555ca.png

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

ワークスペースの解説

サマリー

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

タグ

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

トリガー

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

変数

GTMで使うことができる様々な変数を指定できるもの。デフォルトで使用できる「組み込み変数」だけでなく「ユーザー定義変数」で独自の変数を作成することもできる。
デフォルトで表示されていない「組み込み変数」は設定を開いてチェックボックスを有効にすることで使用できる。
4547ced0-0aac-41c0-921f-d2995b40c0bd.png
7942cf32-ffe0-4aed-901e-fdd114f71d3b.png

フォルダ

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

テンプレート

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

ページビューの設定方法

1.タグの設定

最初にGA4に飛ばすための設定タグを作成する。
「タグ」>「新規」を押下して新しくタグを作成する。
タグ名は自由。今回はGA4_ページビューとした。
測定IDは上記で確認したトラッキングIDを入力する。
e76a92f5-2efc-44ca-b88c-6d1baaefcca0-960x401r.png

2.トリガーの設定

トリガーはAll Pagesを選択。
All Pagesはすべてのページで取得できるデフォルトのトリガーです。
e598f6b8-c844-4568-a52e-9f6101545622-960x325r.png

設定が完了したら保存する。
b7b8418f-e7b9-4fa6-8b5e-3bd4a0e43290-960x376r.png

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

動作確認

GTMの動作確認

GTMの画面右上にある「プレビュー」をクリックすると別タブでプレビュー画面が表示される。
4708a387-9728-4cd3-b82b-2d5cea049096.png

「Your website's URL」に動作確認したいURLを入力する。
ここでlocalhostを指定することもできます。
「Connect」をクリックすると入力したURLでページが表示されます。
7ffd03c6-4dc9-4320-8a44-182dc5572471-960x781r.png

表示されたページ内で実行されたことは実際にタグが発火してGA4に送信されます。
作成したGA4_ページビューですが、「Tags Fired」に表示されており、実際に発火している様子がわかります。
1e24614a-52a2-4c17-911f-66ff0f000245.png

GA4の動作確認(リアルタイム)

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

GA4の画面左端のメニューから「レポート」>「リアルタイム」をクリックする。
66f442e4-766b-4eb4-9f43-0dba2e3eeabd.png

1分ごとに更新される画面でページビューやイベントの発火を確認することができる。
68b4147c-2d84-48d0-8898-4bfb9087cdaa.png

さいごに

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

25
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?