GA4時代のGoogle Tag Manager入門

2022.09.13
開発ナレッジ
安藤 大海
目次

はじめに

こんにちは。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を導入するには以下2つが必要です。

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をもう一度、勉強しています。

Contacts

Wakkaについて詳しく知りたい方はこちら