Googleアナリティクス4(GA4) カスタムイベントの作り方

April 5, 2022March 3, 2024

GA4を勉強中。でもイベントなるものがいまいちわからず…。イベントの全体像や、新しくイベントを作る方法を詳しく教えてください

こういった疑問に答えます。

本記事では、GA4における、イベントの種類やカスタムイベントの作り方を解説します。

Googleアナリティクス4（GA4）を利用していると、避けて通れないのが「イベント」。

イベントは、GA4における計測単位であり、サイト分析をするうえでのキモだからです。

とはいえ、GA4を使い始めたばかりの方には、イベントってよくわかりませんよね…？

そこで本記事では、GA4における、イベントの概念や種類、イベントの作り方をていねいに解説しました。

特に、イベントの作り方については、GA4の管理画面だけで作る方法と、GTMを使って作る方法のそれぞれにおいて、たくさんの事例を紹介しています。

GA4のイベントをマスターしたい方はぜひご覧ください！

イベントとは

イベントとは、クリックやスクロールなど、ユーザーが行った操作や行動のことです。

ユニバーサルアナリティクス（UA）では、「ページの表示」が計測の基本単位でしたが、GA4では、計測の基本単位は「イベント」に統一されました。

計測の基本単位：ページの表示 → イベント

GA4では、ページビューも「イベント」として計測されます。

データ種別	UA	GA4
ページビュー	ページビューとして計測	`イベント`として計測
イベント	イベントとして計測	`イベント`として計測
Eコマース	Eコマースとして計測	`イベント`として計測

なぜイベントに統一されたのか？

「ページが表示」されたらデータを取るという従来の計測方式は、アナリティクスが登場した2005年当時はそれで良かったんです。

なぜかというと、当時はWebサイトのデータだけを収集すれば、ユーザー行動のおよそ把握できていたから。

しかし、テクノロジーの進化にともない、以下のような問題がでてきました。

普及したアプリにはページという概念がそもそもない
スマホやタブレットなど複数のデバイスが使われるようになり、ユーザー行動を追いづらくなった
１ページ内で完結する動画が普及し、「３秒で離脱 vs 30分動画を見て離脱」というユーザー行動の差を把握しづらくなった

上記のような課題に対して、Googleはアナリティクスに改良を重ねてきましたが、そろそろ限界に達してきていました。

そこで、Googleは思い切ってアナリティクスをリニューアルし、計測方式を「イベント」に統一しました。

ユーザーが行動を起こしたら（=イベントが発生したら）データを取るという方法に統一したほうが、ユーザー行動を把握しやすくなるからです。

たとえば、GA4では、ユーザーがあるページを最後までスクロールすると、scrollというイベントが発生します。

このscrollイベントを見ることで、「3秒で離脱 vs 完読して離脱」というユーザー行動の差を把握できるようになります。

もちろん、従来のアナリティクスでもイベントを「実装」することで、上記のようなイベントを計測することはできましたが、手間でした。

対して、GA4では、よく使われるイベントが自動収集されるので、便利になりました。

また、もともとアプリ版アナリティクス（Firebaseアナリティクス）は、計測単位がイベントなので、Webとアプリとも、計測単位がイベントに統一されます。

その結果、Webとアプリの横断分析もやりやすくなり、前述した課題も解決できるようになりました。

このように、Googleは、アナリティクスを思いきって再設計し、計測単位をイベント単位に統一することで、ユーザー行動を把握しやすい解析ツールへと進化させたわけです。

上記については以下の記事でも解説してますので、あわせてご覧ください。
» Googleアナリティクス4(GA4)とは？特徴やUAとの違いを解説！

カスタムイベントの作成例（GA4画面編）

続いては、GA4画面上でカスタムイベントを作る例をいくつか紹介します。

特定ページの閲覧
特定ランディングページの閲覧
特定ファイルのクリック
特定外部リンクのクリック
内部リンクのクリック
特定金額以上の購入

特定ページの閲覧

イベント名：
event_name：page_view
イベントパラメータ：
page_locationでURL条件
あるいは
page_titleでタイトル条件

上図は、本サイトのお問い合わせページを訪問したときにイベントを発生させるもので、 page_locationに https://hideharublog.com/contact-form/を設定しています。

特定ランディングページの閲覧

イベント名：
event_name：session_start
イベントパラメータ：
page_locationでURL条件
あるいは
page_titleでタイトル条件
あるいは
page_referrerで流入元のURLを指定

上図は、本サイトのトップページがランディングページだったときにイベントを発生させるもので、 page_locationに https://hideharublog.com/を設定しています。

特定ファイルのクリック

イベント名：
event_name：file_download
イベントパラメータ：
link_urlでURL条件
あるいは
file_nameでファイル名
あるいは
file_extensionで拡張子指定

特定外部リンクのクリック

イベント名：
event_name：click
イベントパラメータ：
link_urlでURL条件
あるいは
link_doainでドメイン指定

上図は、当サイトの「Amazonプライムビデオを紹介した記事」で、プライムビデオの無料体験申し込みリンクを読者がクリックしたときにイベントを発生させるもので、 link_urlに無料体験申し込みリンクのURLを設定しています。

内部リンクのクリック

イベント名：
event_name：page_view
イベントパラメータ：
page_referrerで自サイトのドメイン指定

page_viewが発生したときに、page_referrer（前のページのURL）が自サイトのドメインということは、すなわち、内部リンクがクリックされたということ。

上図は、当サイトで内部リンクがクリックされたときに発生するイベントでして、 page_referrerに、当サイトのドメインを指定しています。

特定金額以上の購入

イベント名：
event_name：purchase
イベントパラメータ：
valueで金額指定
あるいは
couponで利用クーポン指定
などpurchaseで取得しているイベントパラメータで条件指定

GA4でカスタムイベントを作る方法（GTMを使う編）

さきほどの章では、すべての作業をGA4上で行い、カスタムイベントを作成しました。実装も不要でしたね。

ただ、カスタムイベントを作る方法は、他にもあります。具体的には、以下の２つ。

カスタムイベントを作る方法

HTMLにコードを実装する
Googleタグマネージャー（GTM）を使う

この方法を使うと、さきほどの章で紹介したイベントはもちろん、さらに多様なイベントを作ることが可能です。

そこで本章では、２つのうち、GTMを使ってカスタムイベントを作る方法を紹介します。

※GTMの導入方法や基本的な使い方は、Googleタグマネージャーの使い方｜導入＆アナリティクス連携！をご覧ください。

GTMを使って、カスタムイベントを作る手順は以下のとおり。

GTMを使ってカスタムイベントを作る手順

手順①：取得したいデータの取得方法を決める
手順②：必要に応じてサイト内への記述を追加
手順③：GTMで変数・トリガー・タグを設定
手順④：計測が正しくできているかを確認
手順⑤：公開する
手順⑥：カスタムディメンションの登録

それぞれのステップを「特定のクリックを計測する」を例に解説します。

手順①：取得したいデータの取得方法を決める

本サイトのサイドバーにある、お問い合わせとプロフィールのクリック回数を計測したいとします。

本サイトの各ページには、上記のメニューが入っており、どこで何回クリックされているかを確認します。

このメニューは、サイドバー以外にフッターにもリンクがあり、どちらを押したかを区別出来ません。

そこで、サイドバーにあるリンク計測だけ行うこととします。まず決めないといけないのは、このリンクだと特定する要素があるか？ということ。ページのソースを見てみます。

ソースを見ると、「pull-right」というクラス名があることがわかります。このクラス名はこの枠のリンクでしか使っていません。今回はこれを使って特定をします。

手順②：必要に応じてサイト内への記述を追加

今回はユニークな要素があったので、サイト内への記述の追加は必要ありませんでした。

ユニークな要素が無い場合は、class名などの実装が必要です。GAで利用する事を特定するため、ga4-button-clickのようなclass名をつけてもよいでしょう。

取得するデータにより追加する記述は変わります。

手順③：GTMで変数・トリガー・タグを設定

GA4でデータを取得するための設定をGTMで行います。

GTMでは
・変数
・トリガー
・タグ
という３つの設定項目があります。

取得したい内容により設定の仕方はそれぞれ。また、「変数」の設定は必要ないこともあります。

では、GA4画面の右上のマークをクリックして、GTMの画面に遷移しましょう。

その①：変数の設定

今回の例の場合、「変数」はGTMの組み込み変数として用意されています。

「変数」のページから「組み込み変数の設定」を選び、Click Classesにチェックをいれます。

その②：トリガーの設定

次に計測タグを動かすための条件（トリガー）設定を行います。

今回はClick Classesがpull-rightに一致するという条件です。トリガーの画面から「新規」を押し、以下の条件を設定します。

トリガーのタイプ：クリック – リンクのみ
トリガーの発生場所：一部のリンククリク
トリガー配信条件：Click Classes 等しい pull-right

その③：タグの設定

最後にタグの設定を行います。

GA4のイベントはイベント専用のタグがあるので、それを選びます。タグの画面から「新規」を押し、
[Googleアナリティクス：GA4イベント]を選びます。

取得するデータの設定を行っていきます。

①設定タグ：

変数で測定IDを登録している場合は、登録した変数名を選ぶ（上図はこれがに該当）。変数として登録していない場合は「なし – 手動設定したID」を選び、測定IDを入力する。測定IDは、GA4のプロパティ > データストリーム > データストリームの詳細で確認できます。

②イベント名：

GA4の画面上で表示するイベント名（任意）を入力する。

③イベントパラメータ：

イベントにひもづけたいパラメータを設定する。パラメータ名は任意。値は固定で入れるか、値の右横にある「＋」ボタンを押して変数から選ぶ。今回はリンクが２つあり、それぞれの文字列が違う。どちらが何回押されたかを区別するために「Click Text」を設定した。パラメータは複数追加できるので、必要に応じて行を追加する。

注：以下のパラメータ名は、全イベントで自動取得されるため追加で設定は必要なし。
・language（言語）
・page_title（ページタイトル）
・page_location（ページのURL）
・page_referrer（１つ前のページのURL)
今回の例だと、どのページで「お問合せフォームのリンク」を押されたかは、「page_location」や「page_title」を見ればわかるので、新たに設定する必要はありません。

次にこのタグを発動させるトリガーの設定も行います。先ほど作成したトリガーを選択しましょう。最終的に以下の形になります。

手順④：計測が正しくできているかを確認

次に、作成したイベントが正しく動作するかをチェックします。

GTMのプレビューモードで、タグが動作しているかを確認する

GTMのプレビューモードを動作させます。

右上から[プレビュー]を選び、テストしたいURLを入力して、接続を行います。以下の画面が表示され、対象ページが開きます。

当サイトのサイドバーのリンクをクリックします。

今回はLink Clickの計測なので、プレビュー画面のLink Click部分を選択します。Tag Fired（動作したタグ）の中に、先ほどの「GA4_GTM_特定リンクのクリック（サイドバー）」のタグが表示されていますね。

該当の枠をクリックし、右上のラジオボタンで[Values]を選びます。イベント名、イベントパラメータともに正しく設定されていることを確認します。

これでGTM側での検証は完了。

※計測ができていない場合は、トリガーやタグの設定を間違えているかも。いまいちど見直しましょう。

手順⑤：公開する

GTMを公開します。

GA4のイベント画面で計測確認する

GTMで作成したタグを公開したら、自分で一度はイベントを発生させておきます。

計測されたイベントは、GA4の[設定] > [イベント]で確認できます（注：画面に表示されるまでには、数時間〜１日ほどかかる）。

画面上でイベントが出てきたら無事に計測完了です。

今回の例だと、イベントを作成した翌日に、以下のように表示されました。

手順⑥：カスタムディメンションの登録

イベント取得に新しく設定した「イベントパラメータ」はカスタムディメンションとして登録すれば、レポートや探索で利用することができます。

今回の例は「Click_Text_contact_sidebar」という新しいイベントパラメータを作成したので、これを登録しておきます。

GA4の左メニューから[設定] > [カスタムディメンション]にアクセスし、[カスタムディメンションを作成]をクリックします。

以下のように登録を行います。

ディメンション名：

画面上で表示される名称。イベントパラメータ名と同じだとわかりやすいでしょう。

範囲：

取得するイベントパラメータのスコープを選ぶ。「イベント」と「ユーザー単位」を選ぶことが可能。該当イベントが同一ユーザーで変わるケースの場合は「イベント」、会員IDなどの属性情報の場合は「ユーザー」を選ぶ。

イベントパラメータ：

作成したイベントパラメータを登録します。

※プロパティごとに一意の名前のユーザースコープのカスタムディメンションを25個まで登録できる

これでレポートや探索内で「Click_Text_contact_sidebar」のパラメータを選べるようになります。

手順５はここまで。

以上、GTMを使ってカスタムイベントを作る方法でした。

カスタムイベントの作成例（GTMを使う編）

GA4で自動取得、あるいは、GA4の管理画面の設定だけで取得できるイベント以外のカスタムイベント作成例を紹介します。

Googleタグマネージャー（GTM）の利用が前提です。

例①：任意のスクロール率計測
例②：任意のリンククリック計測
例③：任意のリンク以外の要素のクリック計測
例④：要素の表示の計測

例①：任意のスクロール率計測

拡張機能のイベントで「スクロール」をオンにすると、スクロールイベントは収集できますが、その場合は、
1)90%のみ計測
2)対象ページを絞れない（全ページが対象になる）
というデメリットがあるので、本イベントが活躍します。

本例では、手順①②は省略（不要）。

手順③：GTM設定

変数の設定

組み込み変数を追加します。
Scroll Depth Thresholdにチェックを入れます。

トリガーの設定

・トリガーのタイプ：スクロール距離
・縦方向スクロール距離にチェックを追加
・割合：取得したいタイミングを設定（本例では、0,10,25,50,75,90%）
・このトリガーの発生場所：全ページ取得する場合は「すべてのページ」を選択。一部のページだけで良い場合は、以下のようにURL条件等を指定します。前述のとおり、拡張機能のイベントでスクロールをオンにすると、ページを絞れないので、サイトによってはイベント数（ヒット数）が増えすぎるデメリットがあります。そのときは、ここで、一部のページだけに絞るといいですね。

タグの設定

・設定タグ：測定IDを直接指定するか、測定IDを変数として設定している場合は該当変数名を選ぶ

・イベント名：任意のイベント名を設定する。

「scroll」という変数名は拡張計測機能で既に利用しているので、scroll以外の名称をつけた方がよい。また、本カスタムイベントを実装する場合は、拡張計測機能のスクロール計測はOFFにした方がわかりやすい。

・イベントパラメータの名称：任意の名称をつける。既に利用しているイベントパラメータ名は使わないようにする。ここではscroll_percentageという名称にした。

・イベントパラメータの値： {{Scroll Depth Threshold}}　を選ぶ。最後に「％」をつけるとレポート表示時に％がついた状態で見ることができる（例：20%）

・トリガー：先ほど作成したトリガーを選択する

手順④：動作の確認

プレビューモードで計測の確認をします。
Tag Fired（動作したタグ）の中に、先ほどの「GA4_GTM_スクロール割合」のタグが表示されていますね。

該当の枠をクリックすると、イベント名、イベントパラメータともに正しく設定されていますね。

手順⑤：公開する

ここまで確認できたら、GTMを公開します。

手順⑥：カスタムディメンションの登録

GA4の[設定] > [カスタムディメンション] > [カスタムディメンションを作成]をクリック。ディメンション名とイベントパラメータ名（今回の場合はscroll_percentage）を登録します。

アウトプットレポート例

探索メニューを使ってレポートを作成してみます。
GA4の探索メニュー（詳しい使い方はこちら）をクリックし、[空白]もしくはテンプレートを選択します。

変数カラム内のディメンションで[+]をクリック。カスタムディメンションとして、先ほど登録した「scroll_percentage」をインポートします。

値に、イベント数と利用ユーザーを設定すると、以下のレポートになります。

※なぜか、（no set）が表示されてますね…。原因を調査してみます。汗

例②：任意のリンククリック計測

前述の項で説明してますので、そちらをご覧ください。