メインコンテンツへスキップ
Kameleoonは、お客様からよく寄せられる質問でこのリストを定期的に更新しています。
ウェブサイトが標準の Content-Security-Policy (CSP) HTTPヘッダー経由でリソース(スクリプト、画像、メディア、CSS)の読み込みを制限している場合は、Kameleoon のリソースを読み込めるようにサイトの CSP を更新してください。

簡単なセットアップ(ワイルドカード使用)

script-src は常に default-src よりも優先されます。CSP で既に完全なセットアップを使用している場合は、このセットアップを使用しないでください。
CSP ヘッダー設定に以下の内容を追加します:
default-src https://*.kameleoon.com https://*.kameleoon.io https://*.kameleoon.eu https://*.kameleoon.net https://*.experimentation.dev;

完全なセットアップ(詳細版)

Kameleoonは製品に新しい機能を定期的に追加しているため、追加のURLが発生する可能性があります。CSPヘッダーには、可能なすべてのホストとリソースタイプ(スクリプト、画像など)を明示的にリストしてください。
各行の [your-site-code] を Kameleoon の サイトコード に置き換えて、これを設定に追加します:
script-src https://[your-site-code].kameleoon.xx https://static.kameleoon.com https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://client-config.kameleoon.com https://sdk-config.kameleoon.eu https://electra.kameleoon.com https://aibuilder.kameleoon.com https://static.experimentation.dev 'unsafe-eval';
style-src https://static.kameleoon.com https://static.products.kameleoon.com https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://electra.kameleoon.com https://aibuilder.kameleoon.com https://static.experimentation.dev 'unsafe-inline'; 
connect-src https://[your-site-code].kameleoon.xx https://static.kameleoon.com https://eu-data.kameleoon.io https://eu-data.kameleoon.eu https://na-data.kameleoon.io https://na-data.kameleoon.eu https://editor.kameleoon.com https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://api.kameleoon.com https://customers.kameleoon.com https://logger.kameleoon.io https://client-config.kameleoon.com https://sdk-config.kameleoon.eu https://api.products.kameleoon.com https://static.experimentation.dev https://sdk-config.experimentation.dev https://eu-data.experimentation.dev;
img-src https://[your-site-code].kameleoon.xx https://storage.kameleoon.eu https://storage.kameleoon.io https://graphical-editor.kameleoon.com https://simulation.kameleoon.com https://static.kameleoon.com https://images.products.kameleoon.com https://static.experimentation.dev;
frame-src 'self' https://graphical-editor.kameleoon.com https://static.experimentation.dev;
CSP ポリシー内の各 URL には特定の目的があります:
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://(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): グラフィックエディタで作成された実験で使用される画像を読み込みます。
Prompt-Based Experimentation (PBX)
  • https://aibuilder.kameleoon.com: プロンプトベースエディタで使用されます。
  • https://electra.kameleoon.com: プロンプトベースエディタで使用されます。
  • https://storage.kameleoon.(eu|io): プロンプトベースエディタで画像を読み込みます。
  • https://api.kameleoon.com: アカウント関連の情報を読み込みます。
  • https://sdk-config.kameleoon.eu: プロンプトベースエディタで有効化された Kameleoon フィーチャーフラグを制御します。
シミュレーション
  • 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 にはスクリプトサイズを最小化するためにシミュレーションパスやアプリケーション固有の情報は含まれていません。これらの詳細を提供するには、内部リソースと読み込み指示に必要なデータを engine.js に供給するフルスクリプト kameleoonFull.js を読み込んでください。
  • https://static.kameleoon.com: 内部リソースを読み込みます。
  • https://static.experimentation.dev: 内部リソースを読み込みます。
  • https://sdk-config.experimentation.dev: Kameleoon 製品で有効化された Kameleoon フィーチャーフラグを制御します。
  • https://eu-data.experimentation.dev: ロギング用にトラッキングデータを送信します。
Kameleoon スクリプト用のドメイン https://[your-site-code].kameleoon.xx はプロジェクトによって異なる場合があります。プロジェクトは作成日に応じて kameleoon.eu または kameleoon.io のいずれかを使用します。プロジェクトの Kameleoon App に表示されているドメインを使用してください。
いいえ。Kameleoon のスクリプトは最先端のテクノロジーを使用して非同期的に実行され(非同期インストールスニペットを使用している場合)、ブラウザによって90分間完全にキャッシュされます。まれな CDN インシデント(99.99%の稼働時間)の際でもページの読み込みをブロックすることはありません。4G接続またはそれ以上のネットワーク条件で、平均してスクリプトは70ms未満で読み込まれます。Kameleoon はさらに、TypeScript と Brotli を組み合わせた高度な圧縮技術により、ベーススクリプトサイズをわずか28.4 KB に抑えています。

CDN 配信とスケーラビリティ

engine.js スクリプトは Cloudflare CDN を介して配信されるため、ウェブサイトのトラフィック量に関係なく自動的にスケールします。どのトラフィックレベルでも読み込みや遅延の問題はありません。Cloudflare のグローバルネットワークが配信を処理するため、スパイクや持続的な高トラフィックが訪問者のスクリプトパフォーマンスに影響することはありません。

キャッシュ

デフォルトでは、ブラウザは engine.js を90分間キャッシュし、リピーター訪問者の再読み込み時間を最小化します。ユースケースでより短いキャッシュ期間が必要な場合は、リクエストにより最短1分まで短縮できます。アカウントの設定を変更するには Kameleoon サポートにお問い合わせ ください。

重要な考慮事項

スクリプトサイズは実行する実験の数とその内容(CSS/JavaScript)によって増加することがあります。すぐに読み込む必要のない実験やパーソナライゼーションキャンペーンには、“DELAYED” タグ を使用してください。これにより、最初のページ読み込み後まで重要でない実験の読み込みを遅延させます。Kameleoon はこれらを賢く管理します。アイドル時間が10秒経過した後、または訪問者がターゲットされ、コントロール以外のバリエーションが割り当てられたときにのみ設定をダウンロードします。このアプローチにより、優先順位の高い実験の完全な機能を提供しつつ、読み込みパフォーマンスへの影響を最小限に抑えます。
Kameleoon の JavaScript エンジンは、ページのバリエーションを実装する際に、カスタムデータやカスタム JavaScript などのカスタムコードを Kameleoon に追加するために eval() 関数を必要とします。eval() 関数により、Kameleoon はこのカスタムコードを実行時に動的に実行できます。eval() 関数の使用を妨げる Content Security Policy (CSP) ディレクティブを使用している場合は、Kameleoon インストールタグの前に以下の JavaScript スニペットを実装してください:
<script>
window.kameleoonQueue = window.kameleoonQueue || [];

function excludeKameleoonEval() {
	Kameleoon.Utils.runProtectedScript = function (code, fileName) {
		const script = document.createElement("script");

		const wrappedCode = "(function () {\n" + code + "\n})();";
		script.innerHTML = wrappedCode;

		if (fileName) {
			script.innerHTML += "\n//# sourceURL=" + fileName;
		}

		document.head.appendChild(script);
	};
}

kameleoonQueue.push({
	level: "IMMEDIATE",
	command: excludeKameleoonEval
}); 
</script>

//Add the Kameleoon Installation tag here. Refer to this documentation: https://developers.kameleoon.com/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.mdx
<script src="//SITE_CODE.kameleoon.eu/engine.js" fetchpriority="high" async></script>
CSP が eval() をブロックしている場合、コードスニペットを実装してもこれらの制限が解除されることはありません。完全な機能を保証するには、関連する CSP ディレクティブを調整して eval() または類似の関数を許可してください。そうしないと、Kameleoon の特定の高度なターゲティングまたはカスタマイズ機能はブラウザのセキュリティ強制によりアクセスできないままになります。
Kameleoon グラフィックエディタ(シミュレーションパネルを含む)も eval() 関数を必要とします。ただし、Kameleoon Chrome 拡張機能をインストールし、Dev Tools > Tag injection > Bypass policies 設定を有効にしてポリシーをローカルで上書きすることで、この要件を回避できます。また、サイトコードも提供する必要があります。Bypass policies 設定を有効にすると、Chrome ブラウザでグラフィックエディタを使用できます。
Bypass policies setting in the Chrome extension
CSP ディレクティブが eval() 関数をブロックしている場合、Kameleoon の一部の機能は使用できません。これらの制限は、FAQ で言及されているコードスニペットや回避策を使用しても適用されます。CSP が明示的に eval() を許可しない限り、以下の機能は使用できないままになります:
  • カスタム JavaScript 条件でセグメントをターゲティングする(条件が非同期で実行される 場合にのみサポート)。
Targeting condition async setting
  • カスタム JavaScript コードでカスタムデータを使用する。
  • カスタム JavaScript コードで取得チャネルを使用する。
はい、Kameleoon はこの高度なオプションを提供しています。サーバーで受信したすべての HTTP リクエストを (eu|na)-data.kameleoon.(eu|io) に転送してください。たとえば、トラッキングドメインとして tracking.yourdomain.com を選択した場合、トラッキングリクエストは tracking.yourdomain.com への POST になります。サーバーはその後、必要なすべてのデータとパラメータとともにリクエストを (eu|na)-data.kameleoon.(eu|io) ホストに転送する必要があります。このオプションを有効にするには、Customer Success Manager にお問い合わせください。
(eu|na)-data.kameleoon.(eu|io) にリクエストを転送する際は、リクエストURLを (eu|na)-data.kameleoon.(eu|io) に書き換えてください。元の Host: HTTPヘッダーをあなたのドメインに設定したまま転送するだけでは不十分です。Host: ヘッダーを (eu|na)-data.kameleoon.(eu|io) に設定してください。
残念ながら、できません。SRI は有用なセキュリティ機能を提供しますが、Kameleoon アプリケーションファイルは時間とともに変化します。もし変化しなかった場合、再デプロイなしで実験を即座に開始・停止するなどの機能は不可能になります。ファイルの内容が変わるため、リソースハッシュも変わります。つまり SRI は使用できません。そうでなければ、サーバー上で更新されるとすぐにブラウザがリソースをブロックしてしまうでしょう。
これは Firefoxの既知のバグ です。Firefox チームが修正するまでは、以下の回避策に従ってください: リンクされた CSS リソースの後に <script> タグ(ほぼ空でも)が続くようにしてください。例:
<link href="https://www.example.com/web/style.css" media="all" rel="stylesheet" type="text/css" />
<script>/**/</script>
これにより、ちらつき効果が完全に解消されます。
Kameleoon スクリプトは既に短く、ミニファイ版を使用してもページ読み込み時間に大きな影響はありません。コードは既に Brotli または Gzip で圧縮されているためです。Kameleoon はミニファイ版を推奨していませんが、必要な場合は以下に用意されています。

アンチフリッカー付き非同期読み込み

<script>
  var a=750;window.kameleoonQueue=window.kameleoonQueue||[];window.kameleoonStartLoadTime=Date.now();if(!document.getElementById("kameleoonLoadingStyleSheet")&&!window.kameleoonDisplayPageTimeOut){var b=document.getElementsByTagName("script")[0];var c="html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }";var d=document.createElement("style");d.type="text/css";d.id="kameleoonLoadingStyleSheet";if(d.styleSheet){d.styleSheet.cssText=c}else{d.appendChild(document.createTextNode(c))}b.parentNode.insertBefore(d,b);window.kameleoonDisplayPage=function(e){if(!e){window.kameleoonTimeout=true}if(d.parentNode){d.parentNode.removeChild(d)}};window.kameleoonDisplayPageTimeOut=window.setTimeout(window.kameleoonDisplayPage,a)};
</script>
<script src="//SITE_CODE.kameleoon.eu/engine.js" fetchpriority="high" async></script>

サブドメイン間でセッションデータを統合する

同期タグまたはアンチフリッカーなしの非同期タグのいずれかで サブドメイン間でセッションデータを統合する ために統合セッションデータタグを使用する場合:
<script>
  window.kameleoonIframeURL="https://www.customerdomain.com/path/to/kameleoon-iframe.html";var f=document.createElement("a");window.kameleoonLightIframe=false;f.href=window.kameleoonIframeURL;window.kameleoonIframeOrigin=f.origin||(f.protocol+"//"+f.hostname);if(location.href.indexOf(window.kameleoonIframeOrigin)!=0){window.kameleoonLightIframe=true;var g=function(event){if(window.kameleoonIframeOrigin==event.origin&&event.data.slice&&event.data.slice(0,9)=="Kameleoon"){window.removeEventListener("message",g);window.kameleoonExternalIFrameLoaded=true;if(window.Kameleoon){Kameleoon.Utils.runProtectedScript(event.data);Kameleoon.Analyst.load()}else{window.kameleoonExternalIFrameLoadedData=event.data}}};if(window.addEventListener){window.addEventListener("message",g,false)}var h=document.createElement("iframe");h.src=kameleoonIframeURL;h.id="kameleoonExternalIframe";h.style="float: left !important; opacity: 0.0 !important; width: 0px !important; height: 0px !important;";document.head.appendChild(h)};
</script>
アンチフリッカー付き非同期タグと統合セッションデータタグを使用する場合は、以下の順序で3つのスクリプトタグを追加してください:
  1. アンチフリッカー付き非同期タグ。
  2. 統合セッションデータタグ。
  3. Kameleoon インストールタグ。
<script>
  var a=750;window.kameleoonQueue=window.kameleoonQueue||[];window.kameleoonStartLoadTime=Date.now();if(!document.getElementById("kameleoonLoadingStyleSheet")&&!window.kameleoonDisplayPageTimeOut){var b=document.getElementsByTagName("script")[0];var c="html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }";var d=document.createElement("style");d.type="text/css";d.id="kameleoonLoadingStyleSheet";if(d.styleSheet){d.styleSheet.cssText=c}else{d.appendChild(document.createTextNode(c))}b.parentNode.insertBefore(d,b);window.kameleoonDisplayPage=function(e){if(!e){window.kameleoonTimeout=true}if(d.parentNode){d.parentNode.removeChild(d)}};window.kameleoonDisplayPageTimeOut=window.setTimeout(window.kameleoonDisplayPage,a)};
</script>
<script>
  window.kameleoonIframeURL="https://www.customerdomain.com/path/to/kameleoon-iframe.html";var f=document.createElement("a");window.kameleoonLightIframe=false;f.href=window.kameleoonIframeURL;window.kameleoonIframeOrigin=f.origin||(f.protocol+"//"+f.hostname);if(location.href.indexOf(window.kameleoonIframeOrigin)!=0){window.kameleoonLightIframe=true;var g=function(event){if(window.kameleoonIframeOrigin==event.origin&&event.data.slice&&event.data.slice(0,9)=="Kameleoon"){window.removeEventListener("message",g);window.kameleoonExternalIFrameLoaded=true;if(window.Kameleoon){Kameleoon.Utils.runProtectedScript(event.data);Kameleoon.Analyst.load()}else{window.kameleoonExternalIFrameLoadedData=event.data}}};if(window.addEventListener){window.addEventListener("message",g,false)}var h=document.createElement("iframe");h.src=kameleoonIframeURL;h.id="kameleoonExternalIframe";h.style="float: left !important; opacity: 0.0 !important; width: 0px !important; height: 0px !important;";document.head.appendChild(h)};
</script>
<script src="//SITE_CODE.kameleoon.eu/engine.js" fetchpriority="high" async></script>
インストールタグを変更しないでください。それらのコードは広範囲にテストおよび最適化されています。変更すると動作しないセットアップになる可能性があります。インストールタグの変更が必要な場合は、Kameleoon アカウントマネージャーに連絡して開発者と調整してください。独自に変更を試みないでください。
インストールタグを独自の別の外部スクリプトに含めないでください。たとえば、以下のようなことは絶対に行わないでください:
<script src="resources/scripts/kameloon-loader.js" fetchpriority="high" async></script>
技術的には機能するかもしれませんが、Kameleoon のパフォーマンスに大きく影響し、目立つちらつき効果が発生します。このセットアップは、関連する利点なしにタグマネージャーを使用する問題を引き起こします。
はい、データが保存されているパーティションを暗号化できます。このオプションには追加のセットアップコストが必要です。詳細については、Customer Success Manager にお問い合わせください。
はい、重要でない実験を最初のページ読み込み後まで遅延させることができます。実験を遅延させるには、遅延したい実験に DELAYED タグを追加してください。詳細については、タグの管理 のドキュメントを参照してください。Kameleoon は「DELAYED」タグが付けられた実験をインテリジェントに管理します。アイドル時間が10秒経過した後、または訪問者がターゲットされコントロール以外のバリエーションが割り当てられたときにのみ設定をダウンロードします。リソース集約的なテストを遅延させて、最高のユーザー体験を提供することに集中してください。
Kameleoon のプラットフォームは、データ量が増加しても最適なパフォーマンスを維持できるよう、高いスケーラビリティと弾力性を提供します。プラットフォームは1秒あたり平均20,000クエリの負荷を処理し、ピーク時には最大100,000クエリまで対応します。主な要素は以下のとおりです:
  • スケーラブルなアーキテクチャ: 分散型でモジュラーなアーキテクチャにより水平スケーリングが可能です。
  • オートスケーリングインフラ: クラウドベースのインフラが計算リソースを自動的にスケーリングします。
  • ロードバランシング: 高度な技術によりサーバー間にトラフィックを均等に分散します。
  • データの取り込みと処理: 堅牢な API とデータブローカーが大量のデータを効率的に管理します。
  • スケーラビリティのテスト: 定期的な負荷とストレステストにより、システムが極端な状況に対応できることを保証します。
  • 弾力的なデータストレージ: マルチ階層型ストレージにより、データへの迅速なアクセスと長期的なスケーラビリティが可能です。
Kameleoon はデータフローアーキテクチャで以下の NoSQL データベースと技術を使用しています:
  • Hadoop File System(Spark と併用)
  • Cassandra
  • ClickHouse
  • Kafka
Kameleoon エンジンは、シームレスな機能を保証するためにいくつかのネットワークリクエストを開始します:

Segments Request

  • 目的: 訪問者によってターゲットされたセグメントのイベントを収集します。
  • エンドポイント: https://${SITECODE}.kameleoon.io/audiences/segments.js
  • メソッド: GET
  • : ブラウザはファイルを90分間キャッシュします。

Live-update Experiments Configuration Request

  • 目的: LIVE-UPDATE タグ付き実験の設定を取得します。
  • エンドポイント: https://${SITECODE}.kameleoon.io/live-experiments/config.js
  • メソッド: GET
  • : ブラウザはファイルを2分間キャッシュします。

Deferred Experiment Variation Request

  • 目的: DELAYED タグ付き実験 のバリエーションデータを読み込みます。
  • エンドポイント: https://${SITECODE}.kameleoon.io/experiments/${action.id}/variations/${variationId}.js
  • メソッド: GET
  • : ブラウザはファイルを30日間キャッシュします。

Deferred Personalization Variation Request

  • 目的: DELAYED タグ付きパーソナライゼーション のバリエーションデータを読み込みます。
  • エンドポイント: https://${SITECODE}.kameleoon.io/personalizations/${action.id}/variations/${variationId}.js
  • メソッド: GET
  • : ブラウザはファイルを30日間キャッシュします。

Previous Visits Request

Tracking Events Request

  • 目的: 訪問中の イベント を記録します。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/visit/events
  • メソッド: POST
Kameleoon は、スクロールやクリックが発生したときに15秒ごとにイベントを送信します。これにより、正確なセッション長のトラッキングが保証されます。エンジンがアクティビティを検出しない場合、追加のトラッキング呼び出しは行われません。

IP address Request

  • 目的: IPアドレスに基づく訪問者の除外/含有を可能にします。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/ip
  • メソッド: GET
  • : Kameleoon は IP をデータベースに保存しません。訪問者のブラウザは比較目的でのみ IP を使用します。

Geolocation Request

  • 目的: ターゲティングと分析のためのジオロケーションデータを取得します。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/geolocation
  • メソッド: GET

Current Weather Request

  • 目的: 現在の天気状況を返します。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/weather/weather
  • メソッド: GET

Weather Forecast Request

  • 目的: 5日間の天気予報を返します。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/weather/forecast
  • メソッド: GET

Kameleoon Script Detection Request

  • 目的: Kameleoon スクリプトの実装状態を検出します。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/active-script/event
  • メソッド: POST

Products Request

  • 目的: ターゲティングとレコメンデーションのための商品イベントを収集します。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/product/events
  • メソッド: POST

Kameleoon Conversion Scores Request

  • 目的: ターゲティング用の予測スコアを取得します。
  • エンドポイント: https://(eu|na)-data.kameleoon.(eu|io)/predict/latestPredictionScoreHistograms
  • メソッド: GET