【Google Analytics】イベントトラッキングの設定方法を解説

【Google Analytics】イベントトラッキング機能
本記事にはPR広告が含まれています。

本記事にはPR広告が含まれています。掲載されている広告についての詳細はプライバシーポリシーをご参照ください。

今回はGoogleアナリティクスに登録したらまず初めにしておきたいことの1つであるイベントトラッキングの設定方法についてを解説していきたいと思います。

Googleアナリティクスのイベントトラッキングを設定しておくとボタンのクリック数などの計測をすることが出来るので、よりユーザーのサイト内での行動を把握することが出来ます。

なお、この記事では前世代の Google アナリティクス「ユニバーサルアナリティクス」を使用しています。

この記事を読むと分かること

  1. イベントトラッキング機能の概要、何が出来るのかについて
  2. トラッキングコードのバージョンの確認方法について
  3. イベントトラッキング用タグの基本形について
  4. イベントトラッキングの設定方法について
目次

イベントトラッキング機能とは?どんなことが出来るのか

悩んでいる女性の写真

Googleアナリティクスのイベントトラッキング機能とは、URLの遷移がなく通常であれば計測出来ないユーザーの行動を計測出来るようにする機能のことを言います。

ちなみにGoogleアナリティクスの初期設定では計測出来ないデータ・イベントトラッキング機能で計測出来るようになるデータには以下のようなものが含まれています。

イベントトラッキング機能で計測出来るようになる情報

  • PDFのダウンロードボタンが何回クリックされたのか?
  • 設置しているバナーが何回押されたのか?
  • 外部サイトへのリンクが何回クリックされたのか?

などなど。

なお、イベントトラッキングの設定をするにはHTMLファイル上にイベントトラッキング用タグを設置してあげる必要があります。

イベントトラッキングを設定する前にしなければならないこと

電卓を使用している女性の写真

イベントトラッキングを設定するにはイベントトラッキング用タグをHTMLファイルに追加していく必要があるのですが、このタグはGoogleアナリティクスのトラッキングコードのバージョン毎に異なる記述方法をしなければなりません

そこで、まずはご自身がWEBサイトに埋め込んでいるGoogleアナリティクスのトラッキングコードのバージョンを確認する必要があるのですが、トラッキングコードのバージョンはトラッキングコードを見れば分かります。

以下がトラッキングコードのバージョンとその確認方法です。

グローバルサイトタグ(第5世代) 2017年頃以降~

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

 gtag('config', 'GA_TRACKING_ID'); 
</script>

ハイライト部分がgtagの文字列で始まっていれば、2017年頃以降のバージョンのGoogleアナリティクスのトラッキングコードであるグローバルサイトタグと確認出来ます。

ユニバーサルサイトタグ(第4世代) 2014年~2017年頃

<!-- 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', 'UA-TRACKING-ID', 'auto'); 
ga('send', 'pageview'); 
</script> 
<!-- End Google Analytics -->

ハイライト部分がgaの文字列で始まっていれば、2014年~2017年頃のバージョンのGoogleアナリティクスのトラッキングコードであるユニバーサルサイトタグと確認出来ます。

その他(第1~3世代) 2005年~2014年頃

上記のいずれでもない場合は、第1~3世代(urchin.js、クラシックタグ、非同期タグ)のいずれかであると確認できます。

なおこれらのトラッキングコードは全て2016年までにサポートが終了しているものですので、まだこれらのトラッキングコードを使用している方はすぐに新しいバージョンに変更しておくことをおすすめします。

イベントトラッキング用タグの基本形

それではイベントトラッキング用タグの基本形についてです。以下がトラッキングコードのバージョン毎のイベントトラッキング用タグの基本形になります。

グローバルサイトタグの場合のイベントトラッキング用タグの基本形

イベントハンドラ="gtag('event', 'アクション名', {'event_category':'カテゴリ名','event_label': 'ラベル名','value': '値'});"

ユニバーサルサイトタグの場合のイベントトラッキング用タグの基本形

ユニバーサルサイトタグの場合のイベントトラッキング用タグの基本形
イベントハンドラ="ga('send', 'event', [カテゴリ名], [アクション名], [ラベル名], [値]);"

微妙に記述方法が異なっていますが、記述しなければいけない要素については同じでそれぞれの意味については以下のようになります。

イベントトラッキング用タグの構成要素

  • イベントハンドラ – 必須項目
  • アクション名 – 必須項目
  • カテゴリー名 – 必須項目
  • ラベル名 – 任意項目
  • 値 – 任意項目

それぞれの構成要素の意味について

ペンを握っている男の先生の写真

イベントハンドラ – 必須項目

イベントハンドラユーザーのどんな行動をきっかけに計測を実行するのの設定が出来る項目です。イベントハンドラに記述できる内容の中でおそらく最もよく使われるものは「onClick」です。

イベントハンドラにonClickを記述するとクリックイベントが発生する度にクリック数の計測がされるようになります。

アクション名 – 必須項目

アクション名には、イベントハンドラで指定した行動によって起こるイベント・アクションを記述します。(アクション名の付け方は任意です。)

例えば、クリックすることでPDFがダウンロードされるといった場合であれば「download」としておいたり、電話ボタンがタップされる場合であれば「tel」としておくことで管理がしやすくなるかと思います。

カテゴリー名 – 必須項目

カテゴリー名は設置することでアクションの対象となるものをカテゴリー別に分けることができます。(カテゴリー名の付け方は任意です。)

例えばアクション名は「download」にしてカテゴリー名を「pdf」や「images」のように分けておくと、PDFファイルと画像(images)のダウンロード数を別々で計測することが出来るようになります。

ラベル名 – 任意項目

ラベル名カテゴリーをさらに細かく計測したい場合などに指定するもので、固有名詞(例: sample1.pdf)などを記述します。(ラベル名の付け方は任意です。)

なお、こちらは任意項目ですので省略しても問題ありません。

値 – 任意項目

には1回のアクションの価値などを数値で記述します。(値の付け方は任意です。)

こちらも任意項目ですので省略しても問題ありません。

イベントトラッキングの設定方法(例: PDFのダウンロード数の計測)

それではイベントトラッキング用タグを実際に埋め込んでいって、PDFのダウンロード数を計測する方法についてをご紹介していきたいと思います。

なお、こちらではグローバルサイトタグ(通称: gtag)を使用しているものとして解説していきます。

(STEP. 1) HTMLにタグを記述する

まずは、HTMLファイルにイベントトラッキング用タグを埋め込んでいきましょう。

計測したいダウンロードボタン箇所のaタグの属性にイベントトラッキング用タグを以下のように追加して下さい。

<a href="https://plusoneweb.net/wp-content/uploads/2021/04/sample.pdf" onclick="gtag('event', 'download', {'event_category':'pdf','event_label': 'sample.pdf','value': '1'});">PDFのダウンロード</a>

例: アクション名: download、カテゴリー名: pdf、ラベル名: sample.pdf、値: 1

これで該当するaタグがクリックされるとそのクリックされた回数が計測されるようになります。

なおクリックされた回数を確認するにはGoogleアナリティクスの「行動」→「イベント」→「概要」を見れば良いです。

Googleアナリティクス「行動」→「イベント」→「概要」画面

(STEP. 2) イベントをコンバージョンに設定する

次に設定したイベントをコンバージョンに設定しましょう。

これを設定しなくてもPDFのダウンロードボタンが押された回数の計測は出来るのですが、これを設定しておくとイベントのコンバージョン率等の計測や、どのページに設置してあるボタンがクリックされているのか(複数のページにダウンロードボタン設置している場合)などが分析出来るようになります。

なお「コンバージョンとは何か?」と思われた方やコンバージョンの設定方法についてを知りたい方は、以下の記事で解説しておりますのでこちらも合わせてご覧頂ければと思います。

まとめ

まとめです。今回はGoogleアナリティクスの基本機能では分からない「PDFのダウンロードが何回行われたのか?」「電話番号ボタンが何回押されたのか?」「外部ページへのリンクが何回押されたのか?」といった情報を計測できるようにする機能、イベントトラッキング機能の設定方法についてを解説しました。

イベントトラッキング機能を利用することでより詳細なユーザーの行動が理解できるようになるので、必要があれば設定をしておくことをおすすめします。

ポイント
  • イベントトラッキング機能とは、URLの遷移がなく通常であれば計測出来ないユーザーの行動を計測出来るようにする機能のことを言う。
  • イベントトラッキングの設定にはトラッキング用のタグをHTMLファイル内に記述する必要がある。
  • タグの基本形はGoogleアナリティクスのバージョンによって異なる。
  • トラッキングタグの構成要素には「イベントハンドラ」「アクション」「カテゴリー」「ラベル」「値」の5つがある。
  • イベントトラッキングを設定するには①HTMLにタグを記述し、②設定したイベントをコンバージョンに設定する必要がある。

今回は以上になります。最後までご覧頂き、ありがとうございました。

その他のGoogle Analyticsに関する記事

この他にも当サイトではGoogle Analyticsに関する記事を執筆しています。

気になった方はこちらも併せてご覧下さい。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

著者情報

Ryoのアバター Ryo サイト運営者

Web系フリーランス4年目。

WordPressを使った企業サイト制作・改修やSEOライティングを生業としています。

◾️スキルセット
HTML / CSS / SASS / JavaScript / jQuery / PHP / WordPress / Laravel(現在勉強中) / SEO / ライティングなど

目次