🍼
Google Tag ManagerでGA扱う備忘録
Google Tag Managerってなに！？GAってなに？！
用語整理
GA
Google Analytics
Google Tag Manager(GTM)
GA含む、サイトに分析とかのためのタグ埋め込むときのコードそのものを管理するツール。GTMなしだと、分析ツール導入するたびにプロダクトコードにタグ追加してデプロイしなきゃいけなかったがGTMが導入されているとGTMの管理画面から追加することができるぽい。非エンジニアフレンドリーだよねいいよね
ざっくり手順
スクショとか撮ってもころころ変わりそうなのでざっくりとした手順だけ書く
1. アカウント作成
組織名とかそういうのになりそう
2. コンテナ作成
GAなどのタグを追加していく単位になる認識。ドメイン名とかになりそう。
3. タグを追加
例: 「Google アナリティクス: GA4 設定」を追加する場合
- Google Analytics側でアカウントを作成(説明略)
- GA側で、「管理 > データストリーム」画面から「測定 ID」を取得(G-xxxxみたいなやつ)
- GTM側でタグを追加から「Google アナリティクス: GA4 設定」を選択し、上記の「測定 ID」を設定
- GTM側で”トリガー”を設定。トリガーの条件をもとにタグが発火するイメージ。
- 例: トリガーにページビューを設定する場合(特定のページ閲覧がトリガーになる)
- トリガータイプに「ページビュー」を設定
- 特定のページドメインを設定
- トリガーとタグを関連付け設定する
- GA側で、「管理 > データストリーム > タグ付けの詳細設定 > ドメインの設定」画面から計測する特定のページドメインを設定
上記でタグとタグを発火させるトリガーの設定が完了(GTM側)。タグが発火したあとの計測設定が完了(GA側)。
4. 動作確認
- GTM側で設定をいじると、画面の右上とかに「プレビュー」「公開」というボタンが表示される。公開前にプレビューする場合はプレビュー使う。特定のドメインを指定してプレビューできる。
- プロダクトにデプロイ済みならそれで確認できるはず。
- ローカルで確認したい場合はローカルのhost設定？をいじると擬似的にプレビューできる。やり方は以下。
Nextjsの場合
vi /etc/hosts
# 127.0.0.1 example.jp を追加
npm run dev -- --port 80 # デフォルトだと3000を見ちゃうので80を指定
この状態で example.jp をプレビューをすると宛先はローカルのまま動作確認ができる
何が起きてるか全然わからんけど、データがとれはじめたすげ〜〜
Discussion