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

// gtag.jsの場合はこちら
<a href="#" onclick="gtag('event', 'download', {'event_category': 'pdf','event_label': 'link','value': '1'});">資料のダウンロード</a>

// analytics.jsの場合はこちら
<a href="#" onclick="ga('send', 'event', 'pdf', 'download', 'link', 1);">資料のダウンロード</a>

Googleアナリティクスで特定のボタンをどれくらいクリックしたかを取得したい場合は、「イベントトラッキング」という方法でaタグに属性を仕込む必要があります。
タグの種類によってやり方が違ったり、ややこしいので、今回はイベントトラッキングの方法についてまとめておきます。

Googleアナリティクスのイベントトラッキング方法

Googleアナリティクスのイベントトラッキングは、トラッキングコードによって記述が変わるのと、最近はGoogle タグマネージャーでも設定ができるようになっています。

• gtag.jsのパターン（2017年以降にGoogleアナリティクスを設置した場合）
• analytics.jsのパターン（2017年より前にGoogleアナリティクスを設置した場合）
• Google タグマネージャーで設定するパターン

Google タグマネージャーで設定するパターンに関しては、別途記事にするので、今回はGoogleアナリティクス単体で設定する方法について紹介します。

Googleアナリティクスのトラッキングコードを確認する

2017年以降か、それより前かでGoogleアナリティクスのトラッキングコードが違っています。
トラッキングコードを見て、設定するサイトがどちらのバージョンなのか確認するようにしましょう。

gtag.js（グローバルサイトタグ）の場合は下記のようなコードになっています。
「gtag」というキーワードが入っているので、検索して確認ができます。

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

逆に、下記のように「gtag」というキーワードが入っていない場合は、analytics.js（ユニバーサルサイトタグ）という1つ前の世代の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', 'トラッキングID', 'auto'); 
ga('send', 'pageview'); 
</script> 
<!-- End Google Analytics -->

運用しているサイトのタグがどちらなのか確認できたら、イベントトラッキングの設定をします。

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

イベントトラッキングを設定するためには、設定したいリンクのHTMLにトラッキング用のコードを追加します。
gtag.jsの場合とanalytics.jsの場合で書き方が違っていて、使用しているGoogleアナリティクスと対応していないと正常に動作しないので注意しましょう。

gtag.jsの場合

gtag.jsの場合は下記のようにコードを設定します（aタグ以外でも使えますが、実際に使うときはaタグの場合がほとんどのはずです）。

<a href="#" onclick="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル','value': '値'});">資料のダウンロード</a>

analytics.jsの場合

analytics.jsの場合は下記のコードを設定します。

<a href="#" onclick="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', 値);">資料のダウンロード</a>

各設定項目

イベントトラッキングを設定するときに必要な項目は下記の5つで、これはgtag.jsでもanalytics.jsでも同じですが、指定する順番が違うので、上記のコードをよく見て、間違えないように設定しましょう。

• イベントハンドラ（必須）
• アクション（必須）
• カテゴリ（必須）
• ラベル（省略可能）
• 値（省略可能）

イベントハンドラ

先ほどのサンプルで、「onclick」となっている部分のことで、ここに指定したアクションが実行されたときにGoogleアナリティクスにイベントが計測されます。
基本的には「onclick」を指定して、クリックしたときに発火するようにしておきます。

アクション

アクションには「download」や「open」「call」などの「クリックしたときに起こる○○」のようなアクション名を書きます。
ただし、何を書くかは自由なので、後から自分が見るときに分かりやすいアクション名にします。

自分の場合は、なんとなく「動詞を記述する」イメージがあります。

カテゴリ

カテゴリにはアクションの対象を入力します。
アクションが動詞なのに対して、カテゴリはその目的語になるイメージがあります。

具体的な例としては、アクションが「download」の場合は「pdf」「image」などの何のファイルをダウンロードするのかを記述したり、「open」なら「contact」、「call」なら「tel」のようなイメージです。

とはいえ、こちらも何を書くかは自由なので、後から自分が見るときに分かりやすければOKです。

ラベル

ラベルには、カテゴリの詳細情報を書いたり、イベントをより細かく分類したいときに記入します。
例えば、ダウンロードする資料のファイル名や、別ページに遷移するリンクには「link」というラベルを付けて、あとで集計をしやすくしたりします。

省略可能なので、分類が不要な場合は省略してしまっても問題ありません。

値

値が少し分かりにくいのですが、1回のアクションの回数や価値を数字で記述します。
基本的には単純に1クリックという意味で「1」を記述することが多いです。

他にも、値段を数字で記述したり、資料ダウンロードが複数ある場合は「その後のユーザーの行動に貢献しそうな資料は価値を上げる」「それ以外の資料請求は価値を下げる」という風に、入力する数字を変えておいたりもできます。

こちらも省略可能ですが、とりあえず「1」を設定しておいてよさそうです。

具体例

完全にコピペで使える例を用意しておきます。

gtag.jsの場合は下記になります。

<a href="#" onclick="gtag('event', 'download', {'event_category': 'pdf','event_label': 'link','value': '1'});">資料のダウンロード</a>

analytics.jsの場合は下記になります。

<a href="#" onclick="ga('send', 'event', 'pdf', 'download', 'link', 1);">資料のダウンロード</a>

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

イベントトラッキングの確認は、Googleアナリティクスの［行動］→［イベント］→［概要］で確認ができます。

リアルタイムで確認したい場合は、［リアルタイム］→［イベント］で確認ができるので、本当に設定できているのか自分で確認したい場合は、試しにクリックして反映されるか見ればOKです。