アナトミーBLOG
Googleアナリティクスや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でリンク先へ遷移させてます。

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

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

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

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

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

トリガーの設定

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

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

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

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

タグの設定

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

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

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

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

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

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

Googleアナリティクスで確認

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

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

リアルタイムレポート

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

リアルタイムレポートでイベントラベルを確認

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

Google Analytics Debuggerで確認

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

  1. Chromeに拡張機能「Google Analytics Debugger」をインストールします。
  2. GA Debugアイコンをクリックして、有効化します(”ON”になればOK)。
  3. 計測対象のページを開きます。
  4. F12キーで DevTools を開きます。
  5. [Console] タブを開きます。
  6. 設定アイコンをクリックし、[Preseve log]にチェックします。
DevToolsでPreserveLogをチェック

ここまで準備ができたら、計測対象のページにアクセスして、イベントが発生する操作を行います。

トラッキング設定が正しいときは、次のようにDevToolsのコンソールへ、Googleアナリティクスへイベントが送信されたことが記録されています。

DevToolsのコンソール

コンソールに何も表示されないなら、イベントが送信されていません。

グローバルサイトタグ(gtag.js)の場合はJavaScriptコードを、Googleタグマネージャーの場合はトリガーを見直してみてください。

イベントを目標として設定する

発生したイベントは、Googleアナリティクスの目標にも設定できます。Googleアナリティクスのコンバージョン分析機能が使えるようになるので、たとえばイベントが発生するまでのユーザーフローを分析できます。成果とみなせるイベントについては目標設定をお勧めします。

イベントを目標設定するには、以下の手順で行います。

  1. Googleアナリティクスの管理画面を開きます。
  2. ビュー列の[目標]をクリックします。
Googleアナリティクス管理画面
  1. [新しい目標]ボタンをクリックします。
目標一覧画面
  1. 目標の名前を入力します。
  2. 目標のタイプは「イベント」を選びます。
  3. [続行]ボタンをクリックします。
目標の説明
  1. 目標となるイベントのカテゴリ、アクション、ラベルを指定します。「値」は未記入で構いません。
  2. [保存]ボタンをクリックします。
目標の詳細

これで、イベントの目標設定が完了です。

イベントコンバージョンが発生したページを確認する

バナーのクリックやPDFダウンロードなど、複数のページで発生するイベントコンバージョンの場合、「イベントがどのページで発生したか」というのは重要な情報です。

アクセス解析&SEO分析ツール「アナトミー」のコンバージョン分析機能を使うと、設定したイベントコンバージョンが、どのページで何回発生したかが簡単にわかります。さらに、イベントコンバージョンの発生までのユーザー導線をアニメーションで再現してくれるので、視覚的にも理解が進みます。

まとめ

イベントトラッキングの設定を正しく行うには、トラッキングコードの設置が鍵になります。Chrome拡張機能「Google Analytics Debugger」は有効なツールなので、うまくいかないときの原因調査に使えます。ぜひイベントトラッキングに挑戦してみてください。

Page Top