GA4時代のGoogle Tag Manager入門
はじめに
こんにちは。Webディレクターの安藤です。
前回、新しくなったGoogle Analytics 4（以下GA4）の解説をしましたが、GA4ではUAのデータは引き継がれず、カスタムイベントは新しく作り直す必要があります。
GA4におけるカスタムイベントは、Google Tag Manager（以下GTM)から設定します。
そこで今回は、Google Tag ManagerでGA4のカスタムイベント設定手順を解説しようと思います！
Google Tag Managerとは
Google Tag Managerは、「タグ（計測タグや広告タグなど）」を一元管理できるツールの一種で、Googleが無料で提供しています。
Google Tag Managerを使うメリット
GA4もGTMも同じGoogleが提供しているサービスなので、連携がしやすいです。
GTMには「GA4設定」「GA4イベント」のタグがデフォルトで用意されています。
イベントデータを取得するために、従来はhtmlファイルに直接書き込む必要があったのですが、今ではGTMを使えば簡単に設定ができるようになりました。
GA4を使いこなすにはイベントデータを取得することが重要で、その設定がGTMを使えば簡単にできるようになります！
Googleアナリティクス（GA4）を導入するのに必要なもの
GTM経由でGoogleアナリティクス4を導入するには以下２つが必要です。
1）GTMのコンテナタグ
2）Googleアナリティクスのアカウント
GTMの設定手順
GTMのコンテナタグを発行する
Googleタグマネージャ公式サイトから、「無料で利用する」をクリックします。
Googleアカウントをお持ちの方はログイン後、Googleアカウント未作成の方はアカウント作成後、タグマネージャーのホーム画面が表示されます。
ホーム画面右上の「アカウント作成」をクリックします。
①アカウント名は会社名（個人であればサイト名や個人名など）を入力します。
②国はプルダウンの中から日本を選択してください。
③は任意ですが、通常はチェックをつけます。
④コンテナ名にはドメインを入力します。
⑤ターゲットプラットフォームは「ウェブ」を選択します。
⑥①〜⑤までを入力したら「作成」をクリックします。
利用規約のウィンドウが開かれたら、左下の「GDPRで必須となるデータ処理規約にも同意します」にチェックをつけ、右上の「はい」をクリックします。
Google Tag Managerのタグが発行されます。
赤いバー部分があなたのGTMのIDになります。
①と②をコピーします。
①はWebサイトの</head>前に貼り付けます。
②はWebサイトの<body>直後に貼り付けます。
GA4と連携する
まずはタグマネージャーでトリガーを作成します。
左メニューの「トリガー」をクリックします。
トリガー画面に切り替わったら、右上の「新規」をクリックします。
①赤枠の「トリガーのタイプを選択して設定を開始」をクリックします。
②トリガーのタイプから「ページビュー」の「初期化」を選択します。
右上の保存をクリックします。
任意のトリガー名をつけて保存をクリックします。ここでは、「GA4初期化トリガー」と命名しました。
続いて、タグマネージャーでGA4の計測タグを設定します。
その前に、Googleアナリティクスの測定IDを控えておく必要があるので、一旦別タブでGoogleアナリティクスを開きます。
GA4に切り替え前の場合、画面上部に表示される切り替え案内から「開始」をクリックし、切り替えを進めます。
GA4に切り替えた後、左メニューの「管理」＞プロパティの「データストリーム」＞該当サイトをクリックします。
すると、G-で始まる測定IDが表示されるので、右のボタンをコピーボタンをクリックして測定IDをコピーしておきます。
そしてGoogle Tag Managerのタブに戻ります。
GTMとGA4を連携する
左メニューの「タグ」をクリックします。
右上の「新規」をクリックして、タグの新規作成を行います。
①画面が切り替わったら、赤枠エリアの「タグタイプを選択して設定を開始」をクリックします。
②「Googleアナリティクス：GA4設定」を選択します。
測定IDに、先程控えておいたGoogleアナリティクスの測定IDを貼り付けます。
入力したら、少し下にスクロールして、赤枠エリアのトリガーをクリックします。
画面が切り替わったら、先程命名したトリガーをクリックします。ここではGA4初期化トリガーです。
設定が完了したら、「保存」をクリックします。
タグ名の変更ウィンドウが表示されます。あらかじめ「Googleアナリティクス GA4 設定」という名前がつけられているので、そのままで結構です。よければ「保存」をクリックします。
これで設定は完了です。
最後にタグが発火されているか確認をします。
①左メニューの「サマリー」をクリックして、サマリー画面にもどります。
②右上の「公開」をクリックします。この際バージョン名をつけるウィンドウが表示されます。バージョン名には年月日-数字（例：2022-09-26-01）など、わかりやすい名前をつけましょう。説明も簡単に変更内容を記載します。
③公開したら、となりの「プレビュー」ボタンをクリックします。すると、別タブでGoogle Tag Assistantの画面が表示されます。
赤枠にWebサイトのURLを記載し、「Connect」ボタンをクリックします。
すると別ウィンドウで、Webサイトが表示されます。
右下にウィンドウが表示されるので、「Finish」をクリックしてウィンドウを閉じます。
「Googleアナリティクス GA4 設定」の表示があれば発火が有効になっています。
これで連携は完了です！
よくある設定：スクロール率の計測
続いて、よくある設定として、スクロール率の計測の設定方法について解説していきます。
GA4の拡張計測機能では、90%到達地点のみ「スクロール数」としてカウントされます。
しかし、実際は90%までスクロールする前に離脱するケースのほうが多いです。
そのため、スクロール率は0%～100%までの間を一定間隔で計測しておいた方が、有意義にデータを取得できます。
左メニューの「タグ」をクリックし、タグ画面に切り替わったら、右上の新規をクリックします。
①赤枠エリアの「タグタイプを選択して設定を開始」をクリックします。
②タグタイプ選択から、「Googleアナリティクス：GA4イベント」をクリックします。
①設定タグは、先程GA4連携で設定したタグ「GoogleアナリティクスGA4設定」を選択します。
②イベント名はここでは「scroll_custom」とします。既存で「scoll」はあるため、別の名称にする必要があります。
③パラメータ名は「percent_scrolled」とします。
④値の設定には、右のブロックのボタンをクリックします。変数の選択画面が立ち上がります。
すでに「Scroll Depth Threshold」があれば、そちらをクリックします。
なければ、右上の「組み込み変数」から選択します。
値に「{{Scroll Depth Threshold}}」が入るので、末尾に半角英数字の「%」をつけます。
次は下にスクロールして、トリガーを選択します。
トリガーを新規作成するので、右上の「＋」をクリックします。
「ユーザーエンゲージメント」の「スクロール距離」を選択します。
①「縦方向スクロール距離」にチェックをいれます。
②割合を選択し、半角英数字で「0,10,20,30,40,50,60,70,80,90,100」をいれます。これで10%ごとの計測レポートを取得することができます。
③トリガーの発生場所を選択します。ここでは「すべてのページ」を選択します。
最後に「保存」をクリックします。
トリガー名の変更画面が表示されるので、任意の名前をつけます。ここでは「スクロール距離」としました。
入力したら、保存をクリックします。
トリガーの作成が完了すると、タグ編集画面に戻ります。
トリガーが入っていることを確認し、保存をクリックします。
タグ名の変更画面が表示されます。ここでは「スクロール率」としました。
入力したら、保存をクリックします。
これでスクロール計測タグの作成は完了です。
先程と同じように、「プレビュー」で動作を確認し、Tag Assistantの画面でTag Firedの欄に「スクロール率」が表示されればokです。
問題なければ公開しましょう。
続いて、タグマネージャーで計測したスクロール率をGA4でも確認できるように、カスタムディメンションを設定します。
カスタムディメンションとは、デフォルトにはない評価軸を設けたいときに、独自で項目を追加できるようにするものです。
Google Analyticsにログインします。
左メニューの「設定」＞「カスタム定義」＞「カスタムディメンションを作成」をクリックします。
①ディメンション名を入力します。ここでは「スクロール率」としました。
②簡易的な説明を入力します。
③先程GTMのほうで作成したスクロール率計測タグのイベントパラメータを入力します。この例では「percent_scrolled」になります。
入力したら「保存」をクリックします。
これで、設定は完了です！
おわりに
いかがでしたでしょうか。
GTMを使うと、GA4の設定およびUAからの移行がスムーズに行えます。
なるべく初心者の方でもわかりやすいよう、キャプチャ付きで説明しましたが、慣れないと設定や分析には難しい場合もあります。
ちょっと設定に自信がない、GA4への移行にお急ぎの方は、是非お気軽にご相談ください。
学生時代にWebサイトを自作したことがきっかけでWebの世界に。制作会社でデザイン、WordPressテーマ開発の実務を経て、テクニカル・ディレクターとして大規模サイト構築のディレクションを経験。2021年からWakka Inc.の日本拠点でWebディレクターとして参画。最近はブロックエディタになったWordPressをもう一度、勉強しています。
