アクセス解析ツール「アナトミー」

ANATOMY BLOG

Googleアナリティクスを「見える化」するアクセス解析ツール「ANATOMY(アナトミー)」のブログです

2020-04-22

Googleアナリティクスのイベントトラッキング設定 | Googleアナリティクス

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

イベントトラッキングは、JavaScriptコードをページに埋め込むか、タグマネージャーで設定します。

この記事では、イベントトラッキングを行うための設定を解説します。

1. イベントトラッキングとは?

Googleアナリティクスで、バナーのクリック数やファイルのダウンロード数を測定するには、Googleアナリティクスの「イベント」を使います。イベントを計測するためには、測定するページにイベント計測用のトラッキングコードを追加します。

このようにイベントを計測することを「イベントトラッキング」と呼びます。

2. イベントトラッキングで測定できること

ページを遷移せずにユーザーが行ったことが測定できます。

たとえば、次のようなことができます。
  • バナー画像のクリック
  • 動画再生ボタンのクリック
  • 電話リンクのクリック
  • PDFファイルのダウンロード
  • 広告の画面内への表示
  • ページの画面スクロール
JavaScriptを使ってイベントの送信タイミングを制御するので柔軟性が高く、上記以外にも、さまざまな計測ができます。

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

3. イベントトラッキングに必要になる項目

イベントトラッキングを行うには、イベントに関連する5つの項目を何にするか、決めておく必要があります。
  • イベントカテゴリ
  • イベントアクション
  • イベントラベル
  • イベント値
  • 非インタラクション
これらの項目は、Googleアナリティクスのレポートに表示されたり、計算値に関連するものです。

2-1. イベントカテゴリ

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

(例)banner, video, popup, trial など

2-2. イベントアクション

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

(例)click, play, download など

2-3. イベントラベル

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

(例)seminar2020sidebar, anatomy-intro.pdf, 1075692 など

2-4. イベント値

0以上の整数です。動画の再生時間(秒数)や、カートに追加した商品の金額など、イベントの情報に数値を含めたいときに使います。

必要がなければ、設定しなくてOKです。

(例)240, 1980 など

2-5. 非インタラクション

「非インタラクション」は分かりにくい言葉ですが、直帰率の計算に影響する項目です。イベントトラッキングの中では影響範囲が大きい項目なので、注意が必要です。

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

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

3. イベントトラッキングのためのトラッキングコード

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

3-1. グローバルサイトタグの場合

グローバルサイトタグ(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

3-2. Googleタグマネージャの場合

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

例として、/blog/ 以下のページに、次のようなバナー画像があるとします。
<a class="banner" href="..."><img src="..."></a>
このバナー画像をクリックしたときにイベントを送信するには、Googleタグマネージャーで次のように「トリガー」と「タグ」を設定します。

3-2-1. トリガーの設定

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

[トリガー]-[新規]メニューでトリガー作成画面を開き、次のように設定します。
  1. 任意のトリガー名を入力します。
  2. [トリガーのタイプ] は [クリック - リンクのみ] を選択します。
  3. [このトリガーの発生場所] は [一部のリンククリック] を選択します。
  4. 1つ目のイベント条件を指定します。
    1. 一番左のフィールドは [組み込み変数]-[Click Classes] を選択します。
    2. 真ん中のフィールドは [含む] を選択します。
    3. 一番右のフィールドに banner を入力します。
  5. +ボタン通して、2つ目のイベント条件を指定します。
    1. 一番左のフィールドは [組み込み変数]-[Page Path] を選択します。
    2. 真ん中のフィールドは [先頭が一致] を選択します。
    3. 一番右のフィールドに /blog/ を入力します。
[保存]ボタンを押すと、トリガーが作成されます。

3-2-2. タグの設定

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

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

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

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

    4-1. Googleアナリティクスで確認

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

    リアルタイムレポートでは、イベントカテゴリ・イベントアクション・イベントラベルが確認できます。
    イベントラベルを確認するには、イベントカテゴリをクリックします。
    なお、Googleタグマネージャーの場合は、プレビューモードにしてから対象ページにアクセスしてみてください。

    4-2. 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のコンソールへ、Googleアナリティクスへイベントが送信されたことが記録されています。
    コンソールに何も表示されないなら、イベントが送信されていません。

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

    5. まとめ

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