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

2021年4月6日2021年9月6日

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

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

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

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

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

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

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アナリティクスの「行動」→「イベント」→「概要」を見れば良いです。

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

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

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

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

まとめ

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

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

ポイント