イベントトラッキングの設定方法

2024年4月1日

この記事はユニバーサルアナリティクス（UA）の内容です。

Googleアナリティクスでクリックを計測するには、イベントを送信するトラッキングコードを設置します。送信されたイベントは、Googleアナリティクスのイベントレポートで集計したり、イベントをコンバージョンとして計測したりできます。

この記事では、イベントトラッキングを行うための設定とGoogleアナリティクスで分析する方法を解説します。

関連記事：Googleアナリティクスとは？

イベントトラッキングとは？

イベントトラッキングとは、Webページ内で動画再生ボタンのクリックといったユーザー行動を計測することです。JavaScriptのトラッキングコードをページに埋め込むか、Googleタグマネージャーで設定します。

Googleアナリティクスで計測するには、トラッキングコードをページに設置しますが、標準のトラッキングコードでは「サイト内のページ遷移のみ」が計測対象です。そのため、「動画再生ボタンのクリック」のようなページ遷移のないユーザー行動は計測できません。また、ページ遷移を伴うバナー画像クリックでも、外部サイトへのリンクのときには計測できません。

このように、ページ内での詳細なユーザー行動を追跡するには、Googleアナリティクスの「イベント」機能を使います。イベントを計測するためには、イベント計測用のトラッキングコードをページ内に追加する必要があります。

イベントトラッキングで計測できること

イベントトラッキングでは、ページを遷移せずにユーザーが行った行動が計測できます。

たとえば、次のような行動が計測できます。

バナー画像のクリック
動画再生ボタンのクリック
電話リンクのクリック
PDFファイルのダウンロード
広告の画面内への表示
ページの画面スクロール

JavaScriptを使ってイベントの送信タイミングを制御するので柔軟性が高く、上記以外にも、さまざまな計測ができます。

なお、イベントはページ内で1回限りではなく、何回でも送信できます。

イベントトラッキングの設定に必要な項目

イベントトラッキングを行うには、イベントに関連する5つの項目を何にするか、あらかじめ決めておく必要があります。

イベントカテゴリ
イベントアクション
イベントラベル
イベント値
非インタラクション

これらの項目は、Googleアナリティクスのレポートに表示されたり、計算値に関連するものです。

イベントカテゴリ

イベントの大分類を表す文字列です。決まったルールがあるわけではないですが、Googleアナリティクスで分析するときに表示されるので、関連するイベントは同一のカテゴリ名にしておきましょう。

（例）banner, video, popup, trial など

イベントアクション

イベントの中分類を表す文字列です。これも決まったルールがあるわけではないですが、「ユーザーの行動」を表す click とか download のような文字列にします。Googleアナリティクスのイベントレポートにも表示されます。

（例）click, play, download など

イベントラベル

イベントの詳細を表す文字列です。たとえば、クリックしたバナー画像のファイル名、再生した動画のID、開閉したボタンの位置などです。

（例）seminar2020sidebar, anatomy-intro.pdf, 1075692 など

イベント値

0以上の整数です。動画の再生時間（秒数）や、カートに追加した商品の金額など、イベントの情報に数値を含めたいときに使います。
必要がなければ、設定しなくてOKです。

（例）240, 1980 など

非インタラクション

「非インタラクション」は分かりにくい言葉ですが、直帰率の計算に影響する項目です。

イベントトラッキングの設定のうち、影響範囲が大きい項目なので、注意が必要です。

true を指定すると、イベントが発生する・発生しないに関係なく、流入したページで離脱したときは直帰とみなされます。false を指定すると、流入したページでイベントが発生したあとに離脱すると、直帰とはみなされません。

非インタラクションのデフォルト値は false（偽） です。

非インタラクションの設定を変更しないまま、イベントトラッキングを導入すると、ページの直帰率の計算ルールが変わってしまいます。具体的には、直帰率が下がります。イベントトラッキングは、ほとんどのケースで、クリックなどのイベントを計測したいだけでしょう。非インタラクションはtrue（真）を指定することを強くお勧めします。

引用元：非インタラクションのイベント – アナリティクスヘルプ

グローバルサイトタグでイベントトラッキングを設定する手順

いよいよトラッキングコードの設置に移ります。イベントトラッキングでは「クリック」が一番使われるので、クリックイベントのトラッキングコードについて説明します。

グローバルサイトタグ（gtag.js）をページに埋め込んでいるときは、イベントを発生するタイミングで、以下のコードを実行します。

gtag('event', <イベントアクション>, {
  'event_category': <イベントカテゴリ>,
  'event_label': <イベントラベル>,
  'value': <イベント値>,
  'non_interaction': <非インタラクション>
});

たとえば、次のようなバナー画像があるとします。

<a class="banner" href="..."><img src="..."></a>

バナー画像をクリックしたときにイベントを送信するには、次のようなJavaScriptコードを記述します。

document.querySelector("a.banner").addEventListener("click", function(event) {
    var url = event.currentTarget.href;
    event.preventDefault();
    gtag('event', 'click', {
      'event_category': 'banner',
      'event_label': 'seminar2020',
      'event_callback': function() {
          location = url;
      },
      'non_interaction': true
    });
 });

上記のコードでは、次のようなイベント項目がGoogleアナリティクスに送信されます。

項目	値
イベントカテゴリ	banner
イベントアクション	click
イベントラベル	seminar2020
非インタラクション	true

なお、event_callbackはGoogleアナリティクスへのイベント送信が完了した後に実行される処理です。リンクのイベントトラッキングを行う場合、Googleアナリティクスへのイベント送信の完了を待ってから、リンク先へ遷移する必要があります。そのため、event.preventDefault()でリンク先へのページ遷移を停止してから、Googleアナリティクスへイベントを送信し、そのあとにlocation = urlでリンク先へ遷移させてます。

関連記事：analytics.jsからgtag.jsへ移行する方法

Googleタグマネージャでイベントトラッキングを設定する手順

Googleタグマネージャを利用しているときは、トリガーを起点として、トラッキングタイプ「イベント」用のGoogleアナリティクスタグを登録します。

関連記事：Googleタグマネージャーの使い方

例として、/blog/ 以下のページに、次のようなバナー画像があるとします。

<a class="banner" href="..."><img src="..."></a>

このバナー画像をクリックしたときにイベントを送信するには、Googleタグマネージャーで次のように「トリガー」と「タグ」を設定します。

トリガーの設定

「/blog/ 内にあるバナー画像をクリック」したときに発動するトリガーを作成します。

[トリガー]-[新規]メニューでトリガー作成画面を開き、次のように設定します。

任意のトリガー名を入力します。
[トリガーのタイプ] は [クリック – リンクのみ] を選択します。
[このトリガーの発生場所] は [一部のリンククリック] を選択します。
1つ目のイベント条件を指定します。
1. 一番左のフィールドは [組み込み変数]-[Click Classes] を選択します。
2. 真ん中のフィールドは [含む] を選択します。
3. 一番右のフィールドに banner を入力します。
+ボタン通して、2つ目のイベント条件を指定します。
1. 一番左のフィールドは [組み込み変数]-[Page Path] を選択します。
2. 真ん中のフィールドは [先頭が一致] を選択します。
3. 一番右のフィールドに /blog/ を入力します。

[保存]ボタンを押すと、トリガーが作成されます。

タグの設定

次に、トリガーが発動したときに、Googleアナリティクスにイベントを送信するタグを作成します。

[タグ]-[新規]メニューでタグ作成画面を開き、次のように設定します。

任意のタグ名を入力します。
[タグの種類] は [Googleアナリティクス: ユニバーサルアナリティクス] を選択します。
[トラッキングタイプ] は [イベント] を選択します。
イベントトラッキングパラメータを指定します。
1. カテゴリに banner を入力します。
2. アクションに click を入力します。
3. ラベルに seminar2020 を入力します。
4. [非インタラクションヒット] は [真] を選択します。
[Googleアナリティクス設定] でトラッキングIDが設定された変数を選択します。
[配信トリガー] として先ほど作成したトリガーを選択します。

[保存]ボタンを押すと、タグが作成されます。

Googleタグマネージャーでのイベントトラッキングは、イベントごとにトラッキングIDを指定する必要があります。IDの入力ミスなどを防ぐためには、「設定変数」を追加してトラッキングIDを登録しておくとよいでしょう。

引用元：Google アナリティクス設定変数 – タグマネージャーヘルプ

イベントトラッキングの動作確認

Googleアナリティクスで確認

Googleアナリティクスのリアルタイムレポートで確認します。

リアルタイムレポートでは、イベントカテゴリ・イベントアクション・イベントラベルが確認できます。

イベントラベルを確認するには、イベントカテゴリをクリックします。

なお、Googleタグマネージャーの場合は、プレビューモードにしてから対象ページにアクセスしてみてください。

Google Analytics Debuggerで確認

リアルタイムレポートで見たとき、イベント発生していないようなら、次はChrome拡張機能「Google Analytics Debugger」で原因を調査します。
Googleタグマネージャーのデバッグ機能を使う方法もありますが、リンクのクリックイベントをテストすると、デバッグ情報がすぐに消えてしまいます。そのため、ページ遷移に影響しない、Google Analytics Debuggerをお勧めします。