MixPanelでENGAGEMENTとPEOPLEを同時にTrackする方法
はじめに (対象読者・この記事でわかること)
この記事は、Webアプリケーション開発者やデータ分析に興味がある方、特にMixPanelを利用している方を対象としています。この記事を読むことで、MixPanelのENGAGEMENT（ユーザーの行動イベント）とPEOPLE（ユーザーの属性情報）を同時に追跡する実装方法がわかります。具体的には、ユーザーがサイトでどのような操作をしたか（ENGAGEMENT）と、そのユーザーの属性情報（PEOPLE）を一度の処理で追跡する方法を学べます。これにより、より詳細なユーザー分析が可能になり、製品改善に役立つデータを収集できるようになります。
前提知識
この記事を読み進める上で、以下の知識があるとスムーズです。 前提となる知識1: JavaScriptの基本的な知識 前提となる知識2: MixPanelの基本的な概念と使い方 前提となる知識3: Webサイトでのユーザー行動追跡の基本的な考え方
MixPanelにおけるENGAGEMENTとPEOPLEの基本概念
MixPanelは、ユーザーの行動を追跡・分析するための強力な分析ツールです。その中でも、ENGAGEMENTとPEOPLEは2つの主要な概念です。
ENGAGEMENTとは、ユーザーがサイトやアプリで行った特定の行動（イベント）を追跡する機能です。例えば、ボタンのクリック、ページの閲覧、フォームの送信といった具体的なアクションを記録します。これにより、どの機能がユーザーに人気があるか、どの行動がコンバージョンに繋がっているかを分析できます。
一方、PEOPLEは、ユーザーの属性情報を追跡する機能です。ユーザーの年齢、性別、所属企業、プラン種別といった固定されたプロパティを記録します。これにより、特定の属性を持つユーザーがどのような行動をとりやすいかを分析できます。
通常、これら2つの機能は別々に追跡されますが、ユーザーの行動と属性を関連付けて分析したいケースは多く存在します。例えば、「高級プランのユーザーは特定の機能をよく利用する」といった分析を行うには、ENGAGEMENTとPEOPLEの情報を関連付ける必要があります。
ENGAGEMENTとPEOPLEを同時にTrackする実装方法
ここでは、JavaScriptを使ってMixPanelでENGAGEMENTとPEOPLEを同時に追跡する具体的な実装方法を解説します。
ステップ1：MixPanelの初期設定
まずは、MixPanelの基本的な設定を行います。以下のコードは、MixPanelのSDKをサイトに組み込むための基本的な初期設定です。
// MixPanelの初期化
mixpanel.init('YOUR_MIXPANEL_TOKEN', {
debug: false, // 開発中はtrueにするとデバッグ情報が表示されます
track_pageview: true, // ページビューを自動で追跡する場合にtrue
persistence: 'localStorage' // データの保存先をlocalStorageに指定
});
// ユーザー識別子の設定（ログインしている場合）
function setUserId(userId) {
mixpanel.identify(userId);
}
// ユーザープロパティの設定
function setUserProperties(properties) {
mixpanel.people.set(properties);
}
ステップ2：ユーザー認証時の処理
ユーザーがログインした際に、ユーザーIDとプロパティを設定します。これにより、ENGAGEMENTとPEOPLEの情報を関連付ける基礎ができます。
// ログイン成功時の処理
function handleLoginSuccess(userData) {
// ユーザーIDを設定
setUserId(userData.id);
// ユーザープロパティを設定
const userProperties = {
name: userData.name,
email: userData.email,
plan: userData.plan, // 有料プランか無料プランか
signup_date: userData.signupDate,
last_login: new Date().toISOString()
};
setUserProperties(userProperties);
// ログインイベントを追跡
mixpanel.track('Login', {
'distinct_id': userData.id
});
}
ステップ3：イベント追跡とプロパティ設定の組み合わせ
ユーザーが特定のアクションを行った際に、そのイベントと関連するプロパティを同時に追跡します。これにより、行動と属性の関連付けが可能になります。
// 購入イベントを追跡する関数
function trackPurchase(orderData) {
const eventProperties = {
'product_id': orderData.productId,
'amount': orderData.amount,
'currency': 'JPY',
'payment_method': orderData.paymentMethod,
'plan': orderData.plan // ユーザープロパティと同じプロパティを設定
};
// 購入イベントを追跡
mixpanel.track('Purchase', eventProperties);
// ユーザープロパティも更新（必要に応じて）
const updateUserProperties = {
'total_purchases': mixpanel.get_property('total_purchases') + 1,
'total_amount': mixpanel.get_property('total_amount') + orderData.amount,
'last_purchase_date': new Date().toISOString()
};
setUserProperties(updateUserProperties);
}
ステップ4：ページビューとコンテキスト情報の追跡
ページビューを追跡する際に、現在のコンテキスト情報も一緒に追跡します。これにより、どのページでどのような属性のユーザーが行動したかを分析できます。
// カスタムページビューの追跡
function trackPageView(pageName, additionalProperties = {}) {
const pageProperties = {
'page_name': pageName,
'url': window.location.href,
'referrer': document.referrer,
'user_plan': mixpanel.get_property('plan'), // ユーザープロパティから取得
'user_signup_date': mixpanel.get_property('signup_date')
};
// 追加プロパティをマージ
const allProperties = {...pageProperties, ...additionalProperties};
// ページビューイベントを追跡
mixpanel.track('Page View', allProperties);
}
// ページ遷移時に自動で呼び出される
window.addEventListener('load', () => {
const pageName = window.location.pathname;
trackPageView(pageName);
});
ステップ5：イベントのグループ化と分析
追跡したイベントをグループ化して分析します。MixPanelのセグメント機能や漏斗分析を活用することで、ENGAGEMENTとPEOPLEの関連性を深く分析できます。
// イベントのグループ化のためのヘルパー関数
function groupEventsByUserProperty(propertyName, eventName) {
// MixPanelのUIで以下のようにセグメントを作成
// イベント: eventName
// プロパティ: propertyName が特定の値を持つ
// または、MixPanelのAPIを利用してデータを取得
return mixpanel.request({
method: 'engage',
data: {
event: eventName,
type: 'user',
unit: 'day'
}
});
}
// 特定のプランのユーザーが行うイベントを分析
function analyzePlanSpecificEvents(planType, eventName) {
groupEventsByUserProperty('plan', eventName).then(response => {
// レスポンスを解析して分析結果を表示
console.log(`${planType}プランユーザーの${eventName}分析結果:`, response);
});
}
ハマった点やエラー解決
問題1：ユーザーIDが設定されていない状態でのイベント追跡
症状: MixPanelのダッシュボードで、同じユーザーが複数の異なるユーザーとして表示される。
原因: ユーザーがログインする前にイベントを追跡している場合、MixPanelはデフォルトでブラウザやデバイスを基にした一意のIDを生成します。その後ユーザーがログインし、ユーザーIDを設定しても、過去のイベントとの関連付けが正しく行われないことがあります。
解決策: イベントを追跡する前に、ユーザーが認証されているかどうかを確認し、認証されている場合はユーザーIDを設定するようにします。
// ユーザー認証状態を確認してからイベントを追跡
function trackAuthenticatedEvent(eventName, properties = {}) {
// 現在のユーザーIDを取得
const currentUserId = mixpanel.get_distinct_id();
// ユーザーIDが設定されているか確認
if (currentUserId && currentUserId !== mixpanel.get_property('$device_id')) {
// ユーザーIDが設定されている場合、そのまま追跡
mixpanel.track(eventName, properties);
} else {
// ユーザーIDが設定されていない場合、一時的なIDで追跡
// 後でユーザーIDが設定された際に紐付けるために、一意な識別子を生成
const anonymousId = 'anonymous_' + Date.now();
mixpanel.identify(anonymousId);
mixpanel.track(eventName, {
...properties,
'will_be_merged': true // このイベントは後でユーザーIDと紐付けられることを示すフラグ
});
}
}
問題2：イベントの重複追跡
症状: 同じイベントが複数回追跡されているように見える。
原因: ページの再読みみ込みや、SPA（シングルページアプリケーション）でのルーティング変更時に、イベントが重複して追跡されることがあります。
解決策: イベントの重複を防ぐため、追跡済みのイベントを記録する仕組みを実装します。
// 追跡済みイベントの記録用変数
const trackedEvents = new Set();
// 重複を防ぐイベント追跡関数
function trackEventWithoutDuplication(eventName, properties = {}) {
// イベントの識別子を生成（イベント名と主要なプロパティから）
const eventKey = eventName + JSON.stringify(properties);
// すでに追跡済みの場合は何もしない
if (trackedEvents.has(eventKey)) {
return;
}
// 追跡済みとして記録
trackedEvents.add(eventKey);
// イベントを追跡
mixpanel.track(eventName, properties);
}
// ページがアンロードされる前に追跡済みイベントをクリア
window.addEventListener('beforeunload', () => {
trackedEvents.clear();
});
問題3：ユーザープロパティの更新タイミング
症状: ユーザープロパティが正しく更新されない、または古い値が表示される。
原因: ユーザープロパティの更新タイミングが不適切な場合や、非同期処理の結果を待たずにプロパティを設定しようとしていることが原因です。
解決策: ユーザープロパティを更新する際は、MixPanelの非同期処理を正しく扱うようにします。
// 非同期処理を待つユーザープロパティ更新関数
async function updateUserPropertiesAsync(properties) {
try {
// MixPanelの現在のユーザー情報を取得
const userProfile = await new Promise((resolve, reject) => {
mixpanel.people.get((err, profile) => {
if (err) {
reject(err);
} else {
resolve(profile);
}
});
});
// 新しいプロパティと既存のプロパティをマージ
const mergedProperties = {
...userProfile.properties,
...properties,
'last_updated': new Date().toISOString()
};
// 更新されたプロパティを設定
mixpanel.people.set(mergedProperties);
return true;
} catch (error) {
console.error('ユーザープロパティの更新に失敗しました:', error);
return false;
}
}
// ユーザープロパティを更新する例
async function handleUserUpgrade(newPlan) {
// プランアップグレード処理
// ...
// ユーザープロパティを更新
const updateSuccess = await updateUserPropertiesAsync({
'plan': newPlan,
'plan_upgraded_date': new Date().toISOString()
});
if (updateSuccess) {
console.log('ユーザープロパティが正常に更新されました');
}
}
ベストプラクティス
ENGAGEMENTとPEOPLEを同時に追跡する際のベストプラクティスを以下に示します。
-
一貫したプロパティ名を使用する イベントプロパティとユーザープロパティで同じ名前を使用すると、分析が容易になります。例えば、ユーザーのプラン種別を表すプロパティは、イベントとユーザープロパティの両方で
planという名前で統一します。 -
イベント追跡のタイミングを適切に選ぶ ユーザーが特定のアクションを完了した時点でイベントを追跡します。例えば、フォーム送信ボタンがクリックされた時ではなく、フォームが正常に送信された後に追跡すると、より正確なデータが得られます。
-
プライバシーを考慮する 個人を特定できる情報（メールアドレスなど）を追跡する場合は、適切な同意を得るようにし、必要に応じてデータを匿名化します。
-
イベントプロパティとユーザープロパティのバランスを取る すべてのイベントにユーザープロパティを含めるとデータ量が膨大になります。重要なプロパティのみを選択的に含めるようにします。
-
テスト環境で検証する 本番環境にデプロイする前に、テスト環境でイベント追跡が正しく行われることを確認します。MixPanelのデバッグモードを活用して、送信されるデータを確認します。
まとめ
本記事では、MixPanelでENGAGEMENTとPEOPLEを同時にTrackする方法について解説しました。
- 要点1: MixPanelのENGAGEMENT（ユーザー行動）とPEOPLE（ユーザー属性）を関連付けることで、より詳細なユーザー分析が可能になります。
- 要点2: JavaScriptを使ってユーザー認証時にユーザーIDとプロパティを設定し、イベント追跡時に関連情報を含めることで、ENGAGEMENTとPEOPLEを同時に追跡できます。
- 要点3: 重複追跡の防止やプロパティの更新タイミングといった課題に対しては、適切な実装手法を用いることで解決できます。
この記事を通して、読者はMixPanelを活用してユーザーの行動と属性を関連付けて分析する技術を身につけることができたはずです。これにより、ユーザーの行動パターンを属性ごとに分析し、製品改善に役立つインサイトを得ることができるようになります。
今後は、追跡したデータをより高度に分析する方法や、他の分析ツールとの連携についても記事にする予定です。