HTMLソースコードでKameleoonを実装する
Web実験では、必ずHTMLソースコードの<head>セクション内にKameleoonタグを追加してください。タグを<body>セクション、特にページの末尾に配置すると、フリッカーのリスクが高まります。<head>セクションのできるだけ上の位置、理想的には開始<head>タグの直後に追加してください。この位置に配置することで、ブラウザは他のリソースよりも先にKameleoonのアプリケーションファイルをロードできます。Kameleoonタグの前にCSSやその他のスクリプトを配置すると、フリッカーのリスクが高まります。
ハイブリッドモード(SDKとJavaScriptインストールタグの両方)を使用する場合は、タグを終了
</body>タグの直前など、bodyの後半に配置できます。Web SDKを使用する場合、フリッカーは発生しません。Webサイトにスクリプトやリソースを追加すると、負荷が増加します。Kameleoonはパフォーマンスを優先し、可能な限り最良の結果を達成するためにコードを最適化しています。
アンチフリッカー付き非同期タグ
この方法では、Kameleoonスクリプトを非同期でロードし、アンチフリッカーコードを含めます。Kameleoonは「ブロッキングCSSルール」を使ってページのコンテンツを非表示にし、アプリケーションコードがロードされた時点(通常50ms以内)または指定されたタイムアウト(デフォルト750ms)が経過した時点で削除します。このセーフガードにより、KameleoonがWebサイトをクラッシュさせたり、ページが永久に空白のままになることを防ぎます。 タイムアウトはインストールスニペット内のkameleoonLoadingTimeout JavaScript変数で調整できます。
SITE_CODEプレースホルダーをプロジェクトのサイトコードに置き換えてください。
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、
kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。タイムアウトカウンターは、ブラウザがコードを実行した時点で開始し、
engine.jsのダウンロードを開始した時点ではありません。タイムアウトを低く設定しすぎる(例:100ms)と、特に低速接続や他のスクリプトがキューに入っている場合、ブラウザがファイルをダウンロードして実行する十分な時間が確保できない可能性があります。同期タグ
この方法では、Kameleoonスクリプトを同期的にロードしてフリッカーを防ぎます。ただし、このアプローチでは、ブラウザがKameleoonコードをダウンロードして実行するまでページのロードがブロックされるため、パフォーマンスに影響を与える可能性があります。SITE_CODEプレースホルダーをプロジェクトのサイトコードに置き換えてください。
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、
kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。アンチフリッカーなしの非同期タグ
このタグは、アンチフリッカー防止なしでKameleoonアプリケーションファイルを非同期でインストールします。ハイブリッドモードを使用している場合など、フリッカーが懸念事項でない場合にこのタグを使用してください。SITE_CODEプレースホルダーをプロジェクトのサイトコードに置き換えてください。
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、
kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。タグマネージャーでKameleoonを実装する
Kameleoonは主要なタグ管理システム(TMS)すべてをサポートしています。フリッカーを防ぐため、Kameleoonはページのソースコードに直接インストールしてください。TMSを使用するとロードが遅延し、特にTMSがHTMLページの末尾でロードされる場合、目立つフリッカーがしばしば発生します。 KameleoonはTMS実装に起因するフリッカー問題に対する技術サポートを提供しません。TMS環境では外部JavaScriptの同期ロードができません。 TMS実装では、非同期JavaScriptタグを使用してください。Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、
kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。正しいトリガーを選択する
TMSを介してKameleoonを実装する場合、スクリプトができるだけ早く実行されるように特定のトリガーを使用してください。各TMSにおいてすべてのページで最も早く発火するトリガーを選択してください。FAQ
ホワイトリストに登録する必要がある Kameleoon のドメインは何ですか?
ホワイトリストに登録する必要がある Kameleoon のドメインは何ですか?
標準の Content-Security-Policy (CSP) HTTP ヘッダーを介してリソース(スクリプト、画像、メディア、CSS)の読み込みを制限している場合は、Kameleoon のリソースを読み込めるようにサイトの CSP を更新してください。同じポリシーで、Kameleoon アプリケーションファイルとクライアントサイド SDK もカバーされます。CSP ポリシー内の各 URL には特定の目的があります:
簡単なセットアップ(ワイルドカード使用)
CSP ヘッダー設定に以下の内容を追加します:完全なセットアップ(詳細版)
各行に表示される[your-site-code] を Kameleoon の サイトコード に置き換え、この内容を設定に追加してください:Web Experimentation
https://[your-site-code].kameleoon.xx: Kameleoon Web Experimentation のアプリケーションスクリプトengine.js(旧名:kameleoon.js)を読み込みます。https://(eu|na)-data.kameleoon.(eu|io): トラッキングに使用されます。https://logger.kameleoon.io: ロギング用にトラッキングデータを送信します。https://data.kameleoon.net: Kameleoon Simulation ツールを使用して複数のサブドメインにわたって実験を QA する場合に必要です。
Feature Experimentation (クライアントサイド SDK)
https://client-config.kameleoon.com: SDK バージョン < 2.1.0 で必要です。https://sdk-config.kameleoon.eu: SDK バージョン >= 2.1.0 で必要です。https://events.kameleoon.com:8110: リアルタイムストリーミング(プレミアムオプション)に必要です。https://api.kameleoon.com: SDK リクエストを認証します(/oauth/token)。https://(eu|na)-data.kameleoon.(eu|io): トラッキングに使用されます。https://logger.kameleoon.io: ロギング用にトラッキングデータを送信します。
グラフィックエディタ
https://static.kameleoon.com: (非推奨)旧グラフィックエディタの静的リソースを読み込みます。https://editor.kameleoon.com: (非推奨)旧グラフィックエディタで使用されます。https://graphical-editor.kameleoon.com: 新しいグラフィックエディタで使用されます。https://storage.kameleoon.(eu|io): グラフィックエディタで作成された実験で使用される画像を読み込みます。
プロンプトベース実験 (PBX)
https://aibuilder.kameleoon.com: プロンプトベースエディタで使用されます。https://electra.kameleoon.com: プロンプトベースエディタで使用されます。https://storage.kameleoon.(eu|io): プロンプトベースエディタで画像を読み込みます。https://api.kameleoon.com: アカウント関連の情報を読み込みます。https://sdk-config.kameleoon.eu: プロンプトベースエディタで有効化された Kameleoon フィーチャーフラグを制御します。wss://electra.kameleoon.com: データ交換に使用されます。
シミュレーション
https://api.kameleoon.com: 旧シミュレーションで使用されます。https://simulation.kameleoon.com: 新しいシミュレーションで使用されます。
商品レコメンデーション
https://static.products.kameleoon.com: 商品レコメンデーションモジュールのリソースを読み込みます。https://api.products.kameleoon.com: 商品レコメンデーションモジュールが使用する API。https://images.products.kameleoon.com: レコメンデーション用の商品画像を読み込みます。
API と統合
https://api.kameleoon.com: ブラウザから直接テストするために Automation API を使用する場合に必要です。https://customers.kameleoon.com: SDK API を使用する場合、または Kameleoon が開発したカスタム統合を使用する場合に必要です。
内部リソース
デフォルトでは、
engine.js はスクリプトサイズを最小限に抑えるため、シミュレーションのパスやアプリケーション固有の情報を含みません。これらの詳細を提供するには、完全なスクリプト kameleoonFull.js を読み込んでください。このスクリプトは、内部リソースと読み込み指示に関する必要なデータを engine.js に提供します。https://static.kameleoon.com: 内部リソースを読み込みます。https://static.experimentation.dev: 内部リソースを読み込みます。https://sdk-config.experimentation.dev: Kameleoon 製品で有効化された Kameleoon フィーチャーフラグを制御します。https://eu-data.experimentation.dev: ロギング目的でトラッキングデータを送信します。
Kameleoonのエンジン(engine.jsアプリケーションファイル)が eval() 関数を使用しているのはなぜですか?
Kameleoonのエンジン(engine.jsアプリケーションファイル)が eval() 関数を使用しているのはなぜですか?
Kameleoon の JavaScript エンジンは、ページのバリエーションを実装する際に、カスタムデータやカスタム JavaScript などのカスタムコードを Kameleoon に追加するために Kameleoon グラフィックエディタ(シミュレーションパネルを含む)も
CSP ディレクティブが 
eval() 関数を必要とします。eval() 関数により、Kameleoon は実行時にこのカスタムコードを動的に実行できます。CSP ディレクティブが eval() 関数の使用を妨げている場合は、Kameleoon のインストールタグの前に以下の JavaScript スニペットを実装してください:CSP が
eval() をブロックしている場合、コードスニペットを実装してもこれらの制限は解除されません。完全な機能を確保するには、関連する CSP ディレクティブを調整して eval() または類似の関数を許可してください。そうしないと、ブラウザのセキュリティ強制により、Kameleoon の特定の高度なターゲティング機能やカスタマイズ機能にアクセスできないままになります。eval() 関数を必要とします。ただし、Kameleoon Chrome 拡張機能をインストールし、Dev Tools > Tag injection > Bypass policies 設定を有効にすると、ポリシーをローカルで上書きしてこの要件を回避できます。また、サイトコードも指定する必要があります。Bypass policies 設定を有効にすると、Chrome ブラウザでグラフィックエディタを使用できます。
eval() 関数をブロックしている場合、Kameleoon の一部の機能は使用できません。これらの制限は、FAQ で言及されているコードスニペットや回避策を使用しても適用されます。CSP が明示的に eval() を許可しない限り、以下の機能は使用できないままになります:- カスタム JavaScript 条件でセグメントをターゲティングする(条件が非同期で実行される 場合にのみサポート)。

- カスタム JavaScript コードでカスタムデータを使用する。
- カスタム JavaScript コードで取得チャネルを使用する。
eval() 関数を使用しません。CSP の eval() ポリシーにかかわらず、セッションデータの統合を実装できます。Kameleoon アプリケーションファイルで Subresource Integrity (SRI) を使用できますか?
Kameleoon アプリケーションファイルで Subresource Integrity (SRI) を使用できますか?
残念ながら、できません。SRI は有用なセキュリティ機能を提供しますが、Kameleoon アプリケーションファイルは時間とともに変化します。もし変化しなかった場合、再デプロイなしで実験を即座に開始・停止するなどの機能は不可能になります。ファイルの内容が変わるため、リソースハッシュも変わります。つまり SRI は使用できません。そうでなければ、サーバー上で更新されるとすぐにブラウザがリソースをブロックしてしまうでしょう。
Kameleoon が提供するインストールタグを変更できますか?
Kameleoon が提供するインストールタグを変更できますか?
インストールタグは変更しないでください。それらのコードは広範囲にテストおよび最適化されています。変更すると動作しないセットアップになる可能性があります。インストールタグの変更が必要な場合は、Kameleoon のカスタマーサクセスマネージャーに連絡して、開発者と調整してください。独自に変更を試みないでください。
別の外部スクリプトにインストールタグを追加できますか?
別の外部スクリプトにインストールタグを追加できますか?
インストールタグを、独自の別の外部スクリプトに含めないでください。たとえば、次のようなことは絶対に行わないでください:技術的には機能するかもしれませんが、Kameleoon のパフォーマンスに大きく影響し、目立つちらつき効果が発生します。このセットアップは、関連する利点なしにタグマネージャーを使用する問題を引き起こします。