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

GA4 (Googleアナリティクス 4) でカスタムイベントを計測する方法を調べても、管理画面を操作するという面倒な方法(少なくとも私にとっては)ばかり解説されていたので、コードを書くだけの方法を記事にしました。

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

1.クリックを計測する方法

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

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

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

 

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

1つのイベントだけでなく、いくつでもイベントを計測できます。

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

 

2.ページ閲覧を計測する方法

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

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

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

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

 

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

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

クリックイベントは、「 click_ 」と記述するのが一般的です。

たとえば、

<button onclick="gtag('event','click_button')">ボタン</button>
<button onclick="gtag('event','click_buy')">購入する</button>
<button onclick="gtag('event','click_login')">ログイン</button>

という感じです。

 

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

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

方法は2つありますが、簡単なほうを紹介します。

記述したイベントを実行したあとで、GA管理画面の「レポート」→「リアルタイム」にアクセスします。

すると、10秒前くらいのイベントなら既に「イベント」として表示されているはずです。

※これでは実際にGAのデータに入ってしまうのでテストイベントとしてイベント名を変えておくと良いでしょう。「 click_test 」のようなイベント名にしてまず確かめるのが良いでしょう。

この記事をシェア: