【バージョン別】Google Analyticsのイベントトラッキング設定方法

2019年7月11日

皆さん、こんにちは！制作部のマサラです。

Googleアナリティクスでこんなことをしたいと思ったことはありませんか？

外部サイトへのリンクのクリック数を測りたい。
電話番号のタップ数を測りたい。
サイト内のpdfファイルのダウンロード数を測りたい。

これらの情報は、通常ページビューとしては計測できないユーザー行動です。

このようなユーザー行動を計測したい場合には、イベントトラッキングを使用しましょう！

イベントトラッキングとは？
イベントトラッキングの設定項目について
イベントトラッキングの設定方法について
イベントトラッキングの動作確認方法

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

イベントトラッキングとは、設定したイベントが起きたときに追跡（トラッキング）してその情報を得る方法のことです。

これを利用することで、先ほど例に挙げたような、通常では取得できない「外部サイトへの流入数」「電話番号のタップ数」「pdfファイルのダウンロード数」などを取得することができるようになります。

このような情報を取得するには、ウェブサイトのソース（HTML）のタグを書き換えてあげる必要があります。

では、その方法について見ていきましょう！

イベントトラッキングの設定項目について

イベントトラッキングの設定には、「カテゴリ」「アクション」「ラベル」の3つが最低限必要です。

今回は、電話番号のタップを例に設定方法を見ていきましょう。

例）〇〇株式会社の「広島支店」の「電話番号リンク」を「タップ」された回数を計測したい。

カテゴリとは？

カテゴリとは、分析対象を分類するために指定する名前のことで、必須項目です。

ここでは、「電話番号リンク（tel-link）」をカテゴリにしましょう。

アクションとは？

アクションは、カテゴリに対するユーザーの行動のことで、必須項目です。

ここでは、スマホを想定して「タップ（tap）」をアクションにしましょう。

ラベルとは？

ラベルは、イベントをさらに細かく分類して計測したいときに使用するもので、推奨項目です。

ここでは、「広島支店（hiroshima）」をラベルにしましょう。

イベントトラッキングの設定方法について

【注意】トラッキングコードのバージョンによって設定方法が異なります！！

Googleアナリティクスのイベントトラッキングの設定で間違えやすいのは、使用しているGoogleアナリティクスのタグと、イベントトラッキングのタグが違うことです。

使用しているGoogleアナリティクスのトラッキングコードのバージョンに合った、イベントトラッキングの設定をしなければ計測ができないので、気をつけましょう。

gtag.jsでのイベントトラッキング設定方法

gtag.jsは、2017年から利用開始されたGoogleアナリティクスのトラッキングコードの最新版です。

gtag.jsの見分け方

以下のソースコードのように、「gtag」と含まれるものがgtag.jsです。

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

  gtag('config', 'UA-●●●●●●-●');
</script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-●●●●●●-●');

</script>

イベントトラッキングの書き方

下記のソースコードの「アクション」「カテゴリ」「ラベル」を適切な文言に書き換えて利用してください。

<a href="#" onclick="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル'});">～</a>

1	<a href="#" onclick="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル'});">～</a>

analytics.jsでのイベントトラッキング設定方法

analytics.jsはユニバーサルアナリティクスと呼ばれており、2014年から利用されています。

analytics.jsの見分け方

以下のソースコードのように、「analytics.js」と含まれるものがanalytics.jsです。

<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','//www.google-analytics.com/analytics.js','ga (http://www.google-analytics.com/analytics.js','ga)');

ga('create', 'UA-●●●●●●-●', 'auto');
ga('send', 'pageview');

</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','//www.google-analytics.com/analytics.js','ga (http://www.google-analytics.com/analytics.js','ga)');

ga('create', 'UA-●●●●●●-●', 'auto');

ga('send', 'pageview');

</script>

イベントトラッキングの書き方

下記のソースコードの「アクション」「カテゴリ」「ラベル」を適切な文言に書き換えて利用してください。

<a href="#" onClick="ga('send','event','カテゴリー','アクション','ラベル');">～</a>

1	<a href="#" onClick="ga('send','event','カテゴリー','アクション','ラベル');">～</a>

ga.jsでのイベントトラッキング設定方法

ga.jsは、2007年に利用開始され、ga.js（非同期）が2009年に利用開始されました。

ga.jsの見分け方

以下のソースコードのように、「ga.js」と含まれるものがga.jsです。

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-●●●●●●-●");
pageTracker._trackPageview();
} catch(err) {}
</script>

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

try{

var pageTracker = _gat._getTracker("UA-●●●●●●-●");

pageTracker._trackPageview();

} catch(err) {}

</script>

<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-●●●●●●-●']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
   
</script>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-●●●●●●-●']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

イベントトラッキングの書き方

下記のソースコードの「アクション」「カテゴリ」「ラベル」を適切な文言に書き換えて利用してください。

<a href="#" onClick="_gaq.push(['_trackEvent', 'カテゴリー', 'アクション', 'ラベル']);">～</a>

1	<a href="#" onClick="_gaq.push(['_trackEvent', 'カテゴリー', 'アクション', 'ラベル']);">～</a>

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

Googleアナリティクスでイベントトラッキングのデータが取得できているか確認するには、「レポート＞リアルタイム＞イベント」から確認してみてください！

詳しい検証方法については、以下にまとめましてのでご覧くださいね！

イベントトラッキングの動作確認方法をチェックする。

AUNで修正依頼・作業指示を効率化しませんか？

AUNは付箋紙の感覚でサイトや画像にメモを貼って、共有できるツールです。
専用ソフトのダウンロードも不要で、無料でご利用いただけます。

登録不要・無料の修正指示ツール
AUN あうんを使ってみる