はじめに

ユーザーがボタンやタブ、リンクなどを実際に使用しているかを把握するために、イベントをトラッキングすることで確認することができます。
実際にイベントトラッキングを実装する機会があったので、調べたことをまとめます🪡

💡 この記事でわかること

トラッキングの仕組みと全体の流れ

トラッキングとは

トラッキングとは、ユーザーが行った操作をその内容を表す情報とともに記録することです。

記録する操作は イベント と呼ばれます。イベントには名前があり、その操作に関連する付加情報（プロパティ）を一緒に持たせることができます。
たとえば「ボタンがクリックされた」というイベントには、「どのボタンか」「どのアカウントが押したか」といった情報をプロパティとしてつけることができます。

トラッキングの全体像

トラッキングは以下のような流れで行われます。

Step 1：ユーザーがボタンをクリックしたことを JavaScript で受け取る
Step 2：「誰が・何を・いつ」行ったかをオブジェクトとしてまとめる
Step 3：整形したデータを HTTP リクエストでサーバーに届ける
保存・集計：サーバーに届いたデータはデータベースなどに保存される

Step 1：ブラウザでイベントを検知する

ユーザーがクリック・キー入力・スクロールなどを行うと、ブラウザはイベントを発行します。
このイベントを受け取るために addEventListener を使用します。

const button = document.querySelector('#signup-btn');

button?.addEventListener('click', (event) => {
  console.log('ボタンがクリックされました');
});

このコードを実行すると、#signup-btn というIDを持つボタンがクリックされるたびに、関数内の処理が実行されます。

第1引数：検知したいイベントの種類（"click"、"submit"、"keydown" など）
第2引数：イベントが発生したときに実行する関数

イベントオブジェクト

関数に渡される event は イベントオブジェクト と呼ばれ、「何が起きたか」に関する情報を持っています。代表的なプロパティは以下の3つです。

プロパティ	内容	例
`event.type`	イベントの種別を表す文字列	`"click"`、`"keydown"`
`event.target`	イベントが発生した要素への参照	`<button id="login-btn">`
`event.key`	押されたキーの値	`"a"`、`"Enter"`、`"Backspace"`

event.key は keydown などのキーボードイベント専用のプロパティで、クリックイベントには存在しません。

event.type と event.target

event.type と event.target を実際にコンソールで確認すると次のようになります。

button?.addEventListener('click', (event) => {
  console.log(event.type);   // "click"
  console.log(event.target); // クリックされたボタン要素
});

event.type はイベントの種別を表す文字列を返し、event.target はクリックされた要素そのものへの参照を返します。

event.key

event.key はキーボードイベントで使えるプロパティです。どのキーが押されたかを確認できます。

const input = document.querySelector('#search-input');

input?.addEventListener('keydown', (event) => {
  console.log(event.key); // 押されたキーの値
});

Step 2：送るデータを整形する

イベントを検知できたら、次は何の情報をサーバーに送るかを決めます。

トラッキングデータは 「イベント名」 と 「プロパティ（付加情報）」 の組み合わせで設計します。
イベント名は「何が起きたか」を大まかに表し、プロパティはその詳細を補足する役割を持ちます。

event_name がイベント名、account_id と created_at がプロパティにあたります。

const trackingData = {
  account_id: 'user-123',              // どのアカウントが操作したか
  event_name: 'click_login_button',   // 何が起きたか
  created_at: new Date().toISOString(), // いつ起きたか
};

トラッキングデータを後で使用する時に「何がどこで起きたか」がわかるように、イベント名は動作と場所の情報を入れるといいかと思います。

click ：動作（クリック）
login_button ：場所（ログインボタン）

Step 3：サーバーへ送信する

データの整形が終わったら、サーバーへ送信します。今回は fetch を使います。fetch はブラウザ標準のAPIで、JavaScriptからHTTPリクエストを送るための方法です。

/** トラッキングデータをサーバーへ送信する */
const sendTrackingData = async (trackingData: {
  account_id: string;
  event_name: string;
}): Promise<void> => {
  await fetch('/api/track', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      ...trackingData,
      created_at: new Date().toISOString(),
    }),
  });
};

const button = document.querySelector('#login-btn');

button?.addEventListener('click', async () => {
  await sendTrackingData({
    account_id: 'user-123',
    event_name: 'click_login_button',
  });
});

まとめ

トラッキングとは、ユーザーの行動を「イベント」という単位で記録・収集すること
イベント名には動作と場所の情報を入れる

参考