ユーザーのアクションをさらに可視化する、Google アナリティクスのイベントトラッキングの設定方法と活用例

この記事は最終更新日から約5年が経過しています。

Webサイト上におけるユーザーの行動や、そこからどれだけ売上に繋がったか、売上に繋がったユーザーのサイト内行動パターンや属性はどういったものかなどを可視化するために、Google アナリティクスを導入しているウェブサイトは多いと思います。

ユーザーの行動がサイト内のページ遷移で完結するのであれば、デフォルト設定のGoogle アナリティクスで把握が可能です。しかしながら、例えば資料などファイルのダウンロードや電話ボタンのタップなど、ページの遷移を伴わないユーザー行動も多くあります。これらもサイトにおいて行われる重要なユーザー行動であるため、ぜひ計測しておきたいところですよね。

Google アナリティクスでは、イベントトラッキングと呼ばれる設定を行うことで、ページ閲覧以外のアクション計測するための仕組みが用意されています。本記事では、ウェブサイトでのユーザーの行動をさらに明らかにする、イベントトラッキングの設定方法と活用例をご紹介します。

※イベントトラッキングの設定については、トラッキングコードがanalytics.jsとgtag.jsのそれぞれの場合について解説いたします。

イベントトラッキングの設定方法
トラッキングコードがanalytics.jsタイプなのかgtag.jsタイプなのか判別する
- analytics.jsタイプの場合
- gtag.jsタイプの場合
onClickコードを追加する(analytics.jsの場合)
onClickタグの記入例(analytics.jsの場合)
- 予約専用ダイヤルへの電話番号リンクに実装したい場合のonClickタグ記入例
- 資料ダウンロード用リンクに実装する場合
onClickコードを追加する(gtag.jsの場合)
onClickタグの記入例(gtag.jsの場合)
イベントを目標に設定する方法
イベントの確認方法
イベントのデータを広告にも活用する
最後に

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

イベントトラッキングを行うためには、タップをして通話を開始させる電話番号リンクや、資料のダウンロードリンクがクリックされたといったユーザーのアクションを、Google アナリティクスに送信するためのonClickタグと呼ばれるコードをサイト上に実装する必要があります。

※前提条件として、イベントトラッキングを設定するページに、Google アナリティクスの計測タグが設置されている必要があります。

トラッキングコードがanalytics.jsタイプなのかgtag.jsタイプなのか判別する

Googleアナリティクスのトラッキングコード、下記の部分を確認することで判別可能です。

analytics.jsタイプの場合

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

トラッキングコードのハイライトしている6行目に「https://www.google-analytics.com/analytics.js」の記述がある場合はanalytics.jsタイプのトラッキングコードになります。

gtag.jsタイプの場合

<!-- 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>

トラッキングコードのハイライトしている2行目に「https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID」の記述がある場合はgtag.jsタイプのトラッキングコードになります。

onClickコードを追加する(analytics.jsの場合)

下記のイベントトラッキング用のタグ（onClickタグ）を計測するリンクやボタンに追加します。

onClick=ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue]);

それぞれの変数が示す内容は次のとおりです。

eventCategory (値の型：テキスト)※必須

イベントを分類するための名称を入れます。例えば電話タップの場合は「tel」、資料ダウンロードリンクの場合は「download」など任意の名前をつけます。

eventAction (型の値：テキスト) ※必須

どのような行動か分類するための名称を入れます。例えばリンクをクリックする場合は「click」、動画再生の場合は「play」など任意の名前をつけます。

eventLabel (型の値：テキスト)※任意

イベントを細かく分類するための名称を入れます。例えばボタンが複数ある場合、「head_button」、「bottom_button」など任意の名前をつけます。

eventValue (型の値：整数)※任意

1回のクリックに対しての価値を設定できます。平均成約単価が10万円で、電話問い合わせからの成約率が20%だとした場合には、電話タップ（＝1イベント）における価値は2万円とした見込み売上を価値として設定するといったことも可能です。

補足：任意入力となっている変数は省略可能です

onClickタグの記入例(analytics.jsの場合)

予約専用ダイヤルへの電話番号リンクに実装したい場合のonClickタグ記入例

onClick="ga('send', 'event', 'tel', 'tap', 'reservation', ‘0’);

各変数に対する値は特に決められていないので、Google アナリティクス上で識別しやすいような名称をつけておくと分かりやすいです。

ピンチアウトしてご確認ください。

変数名	値の例	説明
eventCategory	tel	電話のトラッキングに分類したいので「tel」という名称に設定
eventAction	tap	タップ回数を計測したいので「tap」という名称に設定
eventLabel	reservation	予約専用番号であることを識別するために「reservation」という名称に設定
eventValue	0	予約あたりの価値を設定しない場合は0を設定するか省略

実際に実装した場合の例

※ 赤色の箇所がイベントトラッキングタグです

資料ダウンロード用リンクに実装する場合

onClick="ga('send', 'event', 'download', 'click', 'introduction’);

ピンチアウトしてご確認ください。

変数名	値の例	説明
eventCategory	download	ダウンロードに分類したいので「download」という名称に設定
eventAction	click	ダウンロードクリックの数を計測したいので「click」という名称に設定
eventLabel	companyprofile	会社案内がダウンロードされたことを識別するために「companyprofile」という名称に設定
eventValue	0	ダウンロードあたりの価値を設定しない場合は0を設定するか省略

実際に実装した場合の例

<a href="http://xxxxx/companyprofile.pdf" onClick="ga('send', 'event', 'download', 'click', ' companyprofile');">会社概要のダウンロードはこちら</a>

※ 赤色の箇所がイベントトラッキングタグです

onClickコードを追加する(gtag.jsの場合)

下記のイベントトラッキング用のタグ（onClickタグ）を計測するリンクやボタンに追加します。

onClick=gtag('event', 'event_name', {['event_category': 'categoryName'], ['event_label': 'labelName'], ['value': 'actual_value'] });

それぞれの変数が示す内容は次のとおりです。

event_name (値の型：テキスト)※必須

categoryName (型の値：テキスト) ※任意

labelName (型の値：テキスト)※任意

イベントを細かく分類するための名称を入れます。例えばボタンが複数ある場合、「head_button」、「bottom_button」など任意の名前をつけます。

actual_value (型の値：整数)※任意

補足：任意入力となっている変数は省略可能です

onClickタグの記入例(gtag.jsの場合)

予約専用ダイヤルへの電話番号リンクに実装したい場合のonClickタグ記入例

onClick="gtag('event', 'tap', {'event_category': ‘tel', 'event_label': 'reservation', 'value': '0'});"

各変数に対する値は特に決められていないので、Google アナリティクス上で識別しやすいような名称をつけておくと分かりやすいです。

ピンチアウトしてご確認ください。

変数名	値の例	説明
event_name	tap	タップ回数を計測したいので「tap」という名称に設定
categoryName	tel	電話のトラッキングに分類したいので「tel」という名称に設定
labelName	reservation	予約専用番号であることを識別するために「reservation」という名称に設定
actual_value	0	予約あたりの価値を設定しない場合は0を設定するか省略

実際に実装した場合の例

※ 赤色の箇所がイベントトラッキングタグです

資料ダウンロード用リンクに実装する場合

onClick="gtag('event', click, {'event_category': ‘download, 'event_label': 'companyprofile', 'value': '0'});"

ピンチアウトしてご確認ください。

変数名	値の例	説明
event_name	click	ダウンロードクリックの数を計測したいので「click」という名称に設定
categoryName	download	ダウンロードに分類したいので「download」という名称に設定
labelName	companyprofile	会社案内がダウンロードされたことを識別するために「companyprofile」という名称に設定
actual_value	記入しない	ダウンロードあたりの価値を設定しない場合は0を設定するか省略

実際に実装した場合の例

<a href="http://xxxxx/companyprofile.pdf" onClick="gtag('event', click, {'event_category': ‘download, 'event_label': 'companyprofile', 'value': '0'});">会社概要のダウンロードはこちら </a>

※ 赤色の箇所がイベントトラッキングタグです

イベントを目標に設定する方法

①Googleアナリティクスにログインし、左メニューから「管理」をクリックします。

②ビューの「目標」をクリックします。

③「＋新しい目標」をクリックします。

④「目標設定」から任意のものを選択します。(ここでは「問い合わせ」を選択)

⑤「続行」をクリックします。

⑥「目標の説明」で任意の名前を入力します。

⑦目標スロットを選択します。

⑧タイプは「イベント」を選択します。

⑨「続行」をクリックします。

⑩「イベント条件」はイベントトラッキングのタグと同様の情報を入力します。

例えばonClick="ga('send', 'event', 'tell', 'tap', 'reservation');”の場合、次のように入力します。

カテゴリ：tell
アクション：tap
ラベル：reservation

⑪「コンバージョンの目標値としてイベント値を使用」で「はい」を選択します。

⑫「保存」をクリックします。

以上で目標の設定は完了です。

イベントの確認方法

イベントは、Google アナリティクスの管理画面の「行動」の項目で確認することができます。

①左メニューの「行動」から「イベント」を選択し、「概要」をクリックします。

サマリー画面で②イベントを選択すると、③にて②で指定したイベントの内訳を確認することができます。

イベントのデータを広告にも活用する

イベントのデータを使うことで、Google アナリティクスのユーザーリスト作成で特定のイベント達成したユーザーのリストを作成し、そのリストのユーザーに対してリマーケティング広告や検索向けリマーケティング (RLSA) の配信をすることが可能です。

例えば、Webサイトから資料をダウンロードしたユーザーは、直接の売上にはつながらなかったものの、その後の成約の可能性が高いユーザーだと考えられます。資料ダウンロードリンクをクリックしたユーザーに向けて製品のリマーケティング広告を配信することで製品購入に繋がる可能性があります。

今回の例ではリンクのクリックをイベントとしてカウントしていましたが、商品をカートに追加するボタンのクリックをトラッキングすることで、商品をカートに入れたがカートのページには移動していないユーザーをリスト化することもできます。これは、Google タグマネージャの利用が必須ですが、ページの読了率に応じてイベントを発生させることもできるので、単品通販でよく使われる単一のランディングページをどこまで読み進めたかでリスト化したりすることも可能です。

参考：複雑なGoogleアナリティクスリマーケティングで簡単に成果を上げる5つの手法と設定方法

参考：「どのキーワードに出す？」から「誰に出す？」で大きく成果が変わる、検索広告向けリマーケティング(RLSA)の解説と設定方法

参考：Googleタグマネージャへ新たに「スクロール距離」トリガーと「要素の表示」トリガーが登場

最後に

ここまででご紹介してきましたように、イベントトラッキングの設定を行うことによって、Webページ上で行われたユーザーのアクションを可視化できるようになります。

例えば電話の問い合わせが多いウェブサイトでは、どのような参照元から流入したユーザーが最も電話をかけるのか把握できたり、資料のダウンロードボタンが複数あるウェブサイトでは、どのようなページを閲覧したユーザーにその資料がダウンロードされているのか把握したりすることで、ウェブサイトの改善や広告の運用などに活かすことができます。

今回はページ以外のリンククリックをトラッキングする例をご紹介しましたが、その他にも入力フォームにカーソルを合わせたときなど、様々な「～した時」の動作をトリガーとして計測することも可能です。

もしページ遷移以外に可視化すべきWebサイト上のアクションがあるのならば、イベントトラッキングの設定を検討してみてはいかがでしょうか。