> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Mixpanel JavaScript トラッカー
> JavaScript トラッカーを使用して Kameleoon の実験露出イベントを Mixpanel に送信し、Mixpanel コホートを Kameleoon キャンペーンのターゲティングやパーソナライゼーションに活用します。
[Mixpanel](https://mixpanel.com/) は、プロダクトチーム向けの主要なユーザー行動分析ソリューションです。
利用可能な統合は 2 種類あります。
* Kameleoon は Mixpanel のネイティブ Experiments モジュールを利用し、Mixpanel の実験用ネイティブインターフェース上で Kameleoon 経由のキャンペーンの影響を分析できます。
* Mixpanel のコホートデータを Kameleoon に自動エクスポートすることも可能で、それを使って顧客ジャーニーをパーソナライズするためのさらなるセグメンテーションを行えます。
ニーズに応じて両方を設定できます。
**主なメリット:**
* Kameleoon キャンペーンが、ユーザーのウェブサイト操作にどのように影響するかを観察できます。
* 効果的な A/B テストやパーソナライゼーションを簡単に特定し、再現できます。
* セグメントの最も関連性の高い行動特性に焦点を当て、テストロードマップを推進するための新たなインサイトを迅速に発見できます。
* コホートデータにアクセスして訪問者の体験をパーソナライズし、パーソナライゼーションキャンペーンのパフォーマンスを向上できます。
## Kameleoon キャンペーンのイベントデータを Mixpanel ダッシュボードに送信する
Kameleoon と Mixpanel のブリッジにより、Kameleoon のパーソナライゼーションや実験のデータ（露出イベント）を Mixpanel プラットフォームで取得できます。
### Kameleoon で Mixpanel 統合を有効化する
Mixpanel を使用するには、Integrations ページで有効化する必要があります。手順は次のとおりです。
1. Kameleoon アプリにログインします。
2. **Admin** > **Integrations** > **Install the tool** をクリックします。
3. Mixpanel を設定するプロジェクトを選択します。
4. **Validate** をクリックします。
ツールの行の右側に **ON** トグルと、ツールが設定されているプロジェクト数が表示されます。
キャンペーンの露出イベントは自動的に Mixpanel に送信されます。
ネイティブブリッジの動作を変更したい場合は、[カスタムアナリティクスブリッジを作成](../custom-analytics-integration) し、[GitHub リポジトリ](https://github.com/Kameleoon/custom-analytics-integrations/tree/master/mixpanel) にある Mixpanel サンプルコードを使用できます。
### Kameleoon キャンペーンのレポートツールとして Mixpanel を関連付ける
キャンペーン作成ページで Mixpanel をキャンペーンに関連付けることができます。**REPORTING TOOLS** のリストから選択します。
Kameleoon は Mixpanel Experiment API を使用して、データ（Experiment 名と Variant 名）を自動的に Mixpanel に送信します。
## Mixpanel コホートへの所属に基づいて Kameleoon で訪問者をターゲットにする
### Mixpanel で Kameleoon 統合を有効化する
コホート同期を有効にするには、Mixpanel アカウントで Kameleoon 統合を有効化する必要があります。[こちらの Mixpanel ドキュメント](https://help.mixpanel.com/hc/en-us/articles/360055834811-Kameleoon-Integration) を参照してください。
Kameleoon API キーが必要です。Kameleoon カスタマーサクセスマネージャーに問い合わせてください。
Kameleoon にエクスポートされるのは、識別済みのユーザープロファイルのみです（匿名ユーザーは含まれません）。Mixpanel のアイデンティティマージ機能を使用している場合、特定のユーザーに対する Mixpanel の `distinct_id` が時間とともに変わる可能性があるため、追加のユーザープロパティとして **`$kameleoon_mapping_id`** を設定することを強くお勧めします。このプロパティには、[Kameleoon Visitor コード](../../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#visitor)、または Kameleoon の [SDK](../../../../../developer-docs/feature-experimentation/get-started/overview) のいずれかを使用している場合は「社内のユーザー ID」を含めます。Mixpanel は、Kameleoon に送信する各コホートエクスポートに `kameleoon_mapping_id` を自動的に追加します。
`kameleoon_mapping_id` は、identify メソッドの実行直後に [Mixpanel `people.set` メソッド](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-profile-properties) を使用して設定できます。以下は Mixpanel JavaScript API で使用できるコードの例です。
```javascript theme={null}
mixpanel.people.set({
'$kameleoon_mapping_id': Kameleoon.API.Visitor.code
});
```
Mixpanel は Kameleoon の [Data API map エンドポイント](/api-reference/map/update-data-for-several-keys) を使用してコホートを Kameleoon に送信します。
### 実験で Mixpanel コホートをターゲットにするためのカスタムデータを作成する
Mixpanel コホートをターゲットにするには、各ユーザーに対するコホート名を取得するために、Kameleoon 内でカスタムデータを設定する必要があります。
カスタムデータに「**Mixpanel cohorts**」という名前を付け、クラシックなウェブ実験を実施している場合は **Custom JavaScript code** 取得方法を、サーバーサイド実験やフィーチャーフラグを使用している場合は **Kameleoon SDK method** を選択します。
カスタムデータの型は **list of** と **strings** に設定する必要があります。スコープは、Mixpanel で定義されたスコープに応じて **Page** に設定できます。**Page** に設定した場合、Mixpanel が特定のコホートにユーザーが属するかどうかは、ページ読み込みのたびに再評価されます。
### ウェブ実験のための外部セグメント同期
前のセクションで説明したように `$kameleoon_mapping_id` プロパティを使用する場合は、カスタムデータの取得方法で以下のコードを使用します。
```javascript theme={null}
Kameleoon.API.Data.retrieveDataFromRemoteSource(Kameleoon.API.Visitor.code, function (data) {
if (data?.mixpanel_cohorts) {
data.mixpanel_cohorts.map(function (segment) {
if (segment?.mixpanel_cohort_id) {
Kameleoon.API.Data.setCustomData("Mixpanel cohorts", segment.mixpanel_cohort_id);
}
});
}
});
return { "value": null}
```
Mixpanel のデフォルトの `distinct_id` メソッドを使用して独自のユーザー ID を設定したい場合は、以下のコードを使用します。
```javascript theme={null}
if (!window.mixpanel?.get_distinct_id) return null;
let id = mixpanel.get_distinct_id();
Kameleoon.API.Data.retrieveDataFromRemoteSource(id, function (data) {
if (data?.mixpanel_cohorts) {
data.mixpanel_cohorts.map(function (segment) {
if (segment?.mixpanel_cohort_id) {
Kameleoon.API.Data.setCustomData("Mixpanel cohorts", segment.mixpanel_cohort_id);
}
});
}
});
return { "value": null}
```
### サーバーサイドのための外部セグメント同期
サーバーサイドの実験やフィーチャーフラグで Mixpanel コホートを使用するには、各 SDK のドキュメントに記載されているガイドラインを参照してください。たとえば [GO SDK](../../../../../developer-docs/sdks/web-sdks/go-sdk#retrieving-data-from-a-remote-source) を使用している場合は、そのドキュメントを参照すると詳細な手順を確認できます。
GO SDK は、他の SDK と同様に `getRemoteData()` メソッドを使用します。このメソッドは、Mixpanel が Kameleoon のサーバーに保存したデータを取得し、バックエンドコードからアクセス可能にします。
### Kameleoon で Mixpanel コホート名を取得する
**Save the values for the targeting condition associated with the custom data point** オプションを有効にし、専用フィールドに以下のスニペットを挿入します。値「`ADD_YOUR_PROJECT_ID_HERE`」をプロジェクトの sitecode に置き換えてください。
```javascript theme={null}
var xhr = new XMLHttpRequest();
xhr.open("GET", 'https://customers.kameleoon.com/mixpanel/cohorts/ADD_YOUR_PROJECT_ID_HERE', false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var mixPanelSegments = [];
xhr.onreadystatechange = function() { // Call a function when the state changes.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200)
{
var mixpanel = JSON.parse(xhr.response);
mixpanel.forEach(function (segment) {
if (segment.id && segment.name !== 'undefined')
{
mixPanelSegments.push({value: segment.id, label: segment.name});
}
});
}
}
xhr.send();
return mixPanelSegments;
```
### Kameleoon セグメントで Mixpanel コホート名を使用する
Mixpanel コホート名のカスタムデータが設定された後、Kameleoon のセグメントビルダーでカスタムデータを選択し、**is among the values** を選択することでセグメントを構築できます。Mixpanel のすべてのコホート名のリストが表示されます。1 つまたは複数の Mixpanel コホートを選択すると、パーソナライゼーションや実験でのターゲティングが可能になります。