GA4 / gtag.jsでイベントをトラッキングする方法【HTML, JavaScript】

GA4 (Googleアナリティクス 4) でカスタムイベントをコード記述によりトラッキングする方法を解説。クリックイベント(onclick, addEventListener)やページ閲覧イベントの計測方法、イベント名の命名規則、テスト方法などを紹介します。

GA4 (Googleアナリティクス 4) でカスタムイベントを計測する方法を調べても、管理画面を操作するという面倒な方法ばかり解説されていたので、「そうじゃないんだよな….」と思い、

この記事ではコードを書くだけの方法を記事にしました。

それでは、GA4 / gtag.js で独自のイベント（カスタムイベント）を計測する方法を解説します。

さっそくコードを紹介していきます。

１．クリックを計測する方法

クリックイベントを計測する際にはonclickをHTMLタグに挿入するのが一般的かつ簡単です。

例えばbutton要素のクリックを計測したい場合には、以下のように記述します

<button onclick="gtag('event','イベント名')">ボタン</button>

複数イベントを計測したい場合

複数イベントをgtagに計測したい場合には、下記のようにgtagを並べて記述します。この書き方でいくつでもイベントを計測できます。

<button onclick="gtag('event','イベント1'); gtag('event','イベント2');">ボタン</button>

HTMLタグに直接書きたくない or 書けない場合にはaddEventListenerを使う

HTML側に記述したくない場合には、 <script> 内にidを指定してトラッキングします。この記事では1つのHTMLファイルで表現していますが、もちろんjsファイルを別に分けてもOKです。

<button id="tracking-button">クリックを計測したいボタン</button>
 
<script>
// GA用のイベントトラッキングをfunctionとして記述
function trackClick(){
 gtag('event', 'イベント名');
}
 
// 要素を指定してクリックを受け取る
let foo = document.getElementById('tracking-button');
foo.addEventListener('click', trackClick);
</script>

※ 複数イベントを計測したい場合には、functionの中にgtag('event', 'イベント名2'); のように一行追加すればOKです。

※ HTMLタグにidが付与されていない場合には、document.querySelectorを活用します。詳しくはこちらの記事をご覧ください。

その他の方法

そのほかにも関数をtrackClickとして用意して、クリック時にその関数を実行する方法とかがあります。コードに慣れている人にとっては普通のことですが。

<button onclick="trackClick();">クリックを計測したいボタン</button><script>
// GA用のイベントトラッキングをfunctionとして記述
function trackClick(){
 gtag('event', 'イベント名');
}
</script>

２．ページ閲覧を計測する方法

ページの閲覧を計測したい場合には、GA管理画面からも設定できますが、コードで記述する場合には、ページの <body> 内に以下を記述します。

<script>
 gtag('event','イベント名');
</script>

通常はイベント名は「page_view_event_name」のように「page_view」とGA公式の名付け方に従うと良いでしょう。

（正直GA公式に従う必要は無いとは思いますが、一応。）

イベント名はどうすべき？

イベント名の名付け方法は「英語小文字とアンダーバー」のみが基本です。

クリックイベントは、「 click_○○」と記述するのが一般的で、ページ閲覧イベントは「page_view_○○」と記述するのが一般的です。

たとえば、

<!--ボタンのクリックを計測-->
<button onclick="gtag('event','click_button')">ボタン</button>

<!--購入リンクのクリックを計測-->
<button onclick="gtag('event','click_buy')">購入</button>

<!--ログインボタンのクリックを計測-->
<button onclick="gtag('event','click_login')">ログイン</button>

<!--購入完了後ページの閲覧を計測-->
<script>
  gtag('event','page_view_purchase_completed');
</script>

という感じです。

ボタンのクリックを計測することを正確に記述したい場合にはイベント名を「click_button_buy」のように記述するのも良いでしょう。

イベント計測できているかチェックする方法

自分が記述したイベントトラッキングが正常に計測されるかどうか検証するカンタンな方法があります。

テスト用に仮のイベントを発火すれば良いのです。

たとえば、イベント名を「test_event」として実際に実行してしまいます。

その後、Googleアナリティクスの管理画面にアクセスして「レポート」→「リアルタイム」に移動してください。

「リアルタイム」では、10秒前くらいのイベントなら既に「イベント」として表示されているはずです。表示されていない場合には最長1分ほどは待ちましょう。

※ ローカル環境だとイベントトラッキングは正常に反応しないことがあるようです。

テストイベントを発火したくない場合

エンジニアの方からするとテストイベントを発火させて実際のGAに入れるのは気持ち悪いと思います。

そんな方はDebugViewというのをGA4が提供してくれていますので、こちらをご覧ください。

[GA4] DebugView でイベントをモニタリングする

上手く計測できない場合のチェックリスト

上手く計測できない場合には、以下の項目をチェックしてみてください。

トラッキングコード（グローバルサイトタグ）を正しく設置しているか？

<head> タグ内に GA のトラッキングコード（グローバルサイトタグ）を正しく設置しているか？をチェックしてください。

参考:

サイトに gtag.js を追加する | ウェブ向けユニバーサルアナリティクス（gtag.js） | Google Developers

GAのタグのバージョンが古くないか？

この記事で紹介しているのは gtag.js という最新版のみです。

古いもの（analytics.js）は記述方法が異なります。

参考:

analytics.js から gtag.js に移行する | ウェブ向けユニバーサルアナリティクス（gtag.js） | Google Developers

ローカル環境ではないか？

ローカル環境だとイベントが正常に計測されないことがあるようです。

通常のpage_viewやsession_startなんかは計測されるのですが、カスタムイベントは計測されないことがあります。

【応用編】イベントにcategoryやlabelを付与する

イベントを計測する際に、「category」や「label」として追加情報を付与することができます。

もしあなたが大規模なメディアを運営していて、大量のイベントを送信している場合にはcategoryやlabelを活用するとイベントを整理して管理できます。

ただし、個人的には、ほとんどの場合にはこの機能は使う必要はないと考えています。逆にややこしくなるからです。

記述方法は以下のとおり。

<script>
gtag('event', 'イベント名', {
  'event_category': 'カテゴリ名',
  'event_label': 'ラベル名'
});
</script>

詳しくは公式ページをご覧ください。

Google アナリティクスのイベントを測定する | ウェブ向けユニバーサルアナリティクス（gtag.js） | Google Developers

※ event_categoryは何も記述せずに送信すると 'general' として計測されます。

以上です。

GA4 / gtag.jsでイベントをトラッキングする方法【HTML, JavaScript】

On this page