> ## 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の実験エンジンの動作について理解します。
# エンジンの実行フロー
実験エンジンが実験を読み込み、トラッキングし、実行する方法について学びましょう。
## 実験エンジンの概要
Kameleoon は、ウェブおよびフルスタックアプリケーションの実験に対応する単一プラットフォームの最適化ソリューションを提供します。プラットフォームは2つの主要なソリューションをサポートしています:
* **Web Experimentation**: ウェブサイトやウェブアプリケーション向けに A/B テストやその他の形式の実験を実施します。
* **Feature Experimentation**: フルスタックのフィーチャーフラグと実験を可能にします。Kameleoon は、A/B 実験でのちらつきを排除し、既存のツールと統合し、タスクを自動化するための追加の API とツールも提供します。
### コードフロー: 読み込み
```mermaid theme={null}
graph TD
%% Main Flow Nodes
EntryPoint(["Entry point"])
JSFile(["Kameleoon.js"])
LoadEngine(["Load the Kameleoon engine"])
InitEngine(["Initialize the Kameleoon engine"])
EventLoaded("Send the Kameleoon::Loaded event")
CheckAbort(["Check abort conditions"])
%% Branching Outcomes
NoCond("No")
YesCond("Yes")
%% Yes Flow Nodes
EventAborted("Send the Kameleoon::Aborted event")
StopExecution("Stop the execution of Kameleoon
on the webpage")
%% Side-Car/Optional Nodes
DetailCmdQueue("Execute the Kameleoon CommandQueue code
with the level: IMMEDIATE argument")
DetailFlicker("Optional: Remove the anti-flicker CSS rule.
Store the timestamp of the engine initialize completion step.")
DetailDefer(["Optional: Defer all campaigns and configurations
(goals, segments, and so on) in a second call."])
%% Continuation Placeholder
NoDown("⬇")
%% --- Connections ---
%% Main Path
EntryPoint --> JSFile
JSFile --> LoadEngine
LoadEngine --> InitEngine
InitEngine --> EventLoaded
EventLoaded --> CheckAbort
%% Conditions
CheckAbort --> NoCond
CheckAbort --> YesCond
%% Yes Path
YesCond --> EventAborted
EventAborted --> StopExecution
%% No Path
NoCond --> NoDown
%% Side Actions
LoadEngine --> DetailCmdQueue
InitEngine --> DetailFlicker
%% Connect the two Optional blocks
DetailFlicker --> DetailDefer
%% --- Styling ---
classDef default fill:#F2F2FF,stroke:#8A8AC2,stroke-width:1px,color:#111;
classDef whiteBox fill:#FFFFFF,stroke:#E2E2F2,stroke-width:1px,color:#111;
classDef borderless fill:none,stroke:none,color:#111;
class EventLoaded,EventAborted,StopExecution,DetailCmdQueue,DetailFlicker,NoCond,YesCond whiteBox;
class NoDown borderless;
```
Kameleoon エンジンは `engine.js` タグ(旧 `kameleoon.js`)を実行します。アプリケーションページの HTML ソースコードを通じてこの JavaScript タグを呼び出します。
エントリーポイントでは、エンジンは以下を行います:
1. **アクティベーション**: `engine.js` タグは `Kameleoon.Analyst.load()` を介して Activation API 呼び出しを呼び出します。
2. **コマンドキューの実行**: 読み込み後、エンジンは [kameleoonQueue配列](../../apis/activation-api-js/api-reference/command-queue#syntax) をチェックし、プッシュした順序でコマンドを実行します。Kameleoon が関数をインスタンス化する前に実行する必要のあるコードにこれを使用してください。
Kameleoon は `IMMEDIATE` パラメータでキューに追加された関数のみを実行します。
3. **アンチフリッカーとグローバル変数**: **ちらつき** は、バリエーションが表示される前にオリジナルのページが一時的に表示されたときに発生します。この効果は不正確な結果につながる可能性があります。Kameleoon はちらつきを排除するために高度な技術を使用しています。アンチフリッカーを設定すると、システムは Kameleoon スクリプトを [アンチフリッカーコード](../implementation-and-deployment/standard-implementation#アンチフリッカー付き非同期タグ) で非同期に読み込みます。
Kameleoon の読み込みが完了すると、`window.KameleoonEndLoadTime` 変数に完了タイムスタンプが保存されます。
インストールスニペットの `kameleoonLoadingTimeout` 変数を使用してタイムアウトを調整します。デフォルト値の1000ミリ秒(または最新の実装では750ミリ秒)を維持することを推奨します。この変数は、アプリケーションファイルを待つ間、インストールタグがページ表示を遅延できる最大時間を決定します。
4. **ブロッキング理由の確認**: 初期化を完了する前に、エンジンは以下のブロッキング理由を確認します:
* **ストレージ**: ローカルまたはセッションストレージが利用できない場合、エンジンは終了し、`STORAGE` コード付きの `Kameleoon::Aborted` イベントを返します。
* **タイムアウト**: `engine.js` の読み込みに750ミリ秒以上かかり、ページや訪問に対して Kameleoon を無効にするようプロジェクトを設定している場合、エンジンは `TIMEOUT` を返します。
* **プリレンダー**: Kameleoon はドキュメントの準備ができていることを要求します(`document.visibilityState == "prerender"`)。準備ができていない場合、スクリプトは終了し `PRERENDER` を返します。可視性状態が変化すると再読み込みされます。
* **カスタムスクリプト**: カスタムスクリプトがセッションを中止すると、エンジンは `SCRIPT` を返します。
* **パラメータ**: URL に `KameleoonDisabled == true` が含まれている場合、エンジンは `PARAMETER` を返して終了します。
* **無効**: ダッシュボードでプロジェクトを無効にすると、エンジンは `DISABLED` を返します。詳細については [この記事](/user-manual/project-management/manage-your-projects) を参照してください。
カスタム中止スクリプトを設定できるのは Kameleoon の技術アカウントマネージャーのみです。
5. **延期**: 必要な場合、エンジンはコードとキャンペーンを2回目の呼び出しまで延期します。この場合、エンジンは `https://SITECODE.kameleoon.com/engine-configuration.js`(旧名: `kameleoon-configuration.js`)および `https://SITECODE.kameleoon.com/engine-campaigns.js`(旧名: `kameleoon-actions.js`)からそれぞれ SYNC モードで設定とキャンペーンを取得します。
すべてのキャンペーンを延期するオプションを設定できるのは Kameleoon の技術アカウントマネージャーのみです。"DELAYED" タグを使用して特定の実験を延期できます。
ブロッキング理由がない場合、エンジンは訪問者データのトラッキング段階に進みます。
### コードフロー: トラッキング
```mermaid theme={null}
graph TD
%% --- MAIN SPINE ---
ParseBrowser(["Parse the browser and OS"])
UnifySession("If the Unify session data across subdomains option is enabled:")
RetrieveData["Send a message to the Kameleoon iframe to retrieve the data from the main domain's local storage.
Otherwise, retrieve it from the current local storage."]
InitConsent(["Initialize consent management"])
%% MERGED NODE: InitVisitor + its details
InitVisitor["Initialize the Visitor object
---
1. Obtain all previous visits from local storage.
Optional: If the Real-Time Sync of visits option is enabled, an additional call retrieves visits stored on Kameleoon Data servers.
2. Generate a visitorCode ID if no existing one is found in the KameleoonVisitorCode cookie or local storage."]
%% MERGED NODE: SendEvents + its detail
SendEvents["Send events
---
Optional: Initialize the product recommendation history."]
ExecGlobalScript(["Execute the project global custom script"])
ExecQueue(["Execute the remaining code in the Kameleoon CommandQueue"])
EventStarted(["Send the Kameleoon::Started event"])
%% MERGED NODE: WaitDOM
WaitDOM["Wait for the DOM to be ready.
---
Optional: If the Enable support for dynamic websites option is enabled, Kameleoon listens for URL changes to reload its engine."]
InitCampaigns(["Initialize campaigns and actions"])
FlowContinues("⬇")
%% --- MAIN FLOW CONNECTIONS ---
ParseBrowser --> UnifySession
UnifySession --> RetrieveData
RetrieveData --> InitConsent
InitConsent --> InitVisitor
InitVisitor --> SendEvents
SendEvents --> ExecGlobalScript
ExecGlobalScript --> ExecQueue
ExecQueue --> EventStarted
EventStarted --> WaitDOM
WaitDOM --> InitCampaigns
InitCampaigns --> FlowContinues
%% --- BRANCHES (Now with plenty of room to fan out) ---
%% Event Branches
PageEvent("Page event
---
Page URL and title")
StaticDataEvent("StaticData event
---
Data about the device, OS, window size, visit number, time since previous visit, timezone, and language")
ActivityEvent("Activity event
---
Data about clicks and activity")
SendEvents --> PageEvent
SendEvents --> StaticDataEvent
SendEvents --> ActivityEvent
%% Campaign Branches
Adblocker("Check Adblocker
---
Check if the visitor is using an adblocker, and send an Adblocker event if they are.")
RunMutObs("Run MutationObserver
---
Run the optimization MutationObserver to fill all classes of elements and IDs present on the page for querySelector optimization.")
GeoOpt("Optional: Geolocation / IP
---
IP: IP request to get the user IP address (https://data.kameleoon.io/ip).
Geolocation: Request to get user geolocation (Country, Region, City).")
LiveUpdateOpt("Optional: Live Update
---
Load configuration from https://SITECODE.kameleoon.com/live-experiments/config.js.")
InitCampaigns --> Adblocker
InitCampaigns --> RunMutObs
InitCampaigns --> GeoOpt
InitCampaigns --> LiveUpdateOpt
%% --- STYLING ---
classDef default fill:#F2F2FF,stroke:#8A8AC2,stroke-width:1px,color:#111;
classDef whiteBox fill:#FFFFFF,stroke:#E2E2F2,stroke-width:1px,color:#111;
classDef detailBox fill:#FFFFFF,stroke:#8A8AC2,stroke-width:2px,color:#111;
classDef borderless fill:none,stroke:none,color:#111;
class UnifySession,RetrieveData,PageEvent,StaticDataEvent,ActivityEvent,Adblocker,RunMutObs,GeoOpt,LiveUpdateOpt whiteBox;
%% Detail boxes get a slightly thicker border to denote they contain sub-steps
class InitVisitor,SendEvents,WaitDOM detailBox;
class FlowContinues borderless;
```
初期化後、Kameleoon は訪問者データを取得します:
1. Kameleoon は訪問者のブラウザやオペレーティングシステムなどの技術データを収集します。
2. [サブドメイン間でセッションデータを統合](../technical-concepts/unify-session-data-storage-across-subdomains) を有効にしている場合、Kameleoon はメインのローカルストレージドメイン上の iFrame を使用して過去のデータを取得します。
3. `real-time sync of visits` または [`cross-device`](../../cross-device-experimentation) オプションを有効にしている場合、エンジンは Kameleoon サーバーから使用履歴を取得します。
リアルタイム同期は、Kameleoon Feature Experimentation または [ITP の影響](../technical-concepts/itp-management) を管理するための Safari ではデフォルトで有効です。
4. エンジンは訪問者を初期化します。`kameleoonVisitorCode` Cookie やローカルストレージにコードが存在しない場合、エンジンは新しい訪問者コードを割り当て、すべての訪問を解析します。
5. エンジンは、ページ URL、デバイス、オペレーティングシステム、ジオロケーション、ゴールなどのデータを解析および保存します。
商品レコメンデーションアドオンを使用している場合、Kameleoon はここでレコメンデーションエンジンをインスタンス化します。
6. グローバルカスタムスクリプトは、実験を初期化する前に挿入された JavaScript を実行します。
7. グローバル実験スクリプトは、カスタムグローバルスクリプトの後に実行されます。このスクリプトはターゲティングに関係なく実行され、実験が一時停止すると停止します。詳細については [このガイド](/user-manual/experimentation/web-experimentation/graphic-based-experiments/getting-started-with-the-graphic-editor#Experiment-specific_custom_script) を参照してください。
8. エンジンは、`IMMEDIATE` パラメータを使用していない `CommandQueue` の保留中のコマンドを実行します。
9. `Kameleoon::Started` イベントは、初期化が完了し、エンジンがデータを保存したときにトリガーされます。
10. [SPA管理](/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app) を有効にすると、Kameleoon は URL の変更を監視します。URL が変更されると、エンジンが再読み込みされ、キャンペーンが新しいビューで正しく機能するようにします。
11. キャンペーンを初期化する前に、Kameleoon は以下を行います:
* 広告ブロッカーを確認します。
* `querySelector` 操作を最適化するために `mutationObserver` を実行します。
* セグメントが必要とする場合は、`https://eu-data.kameleoon.io/ip` からジオロケーションデータを取得します。
12. キャンペーン設定を読み込むために、Kameleoon は `https://SITECODE.kameleoon.com/live-experiments/config.js` からデータを取得し、2分間キャッシュします。
Live Update Experiments 機能は、`LIVE-UPDATE` でタグ付けされた実験をリフレッシュし、ブラウザのキャッシュ遅延なしにリアルタイムで設定変更を可能にします。
### コードフロー: 実行
```mermaid theme={null}
graph TD
%% Main Start Node
StartNode(["Run all Experiments / Personalizations"])
%% --- LEFT BRANCH: Holdout Control ---
%% Check Node
CheckHoldout(["Check if visitor is in an 'Holdout Control group'"])
%% Outcomes
OutcomeNo[No]
OutcomeYes[Yes]
%% No Flow Nodes
HoldoutInclusionEvent(["Send holdout inclusion event"])
IfTargetingTrue(["If targeting is 'true' for the visitor"])
OptionalDelayedTag(["(Optional) If the campaign has a 'DELAYED' tag"])
DownloadVariationData["Download variation data
---
https://SITECODE.kameleoon.com/{personalizations/experiments}/$campaign_id/variations/$variation_id.js"]
SendExpPersEvent(["Send Experiment / Personalization event"])
%% Yes Flow Nodes
HoldoutExclusionEvent(["Send holdout exclusion event"])
%% Left Branch Connections
StartNode --> CheckHoldout
CheckHoldout --> OutcomeNo
CheckHoldout --> OutcomeYes
OutcomeNo --> HoldoutInclusionEvent
HoldoutInclusionEvent --> IfTargetingTrue
IfTargetingTrue --> OptionalDelayedTag
OptionalDelayedTag --> DownloadVariationData
DownloadVariationData --> SendExpPersEvent
OutcomeYes --> HoldoutExclusionEvent
%% --- RIGHT BRANCH: Targeting and Goals ---
%% Split Point Node
RunTargetingSegments(["Run all Targeting Segments"])
%% Splitting Nodes
%% Flow 1: Targeting Event
IfSegmentConditions(["If the segment conditions are met for the visitor"])
SendTargetingEvent(["Send Targeting event"])
%% Flow 2: Goal Flow
OptionalAIOpportunity(["(Optional) If the AI Opportunity Detection add-on is enabled"])
DownloadOpportunitySegment["Download opportunity segment and execute them
---
https://SITECODE.kameleoon.com/audiences/segments.js"]
RunAllGoals(["Run all goals"])
IfGoalConverted(["If the goal is converted for the visitor"])
SendGoalEvent(["Send Goal event"])
%% Right Branch Connections
StartNode --> RunTargetingSegments
%% Flow 1 Connections
RunTargetingSegments --> IfSegmentConditions
IfSegmentConditions --> SendTargetingEvent
%% Flow 2 Connections
RunTargetingSegments --> OptionalAIOpportunity
OptionalAIOpportunity --> DownloadOpportunitySegment
DownloadOpportunitySegment --> RunAllGoals
RunAllGoals --> IfGoalConverted
IfGoalConverted --> SendGoalEvent
%% --- STYLING ---
classDef mainStep fill:#F2F2FF,stroke:#8A8AC2,stroke-width:1px,rx:10,ry:10,color:#111;
classDef whiteBox fill:#FFFFFF,stroke:#E2E2F2,stroke-width:1px,color:#111;
classDef conditionalPill fill:#D0D0FF,stroke:#8A8AC2,stroke-width:1.5px,rx:10,ry:10,color:#111;
classDef outcome fill:#ffffff,stroke:#8A8AC2,stroke-width:1px,rx:5,ry:5,color:#111;
class StartNode,CheckHoldout,HoldoutInclusionEvent,HoldoutExclusionEvent,SendExpPersEvent,RunTargetingSegments,SendTargetingEvent,RunAllGoals,SendGoalEvent mainStep;
class DownloadVariationData,DownloadOpportunitySegment whiteBox;
class IfTargetingTrue,OptionalDelayedTag,IfSegmentConditions,OptionalAIOpportunity,IfGoalConverted conditionalPill;
class OutcomeNo,OutcomeYes outcome;
```
実験ループが実行されると、エンジンは以下を行います:
1. 訪問者が "holdout" グループの一部である場合、エンジンは holdout 含有イベントを送信します。
2. エンジンは `nonce`、`experimentID`、`variationId` を含む露出イベントをトリガーします。例: `eventType=experiment&nonce=5800F1BDD0667747&id=250830&variationId=978588`。
3. 訪問者が holdout グループにいない場合、エンジンは "Holdout exclusion event" を送信します。
Holdout 実験により、他の実験を管理およびブロックできます:
* エンジンは最初に holdout 実験をチェックします。
* ユーザーが holdout グループにいる場合、エンジンは彼らをグループに割り当て、レポート用のイベントを送信します。
* ユーザーがリファレンスグループにいる場合、エンジンは他のすべての実験をブロックします。
* ユーザーがバリエーショングループにいる場合、エンジンは他の実験を進めることを許可します。
詳細は [Holdout 管理ガイド](/user-manual/experiment-analytics/analyze-results/advanced-analysis/create-and-manage-holdouts) で学べます。
エンジンはその後、データ収集を開始します。パーソナライゼーションがトリガーされたが表示されない場合、エンジンは以下のいずれかのブロッキング理由を返します:
* **PERSONALIZATION\_CAPPING**: パーソナライゼーションがグローバル訪問者制限に達しました。
* **SCHEDULE**: パーソナライゼーションがスケジュールに基づいてオフです。
* **SCENARIO**: 一部のシナリオ条件が満たされていません。
* **PRIORITY**: より優先順位の高いパーソナライゼーションが存在します。
* **VISITOR\_CAPPING**: 訪問者が表示を妨げる制限に達しました。
実験に `DELAYED` タグを関連付けた場合、エンジンは最初のページ読み込み後にそれをトリガーします。エンジンは `https://SITECODE.kameleoon.com/(personalizations)/$campaign_id/variations/$variation_id.js` からバリエーションデータをダウンロードします。
実験を遅延させることは、ちらつきが最小限のポップアップやスクロール下の修正に役立ちます。
AI Opportunity Detection アドオンの場合、Kameleoon は機会を検出するために `https://SITECODE.kameleoon.com/audiences/segments.js` からセグメント定義をダウンロードします。
Kameleoon は過去90日以内に作成または変更されたセグメントをチェックし、`[DEV]`、`[TEST]`、または `[QA]` で始まるものを除外します。
この情報を結果ページで分析して、コンバージョン率と潜在的な売上の成長を追跡します。