1. top
  2. 管理画面
  3. データの表示
  4. イベント
  5. カスタムイベント実装事例集

カスタムイベント実装事例集

  • 投稿日
  • 更新日

この記事を生成AIで要約する:

ChatGPTPerplexityClaudeGGrok

最初に

GA4で自動取得あるいはGA4の管理画面の設定だけで取得出来るイベント以外の「カスタムイベント」の実装事例集になります。取得方法はGoogle Tag Managerの利用を前提としております。

実装に伴い、サイト内のHTMLの修正や追加が発生する場合もあります。修正や追加が発生するかは、サイトによって変わってきます。必要に応じて制作会社、エンジニアやコーディングを担当される方に確認しながら設定を行っていきましょう。

任意のスクロール率計測

サイト側の実装：不要
Google Tag Managerの設定：必要

1.Google Tag Managerの変数から、組み込み変数を追加。Scroll Depth Thresholdにチェックを入れてください。

2.Google Tag Managerのトリガーから、新規トリガーを作成。以下の条件でトリガーを設定します。

トリガーのタイプ：スクロール距離
縦方向スクロール距離にチェックを追加
割合あるいはピクセル数：取得したいタイミングを設定

・割合あるいはピクセル数を設定する場合は、「0」を設定しておく事をオススメします。集計時に分母を出すことが出来るので計算が行いやすくなります。
・GAで既にトリガーを設定している場合は、トリガーの設定は使い回しがきくので、別途作成する必要はありません。

このトリガーの発生場所：全ページ取得する場合は「すべてのページ」。一部のページだけで良い場合は、URL条件等を指定しましょう。

3.GA4 イベントのタグを新規に作成しましょう。

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

測定IDはGA4のプロパティ＞データストリーム＞データストリームの詳細で確認できます

イベント名：任意のイベント名を設定します。

「scroll」という変数名は拡張計測機能で既に利用しているので、scroll以外の名称をつけておく事を推奨します。
また本カスタムイベントを実装する場合は、拡張計測機能のスクロール計測はOFFにしておくとわかりづらさを解消できます。

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

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

以下のパラメータ名は全イベントで自動取得されるため追加で設定は必要ありません。他に追加したいイベントパラメータがあれば設定を行いましょう。
language（言語）
page_location（ページのURL）
page_referrer（１つ前のページのURL)
page_title（ページタイトル）
screen_resolution（画面解像度）

トリガー：先程作成したトリガー「scrollRate」を選択しましょう。保存して計測確認の上、公開しましょう。

4.GA4側で、イベントパラメータの名称を登録します。管理画面内のカスタムディメンションの作成で、ディメンションとパラメータ名（今回の場合はscroll_percentage）を登録します。

アウトプットレポート例

探索レポートで、scroll_percentageをディメンションとして追加

任意のリンククリック計測

サイト側の実装：取得内容によっては必要、該当リンクを一意に識別出来る条件があれば不要
Google Tag Managerの設定：必要

カスタムイベントの実装にて例として紹介しておりますので、こちらを参照してください。

任意のリンク以外の要素のクリック

サイト側の実装：取得内容によっては必要、該当リンクを一意に識別出来る条件があれば不要
Google Tag Managerの設定：必要

リンク以外の要素のクリックを計測する時に利用します。代表的な内容としては「ハンバーガーメニューのクリック」「アコーディオンの開閉」などがあげられます。

1.Google Tag Managerの組み込み変数でClick関連のものにチェックを入れる。

必要なものだけをONにしても良いですが、今後利用することも考えてすべてチェックを入れておいて良いでしょう。

2.トリガーで条件を設定します。

トリガーのタイプ：クリック-すべての要素

トリガーの発生場所：一部のクリック

発生条件

Click Classes：faq-item-title

アコーディオンをクリックする箇所のclass要素が「faq-item-title」などのこちらを利用。サイトの実装によって使うClass名は変わってきます。Class名が設定されていない場合は、実装が必要なケースもあります。

Page URL：一部ページでのみ取得したい場合は条件を設定します。

3.GA4のイベントタグを新規に作成する。

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

測定IDはGA4のプロパティ＞データストリーム＞データストリームの詳細で確認できます

イベント名：任意のイベント名を設定します。今回は「FAQクリック」としました。

イベントパラメータの名称：任意に名称をつけましょう。faq_clickというパラメータ名を設定しました。

イベントパラメータの値：クリックした時のテキストを取得することでどの質問に興味があるかを把握出来ます。{{Click Text}}で設定することが可能です。

以下のパラメータ名は全イベントで自動取得されるため追加で設定は必要ありません。他に追加したいイベントパラメータがあれば設定を行いましょう。
language（言語）
page_location（ページのURL）
page_referrer（１つ前のページのURL)
page_title（ページタイトル）
screen_resolution（画面解像度）

トリガー：先程作成したトリガー「FAQクリック」を選択しましょう。保存して計測確認の上、公開しましょう。

4.GA4側で、イベントパラメータの名称を登録します。管理画面内のカスタムディメンションの作成で、ディメンション名とパラメータ名（今回の場合はfaq_click）を登録します。

アウトプットレポート例

探索レポートでイベント名と、faq_clickのイベント数を取得

要素の表示の計測

サイト側の実装：取得内容によっては必要、該当要素を一意に識別出来る条件があれば不要
Google Tag Managerの設定：必要

ブラウザ上に特定の画像や箇所が表示された場合にイベントとして計測する方式です。広告画像の表示回数や、記事の読了計測などに便利です。

1.Google Tag Managerの組み込み変数の設定で「Percent Visible」と「On-Screen Duration」にチェックを入れる。

2.トリガーの設定を行う。

トリガーのタイプ：要素の表示

洗濯方法：class名などを条件にする場合は「CSS セレクタ」、HTML内のIDを条件にする場合は「ID」を選択。

要素セレクタ：どの要素が表示されたらトリガーが動作するかを指定する。

class名を記載する場合は、必ず一番最初に「.（ピリオド）」をつけてください。
つまり「site-footer」ではなく「.site-footer」が正しい表記になります。

今回の例ではフッターエリアの、site-footerというクラス部分（下記画像参照）が表示されたら計測するという条件にするためsite-footerを記載しています。このように該当要素がユーザーの「見える」内容（文章や画像）ではなくてもclass名やid名で指定が可能です。

このトリガーを起動するタイミング：３つの選択肢があります。

  • １ページにつき１度：該当要素がページで最初に読み込まれたときのみ計測を行います。
  • １要素につき１度：該当要素がページ内に複数個ある場合、それぞれの要素の最初の１回のみ計測されます。例えばsite-footerが2箇所あり、どちらも表示された場合は１回ずつの計測となります。
  • 各要素が画面に表示されるたび：該当要素が上下のスクロールなどによってブラウザで複数回表示された場合、それらすべてが計測されます。

読了などの計測であれば、一番上の選択を選ぶと良いでしょう。

視認の最小割合：該当要素のエリア（画像であれば画像の高さ）の何%が表示されたら計測するかを指定します。少しでも表示されればOKであれば1を。画像が完全に表示された時に計測したい場合は100を設定しましょう。

画面上での最小時間の設定（任意）：画面上に一定時間以上表示されたら計測を行うという設定です。ミリ秒で指定が出来ます。複数回表示された場合は、それぞれの個別の表示時間の判定ではなく、累計の表示時間で判定を行います。

DOMの変化をモニタリング（任意）：DOMが変わった時の表示も計測するかの設定です。デフォルトはオフになっています。設定時の注意書きを確認の上、利用する必要があればチェックを入れてください。

このトリガーの発生場所：site-footerが含まれるすべてのページで計測する場合は、「すべての表示イベント」にしておき、特定のURL等で絞り込みたい場合は「一部の表示イベント」に変更して条件を指定してください。

3.GA4 イベントのタグを新規に作成しましょう。

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

測定IDはGA4のプロパティ＞データストリーム＞データストリームの詳細で確認できます。

イベント名：任意のイベント名を設定します。

イベントパラメータ値：必要であれば設定をしましょう。今回は特に設定は行っていません。

以下のパラメータ名は全イベントで自動取得されるため追加で設定は必要ありません。他に追加したいイベントパラメータがあれば設定を行いましょう。
language（言語）
page_location（ページのURL）
page_referrer（１つ前のページのURL)
page_title（ページタイトル）
screen_resolution（画面解像度）

トリガー：先程作成したトリガー「FooterView」を選択しましょう。保存して計測確認の上、公開しましょう。

4.パラメータを追加で設定した場合は、GA4側で、イベントパラメータの名称を登録します。管理画面内のカスタムディメンションの作成で、イメンとパラメータを登録します。

アウトプットレポート例

GA4のリアルタイムレポートで計測確認

会員IDの取得

サイト側の実装：必要
Google Tag Managerの設定：必要

まずは会員IDが収録出来るようにサイト側での実装を行いましょう。下記はdataLayerでの実装例になります。

	<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'loginID': 'A12345',

});
</script>

loginIDを取得するため、dataLayerの値をGoogle Tag Managerで取得出来るようにします。変数の設定を行ってください。

変数のタイプ：データレイヤー変数
データレイヤーの変数名：ログインIDを取得しているパラメータ名（今回の場合はloginID）

最後にGoogleタグを変更してIDを取得します。

ユーザープロパティ内で以下の設定を行います。

プロパティ名：任意の名称（GA4の画面上に表示されます　ここではloginID）
値：先程作成した変数 (ここでは{{loginID}})

このIDをユーザーを特定するIDとして利用したい場合（ログインしている場合はCookieではなくログインIDをユーザー識別子として利用）は、以下の設定をあわせて行ってください。

構成パラメータで

フィールド名：user_id （予約されている固定値）
値：先程作成した変数（ここでは{{loginID}}）

GA4でカスタムディメンションの登録を行う。

ディメンション名：任意（画面で表示される名称）
範囲：ユーザーに紐付けるため、「ユーザー」にしましょう
ユーザープロパティ：Google Tag Managerで設定したプロペティ名（ここではloginID）

セッションの途中にユーザーがログインした場合は、該当セッション内の過去のイベントに対しても会員IDが関連付けされます。ただ同セッション内にログアウトした場合は、それ以降に発生した動でッションのイベントはユーザーIDと関連付けされません。

ClientID(Cookie生成されたユーザー識別子）の取得

サイト側の実装：不要
Google Tag Managerの設定：必要

Google Tag Managerの「テンプレート」内の「検索ギャラリー」から「GTAG GET API」というテンプレートを検索します。

見つけたらリンクをクリックし「ワークスペース」に追加して反映をします。

次に「タグ」の作成を行います。タグのメニューに移動し、新規タグを追加しましょう。先程登録した「GTAG GET API」が表示されます。

設定画面が表示されるので、以下のように選んでいきます。

MeasurementID：GA4の測定IDを追加してください（G-XXXXXX）のやつです。変数で作成している場合はそれを選びましょう。

Default Fileds To Get：どの項目を取得するかを選びます

・Client ID (client_id)：ユーザーを識別するためにGA4が利用するcookieで生成されたID
・Session ID (session_id)：セッションを特定するためのID。GA4では自動で取得されているので設定は必須ではありません
・GCLID：Google広告がクリックされた時にURLパラメータに付与されるIDの　※必要であれば取得

トリガーに関しては「All Pages」で大丈夫です。

次に、このタグの発火タイミングを設定します。GA4の計測タグの「後」に本タグが発火する必要があります。

そこでGA4のページビュー計測を行っているタグを選択してください。

編集画面の「詳細設定」⇒「タグの順序付け」と開いていきます。

「GA4ー計測タグ（タグの名称）が発行した後にタグを配信」にチェックを入れて、プルダウンから先程作成したタグを選んでください。

プレビューモードで確認を行いましょう。

gtagApiGetという行が表示されるはずなので、そちらをクリックしてみましょう。event:gtagApiGet と入っていて、client_idなどが設定されていれば計測は出来ています。

GA4で利用するためには、追加で以下の設定を行います。

Google Tag Managerのトリガーでカスタムイベントの作成

イベント名は「gtagApiGet」

Google Tag Managerで変数の作成

データレイヤーの変数名は「gtagApiResult.client_id」

GA4のイベントタグを作成

設定タグ：GA4のページビュー計測を行っているタグを指定

イベント名：任意（ここではclient_id）
ユーザープロパティ内の
　プロパティ名：任意（ここではclient_cookie_id）
　プロパティ値：先程作成した変数名を「＋」ボタンを押して選択。最後に「.（ピリオド）」をつけてください
トリガー：先程作成したトリガーを選択

プロパティ値に「.」をつけるのは、CookieIDはピリオドを含む小数のような文字列になっており、これをGoogleは数値として認識してしまいます。その認識を防ぐために最後にピリオド（あるいは他の数字以外の文字列であればOK）を入れて数値化されないようにしています。

デバッグモード等を利用して、設定したイベント名（ここではclient_id）が計測されているかを確認し、ユーザープロパティのパラメータにID（ここではclient_cookie_id）が設定されているかを確認しましょう。

後は本番公開してリリースすればOKです。ディメンションとして利用したい場合は、カスタムディメンションの登録を行いましょう。

タイムスタンプの計測

サイト側の実装：不要
Google Tag Managerの設定：必要

各イベントが発生した時間をカスタムイベントで計測をします。BigQueryには格納されますが、探索レポートで活用したい場合などに便利です。

タイムスタンプの計測を行うと、数多くのイベントパラメータが付与されるため、しきい値やサンプリングなどが発生しやすくなります。特に規模が大きいサイトでは発生しやすいので利用の際にはご注意ください

Google Tag Managerで変数を作成する。

function() {
    var tz = -9, // JST
        now = new Date(Date.now() - (tz * 60 - new Date().getTimezoneOffset()) * 60000),
        pad = function (n){return n<10 ? '0'+n : n};
    return now.getFullYear()
        + '-' + pad(now.getMonth()+1)
        + '-' + pad(now.getDate())
        + ' ' + pad(now.getHours())
        + ':' + pad(now.getMinutes())
        + ':' + pad(now.getSeconds());
}

変数のタイプ：カスタムJavaScript
カスタムJavaScript：上記コードを利用

タイムスタンプを取得したいタグ（Googleタグ及びイベントタグ）に変数を追加。

設定フィールドに追加を行う
フィールド名：任意（ここではcustom_timestamp）
値：タイムスタンプ取得のために作成した変数名

GA4でカスタムディメンションの登録を行う。

ディメンション名：任意（画面で表示される名称）
範囲：イベントごとの時間が変わるので「イベント」を選択
ユーザープロパティ：Google Tag Managerで設定したプロパティ名（ここではcustom_timestamp）

探索機能でのタイムスタンプのアウトプット例

ページビューにイベントパラメータを渡す

サイト側の実装：不要
Google Tag Managerの設定：必要

ページビューのイベントには初期状態ではイベントパラメータを渡すことが出来ません。しかしページが表示されるたびにイベントパラメータを付与したいケースがあるかと思います。その場合は以下の設定を行う必要があります。

設定を間違えるとページビューの計測が行えなくなったり、二重計測になったりする可能性があります。設定が正しく出来ているか、プレビューモードやDebug Viewを使って必ず確認を行ってください。

Google Tag Managerで設定されている「Googleタグ」の構成パラメータで
「構成パラメータ」：send_page_view
「値」：false
を設定してください

新たにpage_viewのイベントを作成し、パラメータを付与します。

以下パラメータはすべてのイベントで自動付与されるため、新たに設定は必要ありません。
language
page_location
page_referrer
page_title
screen_resolution

新しいイベントパラメータが付与された状態でpage_viewが計測出来ているかを確認の上、Google Tag Managerを公開します。

仮想ページビューの計測

サイト側の実装：必要
Google Tag Managerの設定：必要

フォームでURLが変わらない、あるいはSIngle Page Application方式を利用している場合は、仮想ページビューの設定を行わないと複数のページが１つのURLにまとまった状態となってしまいます。そこで仮想ページビューを計測出来るように実装を行いましょう。

該当ページが開いた時にpage_locationとpage_titleをdataLayerで送る。


<script>
var dataLayer = window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'page_location': '/form/thanks.html',
    'page_title': 'お問合せ完了フォーム'   
    
});
</script>

Google Tag Managerでこれら２つのイベントパラメータを変数として登録する。

「pageview」のイベントが発生した時に動作するようにトリガーを作成します。

GA4の計測を行っている「Google タグ」の設定フィールドで「page_location」と「page_title」を追加する。

Debugモードでpage_viewのイベントにおいて、page_locationやpage_titleが書き換わっているかを確認する。

アクセスしたURLは上記page_locationのURLではないが、pagea_locationが書き換わっている。

ページからパラメータを除外するための設定

サイト側の実装：不要
Google Tag Managerの設定：必要

GA4でのページ計測はパラメータがついた状態での計測となってしまいます。しかし、これは分析上不便なことも多いです。そこでパラメータを除外するための方法を紹介します。パラメータを完全に除外、あるいは設定したパラメータだけを除外する方法があります。

詳しくは以下記事にまとめましたので、ご覧ください。

GTMでURLパラメータを除外してGA4で計測する方法
GA4の現在の仕様ではpage_locationにパラメータ付きのURLが入ってきます。これにより同じページが…
www.ga4.guide

ディレクトリ別のデータを取得する

サイト側の実装：不要
Google Tag Managerの設定：必要

GA4でのディレクトリごとの数値を見ることが出来ません（フィルタ機能は利用出来ますが、ディレクトリごとに都度設定しないといけなくて大変面倒です）。そこでGTMの設定を利用し、任意の階層（第一階層、第二階層など）を取得することが可能です。

詳しくは以下記事にまとめましたので、ご覧ください。

GA4のデータをディレクトリ別に確認する方法
ウェブサイトのデータを見る時に、ディレクトリごとの数値を計測したいというケースがあります。しかしGA4ではディ…
www.ga4.guide

フォーム入力の進捗計測

サイト側の実装：必要（dataLayerの実装）
Google Tag Managerの設定：必要

問い合わせフォームや申し込みフォームで、ユーザーがどこまで入力を進めたかを計測する方法です。フォームのステップごとにdataLayerでイベントを送信し、離脱が多いステップを特定することでフォーム改善に役立てます。

該当フォームの各ステップで以下のようなdataLayerを実装します。

<script>
// フォームのステップが変わるタイミングで実行
dataLayer.push({
   'event': 'form_progress',
   'form_name': 'お問い合わせフォーム',
   'form_step': '1_入力開始'
});
</script>

form_stepの値はステップごとに変更します（例：1_入力開始、2_確認画面、3_送信完了）。

Google Tag Managerでは以下の設定を行います。

  1. データレイヤー変数「form_name」「form_step」を作成
  2. カスタムイベント「form_progress」のトリガーを作成
  3. GA4イベントタグを作成し、イベント名を「form_progress」、イベントパラメータに「form_name」と「form_step」を設定
  4. GA4管理画面でカスタムディメンション「form_name」「form_step」を登録

探索レポートでform_stepごとのイベント数を確認すれば、どのステップで離脱が多いかを把握できます。ファネルデータ探索と組み合わせるとより効果的です。

CTAボタンのクリック計測

サイト側の実装：取得内容によっては必要（ボタンを一意に識別できるclass名やid名があれば不要）
Google Tag Managerの設定：必要

「資料請求」「無料体験」「お見積もり」など、サイトの主要なCTAボタンのクリックを個別に計測する方法です。どのCTAが最もクリックされているか、ページごとのCTAクリック率を把握できます。

  1. Google Tag Managerの組み込み変数でClick関連（Click Classes、Click ID、Click Text、Click URL）にチェックを入れる
  2. トリガーを作成：トリガーのタイプは「クリック – すべての要素」、発生場所は「一部のクリック」、条件は「Click Classes」に対象CTAのclass名を指定（例：cta-button）
  3. GA4イベントタグを作成：イベント名は「cta_click」、イベントパラメータとして「cta_text」に{{Click Text}}、「cta_url」に{{Click URL}}を設定
  4. GA4管理画面でカスタムディメンション「cta_text」「cta_url」を登録

複数のCTAボタンを一つのトリガーで計測するには、CTAボタンに共通のclass名（例：cta-button）を付与しておくと便利です。Click Textでどのボタンがクリックされたかを区別できます。

カスタムイベント設計のベストプラクティス

カスタムイベントの設計時に以下のポイントを意識すると、管理しやすく分析に活用しやすい計測環境を構築できます。

  • 命名規則を統一する：イベント名はスネークケース（例：form_submit、cta_click）で統一しましょう。GA4の自動収集イベントもスネークケースなので一貫性が保てます
  • 既存のイベント名と重複させない：GA4が自動収集するイベント名（page_view、scroll、click等）やGTMの推奨イベント名と同じ名称は避けましょう
  • パラメータ数の上限に注意：GA4では1プロパティあたりイベントスコープのカスタムディメンション数は50個（GA4 360は125個）、ユーザースコープは25個が上限です。計画的に設計しましょう
  • デバッグを必ず行う：GTMのプレビューモードとGA4のDebugView（管理画面＞データ表示＞DebugView）を使い、正しくデータが送信されているかを公開前に確認しましょう
  • ドキュメント化する：設定したカスタムイベントの一覧（イベント名、パラメータ名、トリガー条件、設定日）をスプレッドシート等で管理しておくと、チーム内での共有や将来の見直しに役立ちます

あわせて読みたい

小

この記事の著者

小川 卓（おがわ たく）

株式会社HAPPY ANALYTICS 代表取締役。ウェブアナリストマスター。University College London（UCL）卒業。リクルート、サイバーエージェント、アマゾンジャパン等でウェブアナリストとして活動後、独立。著書多数、全国で500回以上の講演実績。

公式サイトX (Twitter)ブログ

参考になりましたか？

Google Analytics 4のセミナー講座販売中
活用・実装・改善・LookerStudioなど３時間半で学べる動画＋資料を買い切り販売中です。一度購入いただくと、随時アップデートも行われます。