COLUMNコラム

イベントトラッキングとは？複数の設定方法と確認方法を解説

ライティング

Googleアナリティクスを使用している方のなかには「イベントトラッキングという機能は使ったことがない」「このボタンのクリック数を知るためにイベントトラッキングを設定したい」「便利そうだけど設定が難しそう」といった疑問を感じている方は多いのではないでしょうか。

そこでこの記事では、

  • イベントトラッキングとは？設定するメリットとデメリット
  • イベントトラッキングの項目の説明と設定方法
  • イベントトラッキングが計測されない理由

以上の項目について分かりやすく解説していきます。

アクセス解析の参考となれば幸いです。

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

イベントトラッキングとは、通常のGoogleアナリティクスでは計測できないようなサイト内の行動を計測するための機能です。

イベントトラッキングを設定することで、

  • リンクボタンや電話ボタンのクリック数
  • PDFなどのファイルのダウンロード数
  • 外部サイトへ移動したときの行動
  • 記事の読了率

このようなサイト内のイベントを知ることができます。

さらに、イベントトラッキングは複数のイベントをトラッキングすることも可能です。

例えば、イベントトラッキングを設定することで「資料のダウンロードページへのリンククリック数は多いのに、ダウンロード数は少ない」という情報を知ることができます。

この情報により、ダウンロードページに問題があるのかもしれない、といった課題を発見する手がかりになります。

イベントトラッキングの仕組み

イベントトラッキングはどのような仕組みになっているのでしょうか。

サイト運営者が取得しようとしているイベントのタグをサイトに組み込むと、ユーザーのアクセスログがGoogleアナリティクスに送信されます。

Googleアナリティクスはそのデータを蓄積し、イベントデータを作成します。そして、作成したデータをアナリティクス上の管理画面でいつでも確認できるようにしているのです。

Googleアナリティクス上での確認方法については後述します。

イベントトラッキングのメリットとデメリット

これまで述べたように、イベントトラッキングには複数のメリットがあります。

  • Googleアナリティクス上では通常確認できないユーザーの行動を把握することができる
  • クリック数やダウンロード数などの数字を可視化することで、課題や目標設定の一助となる

しかし、以下のようなデメリットもあります。

  • タグの設置や検証などに手間と時間がかかる
  • 無料でデータ取得する際は上限数がある
  • 詳細な遷移フローまでは分からない

メリットとデメリットを確認し、運営しているサイトでイベントトラッキングを設定するか判断しましょう。

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

イベントトラッキングを導入したいが、設定方法が分からないという方も多いと思います。

そこで、ここでは実際に設定する手順を解説していきます。

イベントトラッキングを設定する際の準備

まず、Googleアナリティクスを導入した時期によって設置しているタグが異なります。

  1. gtag.js（グローバルサイトタグ）
  2. analytics.tag（ユニバーサルサイトタグ）

このどちらのタグが埋め込まれているか確認しましょう。

  1. gtag.js（グローバルサイトタグ）
    Googleアナリティクスを2017年移行に設置した場合に適用されているコードです。
    タグはGoogleアナリティクスの「管理→プロパティ→トラッキング情報」から確認することができます。

    <!-- Global Site Tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=〇〇〇"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '〇〇〇');
    </script>

    「〇〇〇」の部分にはUAから始まるトラッキングIDが入りますが、ここでは使用しませんのでスルーしてください。
    gtag.jsを使用しているサイトでは、以下のようなイベントトラッキング用タグを設置します。
    それぞれの項目については後述します。
    イベントハンドラ=”gtag(‘event’,’アクション’,{‘event_category’:’カテゴリ’,’event_label’:’ラベル’,’value’:’値’});
  2. analytics.tag（ユニバーサルサイトタグ）
    2014～2017年の間に設置した場合は、こちらのタグが適用されます。
    gtag.jsと同様に、Googleアナリティクスの「管理→プロパティ→トラッキング情報」から確認することができます。

    <!-- Google Analytics -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', '〇〇〇', 'auto');
    ga('send', 'pageview');
    </script>
    <!-- End Google Analytics -->

    「〇〇〇」の部分にはUAから始まるトラッキングIDが入りますが、ここでは使用しませんのでスルーしてください。
    analytics.tagを使用しているサイトでは、以下のようなイベントトラッキング用タグを設置します。それぞれの項目については後述します。
    イベントハンドラ=ga(‘send’, ‘event’, [カテゴリ], [アクション], [ラベル], [値]);

イベントトラッキングの項目

先述した通り、タグには様々な項目があります。

イベントトラッキング用のタグを作成するためには、次の5つの構成要素を理解しなければなりません。

これはgtag.jsとanalytic.jsのどちらも必要になります。

  1. イベントハンドラ（必須項目）
  2. アクション（必須項目）
  3. カテゴリ（必須項目）
  4. ラベル
  5. 値

それぞれがどのような意味なのかこれから解説していきます。

  1. イベントハンドラ（必須項目）
    イベントハンドラは、どのようなアクションがあった時に計測をするのか指定する項目です。
    例えば「onclick」は「マウスクリックをきっかけに以下の計測を実行する」という指令になります。
    他にも「onload」は「ページが読み込まれたら以下の計測を実行する」という指令になるなど、様々な種類の指令があります。
    自分の用途にあったものを選択しましょう。
  2. アクション（必須項目）
    アクションは、イベントハンドラで指定した行動をきっかけに起こる操作のことです。
    イベントハンドラが「onclick」でアクションが「tel」であれば「クリックして電話する」という意味になります。
    この項目は必須になりますが、記す内容は任意です。
    自分で確認した際に分かりやすいアクション名にしましょう。
  3. カテゴリ（必須項目）
    カテゴリはアクションの対象になります。アクションが「tel」でカテゴリが「button」であれば「ボタンを押して電話する」という意味になります。
    カテゴリもアクションと同様に必須項目ですが、記す内容は任意なので分かりやすい名前にしましょう。
  4. ラベル
    ラベルはイベントを補足するものです。
    例えば、複数の画像の中からどれをクリックしたか知りたい場合は、画像にそれぞれラベルで名前をつけておく必要があります。
    特に必要ない場合。こちらは省略しても構いません。
  5. 値
    値では、1回のアクションの回数や価値を数字で記述します。
    例えば、ダウンロードの回数をカウントしたい場合は「1」、商品購入などで1回のアクションに1000円の価値がある場合は「1000」と記載します。
    この項目もラベルと同様に省略することができます。

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

実際にイベントトラッキングを設定する方法を紹介します。

以下の2つの方法があるので、運営しているサイトに合わせて設定してください。

  • HTMLに直接設定
  • Googleタグマネジャー（GTM）で設定

HTMLに直接設定

HTMLにイベントトラッキングを直接設定する場合は以下の手順になります。

  1. サイトタグの設置（設置していない場合）
  2. イベントトラッキング用コードを作成
  3. 作成したコードを設置
  1. サイトタグの設置
    サイトタグを設置していない場合は、ここからスタートします。
    Googleアナリティクスを開き、「管理→トラッキング情報」から「トラッキングコード」を表示し、トラッキングコード全体をコピーします。
    コピーしたトラッキングコードを、運営しているサイトに貼り付けましょう。<head>と</head>で囲まれた部分の、</head>の直前に貼り付けます。
  2. イベントトラッキング用コードを作成
    イベントトラッキングの項目を設定して、コードを作成します。
    例えばお問い合わせリンクのクリック数を計測したい場合、

    イベントハンドラ「onclick」
    アクション「tel」
    カテゴリ「button」
    ラベル「お問い合わせ」
    値「1」

    このようになります。
    前述したように、イベントハンドラは代表的なものが決まっていますが、カテゴリとアクションは自分で決めた名前を入れることができます。
    ラベルや値は任意項目なので、必要がなければ省略しても構いません。
    gtag.jsでもanalytic.jsでも、「イベントハンドラ」「アクション」「カテゴリ」「ラベル」「値」の部分に上記の項目を入れていきます。
    gtag.jsの場合は、
    イベントハンドラ=”gtag(‘event’,’アクション’,{‘event_category’:’カテゴリ’,’event_label’:’ラベル’,’value’:’値’});
    これに上記の項目を入れます。

    <a href=”tel:電話番号”onclick=”gtag(‘event’,’tel’,{‘event_category’:’button’,’event_label’:’お問い合わせ’,’value’:’1’});”>お問い合わせはこちら</a>

    analytic.jsでは、
    イベントハンドラ=ga(‘send’, ‘event’, [カテゴリ], [アクション], [ラベル], [値]);
    これに上記の項目を入れます。

    <a href=”tel:電話番号”onclick=ga(‘send’, ‘event’,’buttom’, ‘tel’, ‘お問い合わせ’, ’1’);>お問い合わせはこちら</a>

    ここで「何か知らない文字が増えてしまった」と思った方もいらっしゃるかと思います。
    <a href=””></a>というのは、リンクのタグになります。
    一般的な書き方は、以下のようになります。

    <a href=”リンク先のURL”>アンカーテキスト</a>

    「アンカーテキスト」は、ブラウザ上に表示される文字になります。ホームページ名やサイトURL「ここをクリック」など、様々な言葉が入る部分です。
    今回はお問い合わせのリンクなので、「お問い合わせはこちら」としています。
    そして「リンク先のURL」の部分は、今回は「電話番号」に電話を掛けるという意味になる「”tel:電話番号”」の後ろにイベントトラッキング用タグを入力しています。
    電話番号のところは、数字で電話番号を入力してください。
    長くて難しいと感じるかもしれませんが、分解すると分かりやすくなります。
    まずはリンクのタグを使用して「リンクを押した時に電話番号に電話を掛けて」という命令を書いています。
    次にイベントトラッキング用タグを入れることで「このリンクを押したときに1回カウントして」という命令を追加していることになります。
    さらにアンカーテキストで「お問い合わせはこちら」とブラウザ上に表示させているということです。
  3. 作成したコードを設置
    作成したコードをサイトのHTMLに貼り付ければ完了です。

Googleタグマネジャー（GTM）で設定

ここからはもう1つの方法である、GTMについて解説します。
手順は以下の通りです。

  1. 変数を設定する
  2. トリガーを設定する
  3. タグを設定して設定を保存・公開する
  1. 変数を設定する
    GTMでイベントトラッキングを設定する際、変数を使えるように設定をします。
    「ワークスペース→変数→設定」を開きます。
    「クリック」「フォーム」などのカテゴリーに分かれているので、その中から有効にしたい変数にチェックを入れていきます。
  2. トリガーを設定する
    「ワークスペース→トリガー→新規」を開きます。「すべての要素」と「リンクのみ」の2つの項目があるので、選択しましょう。
    「リンクのみ」はリンクをクリックしたときのみ計測を行う場合に、「全ての要素」はリンク以外の画像などがクリックされたときも計測を行う場合に選択しましょう。
    次に「タグの配信を待つ」にチェックします。
    「これらすべての条件がtureの場合にこのトリガーを有効化」という項目があります。左から順番に「Page URL」「正規表現に一致」を選択、右枠には「*」を入力します。
    最後にトリガーの発生場所を設定します。
    「一部のクリックを選択した際に現れる入力画面に、左から「Click URL」「等しい」を選択します。右枠には計測したいURLを入力しましょう。
    保存すればトリガー設定は完了です。
  3. タグを設定するし、設定を保存・公開する
    「ワークスペース→タグ→新規」を選択します。
    タグタイプの中から「ユニバーサルアナリティクス」を選択します。
    トラッキングタイプで「イベント」を選択したら、前の項目で設定したイベントトラッキングの項目を入力しましょう。
    作成したトリガーを選択し、保存をクリックすれば完了です。

イベントをGoogleアナリティクスの目標に設定

ここまででイベントトラッキングを設定し、イベント数を集計出来るようになりました。

続いて、コンバージョン数などの目標設定をGoogleアナリティクスに設定しましょう。

Googleアナリティクスの設定画面から「ビュー→目標」から「＋新しい目標」を選択します。

目標設定の中から「カスタム」を選択し、必要な情報を入力します。

例えばお問い合わせのボタンをクリックした数を設定したい場合、イベントトラッキングで設定した項目と同じ内容を入力します。

以上で設定は完了です。

Googleアナリティクス上での結果の確認方法

最後にイベントの集計結果の確認方法を解説します。

Googleアナリティクスで表示されるのは、以下の4つです。

「行動→イベント→ページ」に移ると、グラフや表で確認することができます。

  • 合計イベント数
    発生したイベントの合計です。同じユーザーで2回イベントが発生した場合は2回とカウントされます。
  • ユニークイベント数
    同じセッション内で重複して発生したイベント数を合計イベント数から引いた数です。同じユーザーが複数回同じイベントが発生しても、1回と表示されます。
  • イベントの値
    イベントに設定した値を合計した数です。タグの項目で設定した値×合計イベント数で算出されます。
    例えば、値に1,000と設定し5回イベントが発生した場合、イベントの値は5000となります。
  • 平均値
    イベントに設定した値の平均値です。
    また、「行動→イベント→イベントフロー」からは、イベントがどのような順番で発生しているのかも確認することができます。

イベントトラッキングが計測されない理由

ここまでの手順で、イベントトラッキングを設定して結果を確認しても上手く反映されていない場合があります。

その場合は、以下の3つの原因が考えられるでしょう。

  • イベントタグとトラッキングコードのバージョンが違う
  • イベントタグの単純な記述ミスがある
  • Googleアナリティクスが紐づけされていない

イベントタグとトラッキングコードのバージョンが違う

前述したように、Googleアナリティクスを導入した時期によって設置しているタグが異なります。
ここでバージョンに合ったタグを選択しなければ、イベントトラッキングは計測されません。

gtag.jsとanalytics.jsのどちらを使用するか、再度確認しましょう。タグはGoogleアナリティクスの「管理→プロパティ→トラッキング情報」から確認することができます。

イベントタグの単純な記述ミスがある

イベントタグで単純なスペルミスをしてしまった場合も、計測されない原因となります。

タグはコンマやスペースが抜けているだけでも正常に計測できません。非常に細かい違いとなるので、計測結果を確認したときに気が付く場合も多いでしょう。

改めて記入例を見比べるなどして、内容にミスがないか確認することが大切です。

Googleアナリティクスが紐づけされていない

Googleアナリティクスを開設するだけではイベントトラッキングを計測することができません。紐づけ作業が必要になります。

また、紐づけは出来ていてもタグ設定やタグの書き間違えがある可能性もあります。
合わせて確認してみましょう。

WordPressの場合

補足になりますが、WordPressを使用している場合は無料で使用できるツールがあります。
「WP Google Analytics Events」というプラグインです。

プラグインの名前をプラグイン追加のページから検索しましょう。

手順は以下の3つです。

  1. プラグインを開き、自分のアナリティクスコードを入力
  2. リンククリックの計測（リンクのHTMLにidを付与する）
  3. プラグインでイベントを設定
  1. プラグインを開き、自分のアナリティクスコードを入力
    プラグインのメニューから「WP GA Events」をクリックし、管理画面に進みます。
    続いて、Google Analytics Identifierに「UA-〇〇〇」のコードを入力しましょう「UA-〇〇〇」のコードはGoogleアナリティクスの「管理→プロパティ→トラッキング情報」から確認することができます。
    gtag.jsの場合はGlobal Site Tags code、analytic.jsの場合はUniversal Tracking Codeを選択します。
    最初からトラッキングコードが入力されている場合は、「Don’t add the GA tracking code」を選択しましょう。
  2. リンククリックの計測（リンクのHTMLにidを付与する）
    WordPressのテキスト内から、クリック数を計測したいリンクの記述を探します。
    見つけたらidを付与しましょう。classでも設定可能です。
    コードに詳しくない方は、idやclassは「選んだものに名前をつける」という認識で大丈夫です。
    例えば、以下のお問い合わせリンクのクリック数を計測するとします。

    <a href=”tel:電話番号”>お問い合わせはこちら</a>

    これにidを使用して問い合わせという意味の「inquiry」という名前をつけると、以下のようになります。

    <a id=”inquiry” href=”tel:電話番号”>お問い合わせはこちら</a>
  3. プラグインでイベントを設定
    「Click Tracking」からイベントを設定しましょう。これらを入力したら設定は完了です。
    • Element Name
      先ほど設定した名前を入力します。今回は「inquiry」です。
    • Type（属性種類）
      idを選択します。classを設定した場合はclassを選択してください。
    • Event Category（カテゴリー）
      任意のものを設定しましょう。イベントトラッキングの項目で設定したもので構いません。
    • Event Action（アクション）
      任意のものを設定しましょう。こちらもイベントトラッキングの項目で設定したもので構いません。
    • Evemt Label（ラベル）
      任意のものを設定しましょう。こちらもイベントトラッキングの項目で設定したもので構いません。

まとめ

今回の記事では、Googleアナリティクスのイベントトラッキングの設定手順について解説しました。

イベントトラッキングを活用することで、通常Googleアナリティクスでは計測することができないクリック数やダウンロード数も計測することができます。

計測よってユーザーの詳細な行動を把握することができるため、サイト運における有効な手助けとなるでしょう。

イベントトラッキングを設定してユーザーへの理解を深め、ユーザーファーストのサイト運営に努めましょう。

おすすめ記事

カテゴリ

コラム一覧に戻る