Skip to main content
WebサイトにKameleoonを実装するには、ページのHTMLソースコードにJavaScriptインストールタグを追加します。

HTMLソースコードでKameleoonを実装する

Web実験では、必ずHTMLソースコードの<head>セクション内にKameleoonタグを追加してください。タグを<body>セクション、特にページの末尾に配置すると、フリッカーのリスクが高まります。<head>セクションのできるだけ上の位置、理想的には開始<head>タグの直後に追加してください。この位置に配置することで、ブラウザは他のリソースよりも先にKameleoonのアプリケーションファイルをロードできます。Kameleoonタグの前にCSSやその他のスクリプトを配置すると、フリッカーのリスクが高まります。
ハイブリッドモード(SDKとJavaScriptインストールタグの両方)を使用する場合は、タグを終了</body>タグの直前など、bodyの後半に配置できます。Web SDKを使用する場合、フリッカーは発生しません。
KameleoonはWeb実験においてアンチフリッカー付き非同期タグの方法を推奨します。この方法は他の方法よりもKameleoonのロードが遅いものの、最も安全な実装を提供します。非同期スクリプトにより、KameleoonがWebサイトのロードをブロックしないことが保証されます。白いオーバーレイは、同期的にロードされたスクリプトを「シミュレート」してフリッカーを防ぎます。ロード時間の高速化を優先する場合は、代わりに同期タグを使用してください。
Webサイトで複数のサブドメインを使用している場合は、追加のサブドメイン間でのセッションデータ統合コードを実装スクリプトに含めてください。Kameleoonでは、高度な行動ターゲティングのためにすべてのサブドメインでセッションデータを利用するために、このコードが必要です。
Webサイトにスクリプトやリソースを追加すると、負荷が増加します。Kameleoonはパフォーマンスを優先し、可能な限り最良の結果を達成するためにコードを最適化しています。

アンチフリッカー付き非同期タグ

この方法では、Kameleoonスクリプトを非同期でロードし、アンチフリッカーコードを含めます。Kameleoonは「ブロッキングCSSルール」を使ってページのコンテンツを非表示にし、アプリケーションコードがロードされた時点(通常50ms以内)または指定されたタイムアウト(デフォルト750ms)が経過した時点で削除します。このセーフガードにより、KameleoonがWebサイトをクラッシュさせたり、ページが永久に空白のままになることを防ぎます。 タイムアウトはインストールスニペット内のkameleoonLoadingTimeout JavaScript変数で調整できます。
タイムアウトが発生したものの、最終的にKameleoonのコードがロードされた場合、次の動作はプロジェクトの詳細な確認設定で構成できます。次の2つのオプションがあります。
  • そのビジターに対してKameleoonを完全に無効化する。
  • Kameleoonのコードを通常通り実行する(フリッカーが発生する可能性があります)。
SITE_CODEプレースホルダーをプロジェクトのサイトコードに置き換えてください。
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
タイムアウトカウンターは、ブラウザがコードを実行した時点で開始し、engine.jsのダウンロードを開始した時点ではありません。タイムアウトを低く設定しすぎる(例:100ms)と、特に低速接続や他のスクリプトがキューに入っている場合、ブラウザがファイルをダウンロードして実行する十分な時間が確保できない可能性があります。
Kameleoonインストールタグは<head>タグ内または<body>タグの先頭に配置してください。<body>の後半に配置すると、アンチフリッカーコードが正しく機能するために<head>内で実行する必要があるため、ページがロード→消失→再表示する場合があります。

同期タグ

この方法では、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をインストールできます。このセットアップは、インストールコードをHTMLに直接埋め込むのと同等です。

正しいトリガーを選択する

TMSを介してKameleoonを実装する場合、スクリプトができるだけ早く実行されるように特定のトリガーを使用してください。各TMSにおいてすべてのページで最も早く発火するトリガーを選択してください。
TMSがKameleoonスクリプトをキャッシュまたは結合するように設定しないでください。アプリケーションファイルには、実験とパーソナライゼーションを実行するために必要な動的構成データが含まれています。このファイルをキャッシュすると、実験が開始されなかったり、正しく実行されなかったりします。TMS内ではアンチフリッカー防止技術を使用しないでください。この環境で正しく動作するように設計されていないためです。

FAQ

標準の Content-Security-Policy (CSP) HTTP ヘッダーを介してリソース(スクリプト、画像、メディア、CSS)の読み込みを制限している場合は、Kameleoon のリソースを読み込めるようにサイトの CSP を更新してください。同じポリシーで、Kameleoon アプリケーションファイルとクライアントサイド SDK もカバーされます。

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

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

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

Kameleoon は製品に新しい機能を定期的に追加しているため、追加の URL が発生する可能性があります。CSP ヘッダーには、可能なすべてのホストとリソースタイプ(スクリプト、画像など)を明示的にリストしてください。
各行に表示される [your-site-code] を Kameleoon の サイトコード に置き換え、この内容を設定に追加してください:
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://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 スクリプト用のドメイン https://[your-site-code].kameleoon.xx は、プロジェクトによって異なる場合があります。プロジェクトは作成日に応じて kameleoon.eu または kameleoon.io のいずれかを使用します。Kameleoon アプリに表示されているプロジェクトのドメインを使用してください。ハイブリッドモード で Kameleoon を使用している場合も同様です。
Kameleoon の JavaScript エンジンは、ページのバリエーションを実装する際に、カスタムデータやカスタム JavaScript などのカスタムコードを Kameleoon に追加するために eval() 関数を必要とします。eval() 関数により、Kameleoon は実行時にこのカスタムコードを動的に実行できます。CSP ディレクティブが eval() 関数の使用を妨げている場合は、Kameleoon のインストールタグの前に以下の JavaScript スニペットを実装してください:
CSP が eval() をブロックしている場合、コードスニペットを実装してもこれらの制限は解除されません。完全な機能を確保するには、関連する CSP ディレクティブを調整して eval() または類似の関数を許可してください。そうしないと、ブラウザのセキュリティ強制により、Kameleoon の特定の高度なターゲティング機能やカスタマイズ機能にアクセスできないままになります。
Kameleoon グラフィックエディタ(シミュレーションパネルを含む)も eval() 関数を必要とします。ただし、Kameleoon Chrome 拡張機能をインストールし、Dev Tools > Tag injection > Bypass policies 設定を有効にすると、ポリシーをローカルで上書きしてこの要件を回避できます。また、サイトコードも指定する必要があります。Bypass policies 設定を有効にすると、Chrome ブラウザでグラフィックエディタを使用できます。
Chrome 拡張機能の Bypass policies 設定
CSP ディレクティブが eval() 関数をブロックしている場合、Kameleoon の一部の機能は使用できません。これらの制限は、FAQ で言及されているコードスニペットや回避策を使用しても適用されます。CSP が明示的に eval() を許可しない限り、以下の機能は使用できないままになります:
  • カスタム JavaScript 条件でセグメントをターゲティングする(条件が非同期で実行される 場合にのみサポート)。
ターゲティング条件の非同期設定
  • カスタム JavaScript コードでカスタムデータを使用する。
  • カスタム JavaScript コードで取得チャネルを使用する。
Kameleoon が サブドメイン間でセッションデータを統合する ために使用する iframe は、eval() 関数を使用しません。CSP の eval() ポリシーにかかわらず、セッションデータの統合を実装できます。
残念ながら、できません。SRI は有用なセキュリティ機能を提供しますが、Kameleoon アプリケーションファイルは時間とともに変化します。もし変化しなかった場合、再デプロイなしで実験を即座に開始・停止するなどの機能は不可能になります。ファイルの内容が変わるため、リソースハッシュも変わります。つまり SRI は使用できません。そうでなければ、サーバー上で更新されるとすぐにブラウザがリソースをブロックしてしまうでしょう。
Kameleoon のスクリプトは既に短く、コードは既に Brotli または Gzip で圧縮されているため、ミニファイ版を使用してもページの読み込み時間に大きな影響はありません。Kameleoon はミニファイ版を推奨していませんが、必要な場合は以下に用意しています。

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

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

同期タグ、またはアンチフリッカーなしの非同期タグで、サブドメイン間でセッションデータを統合する ために統合セッションデータタグを使用する場合:
アンチフリッカー付きの非同期タグと統合セッションデータタグを使用する場合は、以下の順序で3つのスクリプトタグを追加してください:
  1. アンチフリッカー付きの非同期タグ。
  2. 統合セッションデータタグ。
  3. Kameleoon インストールタグ。
インストールタグは変更しないでください。それらのコードは広範囲にテストおよび最適化されています。変更すると動作しないセットアップになる可能性があります。インストールタグの変更が必要な場合は、Kameleoon のカスタマーサクセスマネージャーに連絡して、開発者と調整してください。独自に変更を試みないでください。
インストールタグを、独自の別の外部スクリプトに含めないでください。たとえば、次のようなことは絶対に行わないでください:
技術的には機能するかもしれませんが、Kameleoon のパフォーマンスに大きく影響し、目立つちらつき効果が発生します。このセットアップは、関連する利点なしにタグマネージャーを使用する問題を引き起こします。