はじめに
ウェブサイトやアプリケーションの分析において、Google Analytics 4(GA4)とGoogle Tag Manager(GTM)は欠かせないツールになっています。
本記事では、GA4 と GTM の基本的な単語についてと具体的な連携方法について、自身のアウトプットを兼ねてご紹介できればと思います。
もしどなたかの GA4 と GTM について理解を促進する一助になれば幸いです
目次
- GA4(Google Analytics 4)とは
- GTM(Google Tag Manager)とは
- GA4 と GTM の連携について
- デバッグ方法
- まとめ
GA4(Google Analytics 4)とは
GA4 の概要
GA4は、Googleが提供する最新のウェブ解析プラットフォームです。
従来の Universal Analytics(UA)の後継として、2020 年 10 月に正式リリースされました。
GA4 の主な特徴
全ての行動をイベントと捉える
GA4は、単なるアクセス解析ツールから大きく進化しました。
今の時代のユーザーの複雑な動きをしっかり捉えるための機能が満載です。
これまでのアクセス解析は「どのページが見られたか(ページビュー)」が中心でした。
しかし GA4 では、ユーザーのあらゆる行動を「イベント」という単位で記録します。
たとえば、
- ページの閲覧
- page_view イベント
- ページを90%までスクロール
- scroll イベント
- 外部リンクをクリック
- click イベント
- サイト内検索
- view_search_results イベント
- 資料(PDF)をダウンロード
- file_download イベント
ある商品ページを訪れたユーザーが、ただ見ただけなのか、しっかり下までスクロールして詳細を読み、紹介動画まで再生したのか、といった行動の「深さ」が分かります。
これにより、
「このページはよく読まれているから、もっと情報を充実させよう」
「動画がよく見られているから、他のページにも動画を設置しよう」
といった、より具体的な改善策を立てやすくなります。
クロスプラットフォーム分析
今や、スマホアプリで商品を下見して、後でパソコンから購入する、といった行動は当たり前ですよね。
GA4 は、そんな Web サイトとアプリを横断したユーザーの動きを、一人のユーザーとして追跡できます。
従来バラバラに計測されていた行動が一つにつながることで、
「アプリの通知がきっかけで、最終的にPCで購入に至った」
というような、本当の購入までの道のり(カスタマージャーニー)が見えるようになります。
広告の効果測定の精度も格段に上がり、どこに予算を投じるべきかの判断がしやすくなります。
機械学習による予測機能
GA4 には Google の強力な AI が搭載されており、集まったデータから未来のユーザー行動を予測したり、データの中から重要な変化を自動で見つけてくれたりします。
私もこの機能は初めて知りました。笑
例えば、
「今後7日以内に購入する可能性が高いユーザー」
「今後7日以内にサイトに来なくなる(離脱する)可能性が高いユーザー」
といったグループ(オーディエンス)を自動で作成してくれたりします。
これにより、
購入しそうなユーザーには「あと一押し」の広告を配信したり、離脱しそうなユーザーには特別なクーポンを届けたりと、先回りしたアプローチが可能になります。
また、データの異変にいち早く気づけるため、問題の早期解決や、思わぬビジネスチャンスを逃さずに済みます。
データ分析の専門家でなくても、ビジネスに役立つヒントを得やすくなるのが大きな強みです。
GTM(Google Tag Manager)とは
GTM の概要
GTM は、ウェブサイトやモバイルアプリに様々なタグ(トラッキングコードやスクリプト)を管理・配信するためのタグ管理システムです。
開発者の手を借りずに、誰もが自由にタグを追加・更新できます。
GTM の主な構成要素
タグ(Tags)
- 実行されるコードやトラッキングピクセル
- GA4、Google Ads、Facebook Pixelなど
トリガー(Triggers)
- タグを発火させる条件
- ページビュー、クリック、フォーム送信など
変数(Variables)
- タグやトリガーで使用する動的な値
- URL、ページタイトル、カスタム変数など
データレイヤー(Data Layer)
- ウェブサイトと GTM の間でデータをやり取りする仕組み
- 構造化されたデータの受け渡しが可能
GTMを使用するメリット
コード変更なしでタグを管理
これがGTM最大のメリットだと考えています。
通常、新しいタグなどをサイトに入れるには、開発者に依頼してサイトの HTML などを直接編集してもらう必要があ流と思います。
ただ、GTM は、誰もが必要に応じて、新しい広告の計測タグなどを設定することができ、施策等の走り出しをより素早く行うことができます。
※ もちろん、HTML を直接編集しないといけない場合もあります
プレビューモードでの事前検証
後述のデバックセクションでも記載しますが、「設定したタグが、本当に狙い通りに動くのか?」を一般公開する前に、自分だけに表示される「プレビューモード」で動作をテストできます。
例えば、
「商品の購入完了ページが表示されたら、広告用の成果タグを発動させたい」という設定をしたとします。
そこでプレビューモードを使用することで、
- 自分のパソコンでプレビューモードを開始し、実際にサイトで商品をカートに入れ、購入テストを行う
- 「購入完了」の瞬間に、設定した成果タグが発火されるのをリアルタイムで確認できる
このように、一般のユーザーに影響を与えることなく、設定が正しいかを事前に確認できます。
GA4 と GTM の連携について
ざっくりと連携方法についてイメージをつけてもらうために、簡単な連携手順を記載します。
▼ 今回の手順でゴールとすること
GTM と GA4 の連携には様々な設定がありますが、今回は連携のイメージを掴んでいただくことを最優先とし、特定の「ボタンクリック」を計測する手順に絞って解説します。
(サイト全体のアクセスを計測する基本設定やイベント名の設定などは、省いておりますのでご了承ください)
【Step 1】GA4で「測定ID」を取得する
まず、GTM に設定するために必要な測定 ID を GA4 から取得します。
- GA4 の管理画面にログイン
- 画面左下の歯車アイコン [管理] をクリック
- プロパティ列にある [データストリーム] を選択し、対象のウェブサイトのストリームをクリック
- 画面右上に表示される
G-
から始まる文字列(これが測定 ID)の横にあるコピーアイコンをクリックして、クリップボードにコピーしておく
【Step 2】トリガーとタグを作成する
次に、GTM 側で GA4 にデータを送信するための基本的なトリガーとタグを作成します。
- GTM の左メニューから [トリガー] を選択し、 [新規] をクリック
- 「トリガーの設定」エリアをクリックし、トリガータイプとして [クリック - すべての要素] を選択
- 「このトリガーの発生場所」で [一部のクリック] を選択
-
{{Click Element}}
の完全一致を選択をして、クリックトリガーさせたい要素のクラス名などを入力する - 最後に、タグの左上にある「無題のタグ」をクリックし、分かりやすい名前(例:
Google タグ - GA4基本設定
)を付けて、右上の [保存] をクリック - GTMの左メニューから [タグ] を選択し、 [新規] をクリック
- 「タグの設定」エリアをクリックし、 [Google アナリティクス: GA4イベント] を選択
- [測定ID] の入力欄に、Step 1 でコピーした GA4 の測定 ID(
G-XXXXXXXXXX
)を貼り付ける - イベント名] を入力(これがGA4のレポートに表示される名前になります)
- 次に、「トリガー」エリアをクリックし、先ほど作成したトリガーを選択
- タグに分かりやすい名前を付けて、[保存] をクリック
【Step 3】プレビューモードで動作を確認する
設定が正しく動作するかを、サイトに公開する前に確認します。
- GTM 画面右上の [プレビュー] ボタンをクリック
- 新しいタブで「Tag Assistant」が起動
- 対象サイトのURLを入力し、[Connect] をクリック
- サイトが別のタブで開き、右下に「Tag Assistant Connected」という表示が出る
- 該当の要素をクリックする
- Tag Assistant の画面に戻り、左側のサマリーに Click というイベントが発生していることを確認
- その Click イベントを選択した状態で、「Tags Fired」セクションに、Step 3 で作成したイベントタグ¥が表示されていれば成功
- 最終確認として、GA4の [レポート] > [リアルタイム] を開き、「イベント数(イベント名別)」のカードに、設定したイベント名が表示されることを確認(反映には数分かかることがあります)
【Step 5】設定を公開する
すべての確認が完了したら、GTM のワークスペースに戻り、画面右上の [公開] ボタンをクリックして変更を本番環境に適用します。
これで、サイト上の特定のボタンクリックを GA4 で計測できるようになりました。
デバッグ方法
上記で触れてはいたのですが、改めて「本当に正しく動いている?」「データが送られていないみたい…」といった問題を回避するためのデバック方法を最後にご紹介しようと思います。
GTM のプレビューモード
これは、GTM 側の設定が正しいかを確認するための、重要なツールです。
GTM が、Web サイトからの信号(イベント)を正しく受け取り、各タグに命令を出せているかをチェックできます。
プレビューモードの確認できるポイント
デバッグ画面では、以下のような「GTM の内部情報」を確認にできます。
タグの発火状況はどうか?
タグがそもそも発火したのかしていないのかという、設定内容が正しいかどうかの原因特定を行うことができます。
なぜトリガーは反応した(しなかった)のか?
発火しなかったタグを選択すると、そのトリガーの条件のうち、どれが満たされ、どれが満たされなかったのかが表示されます。
「Click ID
の条件は合ったけど、Click URL
の条件が合わなかった」といった原因究明が可能です。
変数の値は何だったのか?
Variables
タブを開くと、クリックした瞬間の Click Text
(ボタンの文言)や Page URL
(ページのURL)など、GTMが認識しているすべての変数の値を確認できます。
「思っていた値と違う値が GTM に渡っていた」といった発見があります。
データレイヤーの内容は?
Data Layer
タブでは、WebサイトからGTMに送られている生のデータ(EC サイトの商品価格や I Dなど)を直接確認できます。
これは、GTM が受け取る情報の「大元」まで確認することができます。
GA4 DebugView
GTM から、無事に GA4 に届いているかを確認します。
それを確認できるのが「DebugView」です。
GTM で公開したばかりのクリックイベントだと、GA4 のレポートに反映されるまで 1~2 時間ほどかかる場合があります。
それだと、作業効率も悪いので、リアルタイムに GTM のプレビューモードと連携してイベントの発火状況を確認できます。
DebugViewの使い方
GTM のプレビューモードを起動してサイトを操作すると、GA4 側で自動的にデバッグモードが有効になり、DebugView にデータが表示されます。
そこで下記の手順で DebugView を立ち上げます。
- 画面左下の歯車アイコン [管理] をクリック
- [データ表示 - DebugView] をクリック
たったこれだけです。
これを設定することで、下記を確認することができます。
イベントはリアルタイムで届いているか?
サイトでボタンをクリックすると、数秒後に DebugView のタイムラインに、設定したイベント名が青いアイコンで表示されます。
これが表示されれば、GTM と GA4 間の通信は成功しています。
送ったパラメータの中身は正しいか?
タイムライン上のイベント名をクリックすると、そのイベントと一緒に送信されたパラメータの一覧とその値を確認できます。
「送ったつもりの値が空になっている」などの問題を発見できます。
エラーは発生していないか?
もしイベントがGA4のルール(イベント名の文字数制限など)に違反している場合、タイムライン上に赤いアイコンでエラーが表示されます。
クリックすればエラー内容の詳細がわかるため、修正のヒントになります。
まとめ
GA4 と GTM を組み合わせることで、今まで知ることのできなかった顧客の動きを知ることができ、新しい施策検討へとつなげることができます。
ぜひ今後も GA4 と GTM の仕組みを理解して、さらなる活用方法を見出していきたいと思います。
ここまで読んでくださり、ありがとうございました!