Mixpanelのアカウント作成・プロジェクト設定とSDK導入完全ガイド

2026年6月28日

Contents

1 Mixpanel アカウント作成とプロジェクト設定（API キー取得方法）
- 1.1 アカウント登録とメール認証
- 1.2 プロジェクト追加とトークン／API シークレットの取得
2 SDK のインストールと初期化（Web JavaScript / iOS (Swift) / Android (Kotlin)）
3 イベント設計のベストプラクティスとトラッキング実装
- 3.1 命名規則・プロパティ設計ガイドライン
- 3.2 mixpanel.track の基本構文とプロパティ付与例
  - 3.2.1 バッチ送信（自動バッチ化）の正しい設定方法
4 リアルタイムデバッグと検証手順
- 4.1 Live View と Debugger の基本的な使い方
- 4.2 よくある実装ミスと回避策
5 GDPR / プライバシー対応と他ツール連携
6 まとめ

スポンサードリンク

Mixpanel アカウント作成とプロジェクト設定（API キー取得方法）

Mixpanel でイベントを計測できるようになるまでの流れは、 アカウント登録 → プロジェクト作成 → トークン取得 の３ステップです。この記事では、公式ドキュメントに沿って実際に画面を操作しながら手順を解説します。トークンは後述する SDK 初期化で必ず必要になるため、正しくコピーできることが重要です。

アカウント登録とメール認証

Mixpanel 公式サイトのトップページから Sign up をクリックします。
氏名・メールアドレス・パスワードを入力し送信すると、確認メールが届きます。
メールに記載されたリンクを開くとアカウントが有効化され、ダッシュボードへアクセスできるようになります。

プロジェクト追加とトークン／API シークレットの取得

ダッシュボード左上メニューの Projects → Create Project を選択します。
「プロジェクト名」「用途（Web / Mobile）」を入力し、Create で作成完了です。
作成したプロジェクト画面右上にある Project Settings → Access Keys に移動すると以下の情報が確認できます。

項目	説明	使用例
Project Token	JavaScript、iOS、Android それぞれの SDK 初期化で必須となる文字列です。実際にはプロジェクトごとに固有の値が発行されます。	`<YOUR_PROJECT_TOKEN>`
API Secret	サーバーサイドから Mixpanel の管理 API（データ削除やエクスポート）を呼び出す際に使用します。	`<YOUR_API_SECRET>`

取得したトークンは、次章の「SDK のインストールと初期化」でコードに貼り付けます。

SDK のインストールと初期化（Web JavaScript / iOS (Swift) / Android (Kotlin)）

ここでは 2025 年版の最新 SDK を前提に、 npm/Yarn と CDN の2通りの導入方法、およびモバイル向け Swift・Kotlin の基本設定例を紹介します。どの手段でも「数行でトラッキングが開始できる」ことが共通ポイントです。

npm / Yarn での JavaScript SDK インストール

公式パッケージは @mixpanel/mixpanel-browser です。プロジェクトルートで次のコマンドを実行してください。

# npm
npm install @mixpanel/mixpanel-browser --save

# yarn
yarn add @mixpanel/mixpanel-browser

# npm

npm install @mixpanel/mixpanel-browser --save

# yarn

yarn add @mixpanel/mixpanel-browser

インストール後は ES モジュール形式でインポートし、取得した Project Token を渡して初期化します。デバッグモードは debug: true で有効化でき、Live View の確認に便利です。

import mixpanel from '@mixpanel/mixpanel-browser';

mixpanel.init('&lt;YOUR_PROJECT_TOKEN&gt;', {
  debug: true,                // コンソールに送信情報を出力（開発時のみ推奨）
  batch_requests: true,       // 複数イベントは自動でバッチ化して送信
  track_pageview: false       // 手動でページビューを送る場合は無効化
});

import mixpanel from '@mixpanel/mixpanel-browser';

mixpanel.init('<YOUR_PROJECT_TOKEN>', {

debug: true, // コンソールに送信情報を出力（開発時のみ推奨）

batch_requests: true, // 複数イベントは自動でバッチ化して送信

track_pageview: false // 手動でページビューを送る場合は無効化

});

CDN スクリプトタグによる簡易導入

ビルドツールが不要な小規模サイト向けに、公式 CDN を直接読み込む方法です。mixpanel.init のオプションは先ほどと同様に設定できます。

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@mixpanel/mixpanel-browser@latest/dist/mixpanel.umd.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  mixpanel.init('&lt;YOUR_PROJECT_TOKEN&gt;', {
    debug: true,
    batch_requests: true,
    track_pageview: false
  });
&lt;/script&gt;

mixpanel.init('<YOUR_PROJECT_TOKEN>', {

debug: true,

batch_requests: true,

track_pageview: false

});

</script>

iOS (Swift) 向け SDK の導入と初期化

手順	内容
依存関係の追加	Swift Package Manager（Xcode → File → Add Packages）で `https://github.com/mixpanel/mixpanel-swift.git` を指定します。
インポート	`import Mixpanel` をソースに記述します。
初期化	アプリ起動時（`@main` の `init()` か `AppDelegate`）でトークンを渡してインスタンス化します。

import Mixpanel

@main
struct MyApp: App {
    init() {
        Mixpanel.initialize(token: &quot;&lt;YOUR_PROJECT_TOKEN&gt;&quot;)
        Mixpanel.mainInstance().loggingEnabled = true   // デバッグ情報をコンソールに出力
    }
    var body: some Scene { WindowGroup { ContentView() } }
}

import Mixpanel

@main

struct MyApp: App {

init() {

Mixpanel.initialize(token: "<YOUR_PROJECT_TOKEN>")

Mixpanel.mainInstance().loggingEnabled = true // デバッグ情報をコンソールに出力

}

var body: some Scene { WindowGroup { ContentView() } }

}

Android (Kotlin) 向け SDK の導入と初期化

手順	内容
Gradle 依存追加	`implementation 'com.mixpanel.android:mixpanel-android:5.+'` を `app/build.gradle` に記載します。
インスタンス取得	アプリクラスの `onCreate()` 内で `MixpanelAPI.getInstance(this, "<YOUR_PROJECT_TOKEN>")` を呼び出し、ロギングを有効化します。

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        MixpanelAPI.getInstance(this, &quot;&lt;YOUR_PROJECT_TOKEN&gt;&quot;)
            .apply { setLoggingEnabled(true) }
    }
}

class MyApp : Application() {

override fun onCreate() {

super.onCreate()

MixpanelAPI.getInstance(this, "<YOUR_PROJECT_TOKEN>")

.apply { setLoggingEnabled(true) }

}

イベント設計のベストプラクティスとトラッキング実装

イベントデータは 分析の土台 になるため、命名規則・プロパティ設計を統一しておくことが成功への近道です。この章では推奨されるガイドラインと、Web SDK による具体的なトラッキングコード例、さらにバッチ送信（自動バッチ化）まで網羅します。

命名規則・プロパティ設計ガイドライン

イベント名は「動詞 + 対象」 で統一します。例：Clicked Button, Purchased Item。
共通プロパティ（すべてのイベントに必ず付与）として user_id と session_id を設定し、ユーザー単位・セッション単位の分析を容易にします。
プロパティ名はスネークケースかキャメルケースのどちらかに統一 し、文字列長は最大 255 バイトまでに抑えます（Mixpanel の上限は 2 KB ですが、個々のキーは小さめが望ましい）。

mixpanel.track の基本構文とプロパティ付与例

以下は Web SDK を使った典型的なトラッキングコードです。getCurrentUserId() は自前の関数で、認証済みユーザーの ID を取得すると想定しています。

// ページビュー（手動送信）
mixpanel.track('Viewed Page', {
  page: location.pathname,
  referrer: document.referrer,
  user_id: getCurrentUserId()
});

// ボタンクリック例
document.getElementById('buyBtn').addEventListener('click', () =&gt; {
  mixpanel.track('Clicked Button', {
    button_name: 'Buy Now',
    product_id: 'SKU_12345',
    price_usd: 49.99,
    user_id: getCurrentUserId()
  });
});

// 購入完了イベント
mixpanel.track('Purchased Item', {
  order_id: 'ORD_98765',
  total_amount: 149.97,
  currency: 'USD',
  items: [
    { id: 'SKU_12345', qty: 1, price: 49.99 },
    { id: 'SKU_67890', qty: 2, price: 49.99 }
  ],
  user_id: getCurrentUserId()
});

// ページビュー（手動送信）

mixpanel.track('Viewed Page', {

page: location.pathname,

referrer: document.referrer,

user_id: getCurrentUserId()

});

// ボタンクリック例

document.getElementById('buyBtn').addEventListener('click', () => {

mixpanel.track('Clicked Button', {

button_name: 'Buy Now',

product_id: 'SKU_12345',

price_usd: 49.99,

user_id: getCurrentUserId()

});

// 購入完了イベント

mixpanel.track('Purchased Item', {

order_id: 'ORD_98765',

total_amount: 149.97,

currency: 'USD',

items: [

{ id: 'SKU_12345', qty: 1, price: 49.99 },

{ id: 'SKU_67890', qty: 2, price: 49.99 }

user_id: getCurrentUserId()

});

バッチ送信（自動バッチ化）の正しい設定方法

Mixpanel の JavaScript SDK は batch_requests: true をオプションに入れるだけで、内部的に 数十ミリ秒単位のキューイング と まとめて POST が行われます。個別に track_batch や people.setOnce というメソッドは提供されていないため、下記のように SDK の設定だけで実現できます。

mixpanel.init('&lt;YOUR_PROJECT_TOKEN&gt;', {
  debug: true,
  batch_requests: true   // ← これだけで自動バッチ化が有効になる
});

mixpanel.init('<YOUR_PROJECT_TOKEN>', {

debug: true,

batch_requests: true // ← これだけで自動バッチ化が有効になる

});

※サーバー側で大量イベントを一括送信したい場合は、Mixpanel の Import API（https://api.mixpanel.com/import?strict=1）を使用します。詳細は公式リファレンスをご参照ください。

リアルタイムデバッグと検証手順

実装後にイベントが正しく届いているかどうかを確認することは、トラッキングの品質保証で最も重要です。Mixpanel が提供する Live View と Debugger を活用すれば、ブラウザやモバイル端末から即座に送信状況をチェックできます。

Live View と Debugger の基本的な使い方

Mixpanel コンソール左メニューの Live View を開くと、リアルタイムで受信したイベントが一覧表示されます。
JavaScript SDK では debug: true（または mixpanel.set_config({ debug: true })）を有効にすると、ブラウザコンソールにも送信リクエストの詳細が出力されます。モバイル側は loggingEnabled = true が同等です。
イベントが一覧に現れない場合は Debugger タブでエラーメッセージやプロパティサイズ超過などの原因を確認できます。

よくある実装ミスと回避策

ミス	具体例	防止策
重複送信	ページロード時に `mixpanel.track('Viewed Page')` を何度も呼び出す	`sessionStorage` にフラグ保存し、1 セッションで一回だけ送信
プロパティサイズ超過	画像 URL（長さ 2000 文字）や大きな JSON オブジェクトをそのまま送る	URL はハッシュ化、テキストは要約してキーだけ送信
データ型不一致	`Date` オブジェクトを直接渡すとシリアライズ失敗	`date.toISOString()` で文字列化し、数値は必ず `Number` にキャスト

// 重複送信防止例（ページビュー）
if (!sessionStorage.getItem('viewed_page')) {
  mixpanel.track('Viewed Page', { page: location.pathname, user_id: getCurrentUserId() });
  sessionStorage.setItem('viewed_page', 'true');
}

// 重複送信防止例（ページビュー）

if (!sessionStorage.getItem('viewed_page')) {

mixpanel.track('Viewed Page', { page: location.pathname, user_id: getCurrentUserId() });

sessionStorage.setItem('viewed_page', 'true');

}

GDPR / プライバシー対応と他ツール連携

欧州圏のユーザーを対象にする場合、 データ収集前の明示的な同意 が法的要件となります。Mixpanel は opt‑in／opt‑out の API と、個人情報削除用エンドポイントを提供しているため、実装例と共に外部分析ツール（例：Contentsquare）との連携方法も併せて解説します。

ユーザー同意取得フローと Mixpanel の opt‑out 設定

サイト上に GDPR 同意バナーを配置し、accept ボタンがクリックされたら mixpanel.opt_in_tracking() を呼び出す。
decline ボタンが押されたら mixpanel.opt_out_tracking() で全ての送信を停止させます（SDK が内部的にキューを破棄します）。

document.getElementById('acceptBtn').addEventListener('click', () =&gt; {
  mixpanel.opt_in_tracking();   // トラッキング開始
});

document.getElementById('declineBtn').addEventListener('click', () =&gt; {
  mixpanel.opt_out_tracking();  // 以降のイベントは送信されない
});

document.getElementById('acceptBtn').addEventListener('click', () => {

mixpanel.opt_in_tracking(); // トラッキング開始

});

document.getElementById('declineBtn').addEventListener('click', () => {

mixpanel.opt_out_tracking(); // 以降のイベントは送信されない

});

データ削除 API の呼び出し例（サーバー側）

ユーザーが「データ削除」を要求した際は、Mixpanel の Delete Person エンドポイントに POST リクエストを投げます。API Secret と Project Token は環境変数など安全な場所に保管してください。

curl -X POST https://mixpanel.com/api/2.0/persons/delete \
  -u &lt;YOUR_API_SECRET&gt;: \
  -H &quot;Content-Type: application/json&quot; \
  -d '{
        &quot;$token&quot;:&quot;&lt;YOUR_PROJECT_TOKEN&gt;&quot;,
        &quot;$distinct_id&quot;:&quot;USER_DISTINCT_ID&quot;
      }'

curl -X POST https://mixpanel.com/api/2.0/persons/delete \

-u <YOUR_API_SECRET>: \

-H "Content-Type: application/json" \

-d '{

"$token":"<YOUR_PROJECT_TOKEN>",

"$distinct_id":"USER_DISTINCT_ID"

このリクエストを実行すると、対象ユーザーのプロパティとすべてのイベント履歴が即座に削除されます。

Contentsquare など外部分析ツールとの連携ポイント

Mixpanel の イベント名 をトリガーにして、Contentsquare が提供するセグメント機能や API 呼び出しを組み合わせると、ファネル分析とヒートマップの相乗効果が得られます。

CDN で導入した場合は window.mixpanel が自動的にグローバル化されるので、Contentsquare 側からも参照可能です。
Contentsquare の管理画面で「Mixpanel イベント名 = Purchased Item」の条件を設定し、そのセグメントのユーザーに対して録画やポップアップ調査を自動配信できます。
特定イベントが発火したら、以下のように Contentsquare のカスタム API に通知すると、リアルタイムで追加アクション（例：サーベイ表示）を実行できます。

mixpanel.track('Purchased Item', {
  order_id: 'ORD_98765',
  total_amount: 149.97,
  user_id: getCurrentUserId()
});

// Contentsquare に即時通知
fetch('https://api.contentsquare.com/v1/events', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    event_name: 'Purchased Item',
    distinct_id: getCurrentUserId(),
    amount: 149.97
  })
});

mixpanel.track('Purchased Item', {

order_id: 'ORD_98765',

total_amount: 149.97,

user_id: getCurrentUserId()

});

// Contentsquare に即時通知

fetch('https://api.contentsquare.com/v1/events', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

event_name: 'Purchased Item',

distinct_id: getCurrentUserId(),

amount: 149.97

})

});

この連携により、Mixpanel が得意とする 定量的ファネル分析 と、Contentsquare の 定性的行動可視化 をシームレスに組み合わせ、UX 改善サイクルを高速化できます。

まとめ

アカウント作成 → プロジェクト作成 → トークン取得 が Mixpanel 活用の第一歩です。
最新 SDK (@mixpanel/mixpanel-browser / MixpanelSwift / mixpanel-android) をインストールし、batch_requests: true で自動バッチ送信を有効にすれば、個別に track_batch 等のメソッドは不要です。
イベント名・プロパティ設計は統一ルールを策定し、共通属性（user_id, session_id）を必ず付与してください。
Live View と Debugger を活用したリアルタイム検証で、実装ミスやサイズ超過を早期に発見できます。
GDPR 対応は opt‑in/opt‑out と Delete Person API で完結し、外部ツール（Contentsquare）との連携により分析領域を拡張できます。

この記事を参考に、まずは「ページビュー」イベントだけでも実装してみましょう。正しくデータが届くことを確認できたら、次はクリックや購入といったビジネスロジックに合わせたイベント追加へとステップアップしてください。 Happy tracking!

スポンサードリンク

-Mixpanel

comment コメントをキャンセル

: Mixpanel

Mixpanel AIの使い方と機能徹底解説 – 自動インサイト・LLMクエリ活用法

Mixpanel AI を活用すれば、従来のファネルやリテンション分析に加えて自然言語で質問できるLLMクエリや自動インサイト生成が可能です。

: Mixpanel

Mixpanelテンプレート作成の基本と活用術

Mixpanelで効果的なダッシュボードテンプレートを作成するための基本と活用術。ユーザー層に合わせた設計、Web Analytics機能、カスタマイズポイント、Zapier連携事例を解説。

: Mixpanel

2025年版Mixpanel AIの自動インサイトと予測モデリング徹底解説

Mixpanelは2025年に自動インサイト生成・リアルタイム予測モデリング・OpenAI連携を標準搭載し、分析サイクルを数時間へ短縮しました。

: Mixpanel

Mixpanel AI vs Amplitude & Contentsquare: Tool Comparison

Mixpanel AIの特徴、AmplitudeとのAI機能比較、Contentsquareとの可視化ツール観点での違いを解説。中小企業向けOpenPanel.dev導入事例も紹介。

: Mixpanel

Mixpanel 無料プラン概要と登録手順、機能・制限まとめ

Mixpanel の無料プランは月間100万イベント、リプレイ2万セッション、レポート・コホート無制限で利用でき、クレジットカード不要の簡単登録が可能です。

OPTiM Biz導入ガイド：中小企業の業務効率化とステップバイステップ手順

SKYSEA Client View AIチャットサポート導入ガイド