> ## 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.
# Kameleoon Debug Assistant 拡張機能
> Kameleoon Debug Assistant Chrome 拡張機能をインストールして使用し、任意のページ上で実験、フィーチャーフラグ、セグメント、ゴール、およびパフォーマンスを検査します。
Kameleoon グラフィックエディター拡張機能の詳細については、[グラフィックエディターを使い始める](/user-manual/experimentation/web-experimentation/graphic-based-experiments/getting-started-with-the-graphic-editor#kameleoon-graphic-エディタ拡張機能)に関する記事を参照してください。
## 拡張機能のインストール
1. 拡張機能を Chrome に追加します。[Chrome ウェブストアからダウンロードできます](https://chrome.google.com/webstore/detail/kameleoon/nimncjjomfcjmfnghgaopccmdggjfoam)。
2. Web コンソールを開きます (PC では **F12**、Mac では **command+option+I**)。
3. Web コンソールから Kameleoon タブをクリックします。
4. **Activate** をクリックします。
5. Kameleoon アプリのログインページが開きます。ログイン情報を入力します。
### シンプルな認証
拡張機能の Kameleoon アイコンを使用して認証プロセスを開始することもできます。
1. Kameleoon アイコンをクリックすると、ポップアップが表示されます。
2. **Open Login Pop-up** をクリックしてログインポップアップを表示します。ログインポップアップを使用して、メールアドレスとパスワードを入力してログインできます。
### Cookie 認証
Kameleoon アイコンをクリックすると、ポップアップが表示されます。
ブラウザですでにログイン済みの場合は、**Open Login Pop-up** ボタンの下にセクションが表示され、現在のセッションでログインできます。
**Log in as...** をクリックします。
ログアウトもログインと同じ手順で行います。Kameleoon アイコン > **Log out** をクリックするだけです。
### 権限
**My websites** ページが開きます。
拡張機能が有効化され、Kameleoon アカウントで設定されたすべてのウェブサイトで拡張機能を使用する権限が付与されます。
拡張機能を初めて有効化すると、ウェブサイトにリダイレクトされ、すぐに拡張機能を使用できるようになります。
Kameleoon アカウントに新しいウェブサイトを追加した場合は、そのサイトで拡張機能を使用する権限がないことが通知されます。
**Proceed to tag injection** をクリックします。ボタンをクリックすると、Tag Injector に直接移動します。その後、権限を更新してください。更新を確認するメッセージが表示されます。
Kameleoon アカウントに新しいウェブサイトを追加した場合、拡張機能ダッシュボードの下部にある **Update list of sitecodes** をクリックして権限を更新することもできます。
### 構成
拡張機能は次の複数のタブを提供します。
* Campaigns
* Assets
* Timeline
* Dev tools
* Options
Kameleoon ロゴをクリックすると、ダッシュボードページにアクセスできます。
## ダッシュボード
拡張機能を開くと、デフォルトでダッシュボードが表示されます。
**+** アイコンをクリックしてダッシュボードを構築・カスタマイズし、重要な情報が含まれるようにします。
各ウィジェットは拡大、縮小、閉じることができます。
左上の3点メニューをクリックして、行数を増やすことができます。
利用可能なインサートは次のとおりです。
* **Consent:** 実験またはパーソナライゼーションに対する同意を与えたかどうかを示します (**true** は同意済みまたは同意不要であることを示し、**false** は同意を拒否したか、同意待ちで Kameleoon が実験をブロックしていることを意味します)。
* **Custom data:** ページ上のアクティブなカスタムデータ、その ID、値を一覧表示します。
* **Experiments:** ページ上で実行中のすべての実験を一覧表示し、それらの ID、ターゲティングの評価結果 (true/false) を示し、登録されたバリエーションと表示されたバリエーションの ID を表示します。
* **Personalizations:** ページ上で実行中のすべてのパーソナライゼーションについて同様です。
* **Site Code:** 関連するサイトコードを表示します。
* **Visitor Code:** 自分に割り当てられた訪問者コードを示します。これにより、訪問数などの指標を監視できます。
ダッシュボードの下部には、Kameleoon アカウントに新しいウェブサイトが追加されたときにサイトコードを更新できるリンクがあります。
## Campaigns
### Experiments
**Experiments** タブには、ページ上で実行中のすべての実験が表示されます。
**Add columns** をクリックして、テーブルをカスタマイズするための列の追加または削除ができます。
* **ID:** 実験の ID。クリックすると詳細が表示されます。
* **Name:** 実験の名前。
* **Triggered:** 実験がページでトリガーされた場合は true、それ以外は false。
* **Triggered In Visit:** 実験が現在の訪問でトリガーされた場合は true、それ以外は false。
* **Active:** 実験が現在ページでアクティブな場合は true、それ以外は false。
* **Activated In Visit:** 実験が現在の訪問で有効化された場合は true、それ以外は false。トリガーされた実験は必ずしも Kameleoon が実験を有効化したことを意味しないことに注意してください。複数の追加要因が有効化に影響する可能性があるためです (例: 訪問者が実験から除外されたトラフィックの一部である場合や、キャッピングオプションが設定されている場合など)。
* **Displayed Variation:** 表示されたバリエーションの ID (ターゲットされていない場合は **No variation**、ターゲットされていてもリファレンスに割り当てられている場合は **0**)。
* **Associated Variation:** 自分の訪問者コードで割り当てられたバリエーションの ID (ターゲットされていない場合は **0**)。ドロップダウンで選択して、バリエーションを強制することができます。右側の目のアイコンを使用するとプレビューできます。
* **Date Modified:** 実験に対して行われた最後の変更の日付。
* **Assignment Time:** バリエーションに割り当てられた時刻。バリエーションがオリジナルで、ターゲットされていない場合、値は **Not assigned yet** です。
* **Online since:** 実験がオンラインになった日付。
#### Variations
実験の ID をクリックすると、メニューが開きます。最初のタブには実験のすべてのバリエーションが集約され、その名前、ID、JS/CSS が示されます (バリエーションにコードが挿入されている場合)。
バリエーション ID をクリックして、あるバリエーションから別のバリエーションに切り替えることができます。
**Elements** セクションには、Kameleoon がバリエーションのために変更するすべての要素が一覧表示されます。これにより、キャンペーンをデバッグし、ページ上で要素が検出されているかどうかをすばやく確認できます。要素のセレクタが各項目を表します。拡張機能が要素を赤で表示する場合、その要素はページに表示されていません。緑の場合、要素はページに表示されています。
各項目には、コピーボタンとハイライトボタンの2つのボタンがあります。
コピーボタンは、CSS セレクタをコピーするために使用できます。
ハイライトボタンを使用すると、ページ内の関連する要素をハイライトできます。そのため、要素がページ上で検出されていない場合は使用できません。
要素のリストの上に表示されるアイコンを使用して、ページ上のすべての要素をハイライトすることもできます。
#### Configuration
実験の構成全体が拡張機能に表示されます。
通常コンソールに表示される情報が確認できます。
#### Targeting
Targeting セクションには、ターゲティング条件と、それらの間の論理的な接続が表示されます。
一部の条件は、クリックすると追加の詳細にアクセスできます。たとえば、JS 条件の場合、実行される JS が表示されます。
### Feature flags
Feature flags タブには、Kameleoon がページ上で検出するすべてのフィーチャーフラグが含まれます。
このタブで各フィーチャーフラグの動作を検査します。テーブルには次の情報が含まれます。
* **ID:** フィーチャーフラグの ID。ID をクリックすると詳細情報が表示されます。
* **Name:** フィーチャーフラグの名前。
* **Triggered:** フラグがページでトリガーされた場合は true。
* **Triggered in visit:** フラグが現在の訪問中にトリガーされた場合は true。
* **Active:** フラグが現在ページでアクティブな場合は true。
* **Activated in visit:** フラグが現在のセッションで有効化された場合は true。
* **Displayed variation:** 表示されたバリエーションの ID。**No variation** はユーザーがターゲットされていないことを示します。**0** はリファレンスバリエーションを参照します。
* **Associated variation:** Kameleoon が訪問者に割り当てるバリエーション。ドロップダウンを使用してバリエーションを強制します。**目** のアイコンを使用すると、そのバリエーションをプレビューできます。
フラグ ID をクリックすると、次のような詳細を含む構成にアクセスできます。
* 各バリエーションに挿入された JavaScript または CSS コード (存在する場合)
* ターゲティングおよびセグメンテーション条件
* タイムラインおよび最終更新日
フィーチャーフラグビューは、フィーチャーフラグのデバッグと、リアルタイムでの適切な配信を確認するのに役立ちます。
### Personalizations
このタブには、ページで実行中のすべてのパーソナライゼーションが表示されます。
**Add columns** をクリックして、テーブルをカスタマイズするための列の追加または削除ができます。
* **ID:** パーソナライゼーションの ID。クリックすると詳細が表示されます。
* **Name:** パーソナライゼーションの名前。
* **Triggered:** ターゲットされているかどうか。
* **Triggered In Visit:** パーソナライゼーションが現在の訪問でトリガーされた場合は true、それ以外は false。
* **Active:** パーソナライゼーションが現在ページでアクティブな場合は true、それ以外は false。
* **Associated Variation:** 自分の訪問者コードで割り当てられたバリエーションの ID (ターゲットされていない場合は **0**)。ドロップダウンで選択して、バリエーションを強制することができます。右側の目のアイコンを使用するとプレビューできます。
* **Activated In Visit:** パーソナライゼーションが現在の訪問で有効化された場合は true、それ以外は false。トリガーされたパーソナライゼーションは必ずしも関連するイベントが発生したことを意味しないことに注意してください。複数の追加要因が実行に影響する可能性があるためです。たとえば、キャッピングオプションによって実行が妨げられる場合や、訪問者がパーソナライゼーションのコントロールグループに属している場合があります (その場合、Kameleoon はパーソナライゼーションを表示しません)。
* **Not Exposed Reason:** パーソナライゼーションがトリガーされたが表示されたり有効化されなかった場合、**Not Exposed Reason** フィールドに非露出の理由が詳細に表示されます。可能な値は次のとおりです。
* `GLOBAL_EXCLUSION` (訪問者がすべてのパーソナライゼーションからグローバルに除外された集団の一部)。
* `PERSONALIZATION_EXCLUSION` (訪問者が現在のパーソナライゼーションから除外された集団の一部。たとえば、訪問者がコントロールグループに属する場合)。
* `PRIORITY` (別のパーソナライゼーションの優先度が高い)。
* `SCHEDULE` (スケジュールに従い、パーソナライゼーションが現在オフになっている)。
* `PERSONALIZATION_CAPPING` (パーソナライゼーションが訪問者に関するグローバルキャッピングに達した)。
* `VISITOR_CAPPING` (訪問者がパーソナライゼーションの表示を妨げるキャッピングに達した)。
* `SCENARIO` (シナリオ条件が満たされていないため、パーソナライゼーションは表示されません)。
* `SIMULATION` (シミュレーションモードでは、Kameleoon が非露出を強制します。これは本番環境では発生しません。理由は、パーソナライゼーションが現在のページでトリガーされ、active プロパティが false である場合に利用可能になります。それ以外の場合、値は null になります)。
* **Date Modified:** パーソナライゼーションに対して行われた最後の変更の日付。
#### Variations
パーソナライゼーションの ID をクリックすると、メニューが開きます。最初のタブには、バリエーションの名前と ID、JS/CSS が表示されます (バリエーションにコードが挿入されている場合)。
**Elements** セクションには、バリエーションのために変更されるはずのすべての要素が一覧表示されます。これにより、キャンペーンをデバッグし、ページ上で要素が検出されているかどうかをすばやく確認できます。各要素はそのセレクタによって表されます。要素が赤で表示される場合、その要素はページ上で検出されていません。緑の場合は、ページ上で検出されています。
#### Configuration
パーソナライゼーションの構成全体が拡張機能に表示されます。
通常コンソールに表示される情報が確認できます。
#### Targeting
Targeting セクションには、条件と、それらの間の論理的な接続が表示されます。
一部の条件は、クリックすると追加の詳細にアクセスできます。たとえば、JS 条件の場合、実行される JS が表示されます。
## Assets
### Segments
Segments タブには、パラメータとターゲティングを確認するために、ページ上のすべてのアクティブなセグメントが表示されます。
訪問が条件を一時的にでも満たした場合、セグメントは **Triggered** になります。
セグメント ID をクリックすると、条件の詳細にアクセスできます。
### Custom Data
Custom Data タブには、設定を確認するためのカスタムデータのすべての構成パラメータが表示されます。
**Add columns** をクリックして、列の追加または削除ができます。
* **ID:** カスタムデータの ID。
* **Name:** カスタムデータの名前。
* **Value:** カスタムデータに関連付けられた1つ以上の値がある場合。
* **Format:** String/Boolean/Number
* **Type:** Unique/List
* **Scope:** Page/Visitor/Visit
* **Local:** カスタムデータが訪問者のローカルブラウザを使用しているかどうかを示します。
* **Mapping Identifier:** カスタムデータが、アカウント ID やメールアドレスなど、独自の側のユニークな識別子を使用しているかどうかを示します。
* **Learnable:** カスタムデータで「learnable」機能を有効にしたかどうかを示します。
### Goals
Goals タブには、適切なコンバージョンを確認するためのゴール構成が含まれます。
**Add columns** をクリックして、列の追加または削除ができます。
* **ID:** ゴールの ID。
* **Name:** ゴールの名前。
* **Type:**
* Click
* Scroll
* URL
* Engagement
* Time spent
* Page views
* **Converted:** 現在の訪問中にゴールが変換されたかどうか。
* **Conversions:** このゴールが変換された合計回数。
* **Revenue:** このゴールに関連付けられた合計収益 (該当する場合)。
### Global custom script
ここには、グローバルスクリプト (アプリのスクリプトトラッキングに相当) があります。
## Timeline
Timeline タブには、すべてのキャンペーンイベントとそのタイムスタンプが表示されます。
* **Load event:** Kameleoon が読み込みを開始したとき。
* **Consent initialized:** A/B テストまたはパーソナライゼーションの同意が初期化されました。
* **Consent enabled:** A/B テストおよび/またはパーソナライゼーションの同意が有効になりました。
* **Consent disabled:** A/B テストおよび/またはパーソナライゼーションの同意が無効になりました。
* **Custom data set:** カスタムデータが値 XXXX で表示されます。
* **Global script executed:** グローバルスクリプトが実行されました。
* **Experiment triggered:** ID XXX の実験がトリガーされました。
* **Experiment activated:** ID XXX の実験が有効化されました。
* **Variation displayed:** ID XXX のバリエーションが表示されました。
* **Personalization activated:** ID XXX のパーソナライゼーションが有効化されました。
* **Personalization triggered:** ID XXX のパーソナライゼーションがトリガーされました。
* **Loading aborted:** 理由 XXX またはオプトアウトの理由で読み込みが中断されました。
* **Conversion triggered:** ID XXX のゴール XXXX がトリガーされました。
## Dev tools
### Performance analysis
Performance analysis タブを使用して、スクリプトの構成を分析し、ウェブサイトを遅くする可能性のある部分を特定します。
* **Script size:** CDN によるスクリプトサイズ。
* **Script size (uncompressed):** 全体的なサイズ。
* **Last updated:** スクリプトの最終更新日。
**Engine** セクション (グレー) は、全体の重みの 35% 以上を占める必要があります。そうでない場合、下の Performance スコアは **OPTIMAL** ではなく **POOR** になります。
従うべきガイドラインとして、いくつかの追加の指標が提供されています。
* スクリプトサイズ \< 120 KB
* 実験なし (3か月以上実行されている実験)
* セグメント数が 50 未満
* ゴール数が 50 未満
* グローバルカスタムスクリプト \< 30 KB
### Request analysis
**Request analysis** タブを使用すると、すべてのリクエストを簡単にデバッグできます。
**Add columns** をクリックして、列の追加または削除ができます。
### Visits analysis
**Visits analysis** タブには、すべての訪問に関する情報が表示されます。
* 訪問数
* 各訪問の開始時のタイムスタンプ
* 各訪問中に閲覧されたページ数
* 各訪問の期間
**Add columns** をクリックして、列の追加または削除ができます。
### Code synchronization
Microsoft Visual Studio (VS Code) を Chrome 拡張機能と同期できます。同期により、VS Code と Kameleoon Chrome 拡張機能との間の WebSocket を介して Chrome に自動的に更新が送信され、JS と CSS コードをテストできます。Chrome は次に Kameleoon エンジンに新しいコードを挿入し、ページをリロードします。
詳細については、[VS Code 拡張機能の記事](/developer-docs/developer-tools/vs-code-extension) を参照してください。
### Custom code injection
カスタムコード挿入機能を使用するには:
1. Kameleoon Chrome 拡張機能を開きます。
2. **Custom code injection** をクリックして、カスタム JavaScript コードを管理するページにアクセスします。
3. テキストフィールドにコードを記述または貼り付けます。
4. **Inject code** をクリックします。
拡張機能は、現在のウェブページで挿入されたコードを実行します。
### Tag injection
Kameleoon タグをウェブサイトに挿入するには:
1. 環境 (development、preview、test、production) を選択します。
2. 挿入したいコードを入力します。
3. **Inject tag** をクリックします。
## Options
追加で2つのオプションが利用できます。
### Block Kameleoon script
このオプションは、ページ上で Kameleoon の実験やパーソナライゼーションを実行せずに自分のウェブサイトで作業する必要がある開発者に役立ちます。
### Block Kameleoon tracking request
このオプションは、自分の訪問やコンバージョンが結果に影響しないようにしたい場合に役立ちます。
## トラブルシューティング: 拡張機能がすべてのデータを読み込まないか、動作しない
例外的なケースでは、Kameleoon Chrome 拡張機能の再インストールが必要です。次の手順に従ってください。
1. 右上隅のアバターをクリックしてログアウトし、Kameleoon からログアウトします。
2. すべてのウィンドウを閉じて、Chrome を再度開きます。
3. [ここに移動して](chrome:/extensions/)、Kameleoon 拡張機能を削除します。
4. [拡張機能を再度ダウンロードします](https://chrome.google.com/webstore/detail/kameleoon/nimncjjomfcjmfnghgaopccmdggjfoam)。
5. **Install** をクリックしてから、自分のサイトに移動します。
6. **Activate** をクリックすると、ブラウザが Kameleoon にリダイレクトします。
7. Kameleoon にログインして、**My Sites** ページに移動します。これでインストールが完了します。
8. サイトを閉じて再度開きます。
拡張機能が適切に読み込まれ、表示される情報を確認できます。
ログアウトしていない場合、インストールが機能しない可能性があることに注意してください。
## Web プラグイン
Web プラグインは Chrome 拡張機能の「軽量」バージョンで、Safari や Firefox を含む他の人気のあるブラウザで動作します。
Web プラグインはレスポンシブで、モバイルデバイスでも動作します。現在、プラグインは実験、パーソナライゼーション、セグメント、カスタムデータ、ゴールパフォーマンス指標に関する情報を提供します。
プラグインを使用するには、サイトの URL の後ろに「`/?kameleoonLightExtension=true`」を追加します。例:
`https://www.yourwebsite.com/?kameleoonLightExtension=true`