WebサイトにKameleoonを実装するには、ページのHTMLソースコードにJavaScriptインストールタグを追加します。
HTMLソースコードでKameleoonを実装する
Web実験では、必ずHTMLソースコードの<head>セクション内にKameleoonタグを追加してください。タグを<body>セクション、特にページの末尾に配置すると、フリッカーのリスクが高まります。<head>セクションのできるだけ上の位置、理想的には開始<head>タグの直後に追加してください。この位置に配置することで、ブラウザは他のリソースよりも先にKameleoonのアプリケーションファイルをロードできます。Kameleoonタグの前にCSSやその他のスクリプトを配置すると、フリッカーのリスクが高まります。
ハイブリッドモード(SDKとJavaScriptインストールタグの両方)を使用する場合は、タグを終了</body>タグの直前など、bodyの後半に配置できます。Web SDKを使用する場合、フリッカーは発生しません。
Webサイトで複数のサブドメインを使用している場合は、追加のサブドメイン間でのセッションデータ統合コードを実装スクリプトに含めてください。Kameleoonでは、高度な行動ターゲティングのためにすべてのサブドメインでセッションデータを利用するために、このコードが必要です。 Webサイトにスクリプトやリソースを追加すると、負荷が増加します。Kameleoonはパフォーマンスを優先し、可能な限り最良の結果を達成するためにコードを最適化しています。
アンチフリッカー付き非同期タグ
この方法では、Kameleoonスクリプトを非同期でロードし、アンチフリッカーコードを含めます。Kameleoonは「ブロッキングCSSルール」を使ってページのコンテンツを非表示にし、アプリケーションコードがロードされた時点(通常50ms以内)または指定されたタイムアウト(デフォルト750ms)が経過した時点で削除します。このセーフガードにより、KameleoonがWebサイトをクラッシュさせたり、ページが永久に空白のままになることを防ぎます。
タイムアウトはインストールスニペット内のkameleoonLoadingTimeout JavaScript変数で調整できます。
タイムアウトが発生したものの、最終的にKameleoonのコードがロードされた場合、次の動作はプロジェクトの詳細な確認設定で構成できます。次の2つのオプションがあります。
- そのビジターに対してKameleoonを完全に無効化する。
- Kameleoonのコードを通常通り実行する(フリッカーが発生する可能性があります)。
<script>
// Duration in milliseconds to wait while the Kameleoon application file is loaded
var kameleoonLoadingTimeout = 750;
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonStartLoadTime = Date.now();
if (! document.getElementById("kameleoonLoadingStyleSheet") && ! window.kameleoonDisplayPageTimeOut) {
var kameleoonS = document.getElementsByTagName("script")[0];
var kameleoonCc = "html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }";
var kameleoonStn = document.createElement("style");
kameleoonStn.type = "text/css";
kameleoonStn.id = "kameleoonLoadingStyleSheet";
if (kameleoonStn.styleSheet) {
kameleoonStn.styleSheet.cssText = kameleoonCc;
} else {
kameleoonStn.appendChild(document.createTextNode(kameleoonCc));
}
kameleoonS.parentNode.insertBefore(kameleoonStn, kameleoonS);
window.kameleoonDisplayPage = function(fromEngine) {
if (!fromEngine) {
window.kameleoonTimeout = true;
}
if (kameleoonStn.parentNode) {
kameleoonStn.parentNode.removeChild(kameleoonStn);
}
};
window.kameleoonDisplayPageTimeOut = window.setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);
}
</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script>
SITE_CODEプレースホルダーをプロジェクトのサイトコードに置き換えてください。
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
タイムアウトカウンターは、ブラウザがコードを実行した時点で開始し、engine.jsのダウンロードを開始した時点ではありません。タイムアウトを低く設定しすぎる(例:100ms)と、特に低速接続や他のスクリプトがキューに入っている場合、ブラウザがファイルをダウンロードして実行する十分な時間が確保できない可能性があります。
Kameleoonインストールタグは<head>タグ内または<body>タグの先頭に配置してください。<body>の後半に配置すると、アンチフリッカーコードが正しく機能するために<head>内で実行する必要があるため、ページがロード→消失→再表示する場合があります。
同期タグ
この方法では、Kameleoonスクリプトを同期的にロードしてフリッカーを防ぎます。ただし、このアプローチでは、ブラウザがKameleoonコードをダウンロードして実行するまでページのロードがブロックされるため、パフォーマンスに影響を与える可能性があります。
<script>window.kameleoonQueue = window.kameleoonQueue || [];</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high"></script>
SITE_CODEプレースホルダーをプロジェクトのサイトコードに置き換えてください。
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
アンチフリッカーなしの非同期タグ
このタグは、アンチフリッカー防止なしでKameleoonアプリケーションファイルを非同期でインストールします。ハイブリッドモードを使用している場合など、フリッカーが懸念事項でない場合にこのタグを使用してください。
<script>
window.kameleoonQueue = window.kameleoonQueue || [];
</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script>
SITE_CODEプレースホルダーをプロジェクトのサイトコードに置き換えてください。
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
タグマネージャーでKameleoonを実装する
Kameleoonは主要なタグ管理システム(TMS)すべてをサポートしています。フリッカーを防ぐため、Kameleoonはページのソースコードに直接インストールしてください。TMSを使用するとロードが遅延し、特にTMSがHTMLページの末尾でロードされる場合、目立つフリッカーがしばしば発生します。
KameleoonはTMS実装に起因するフリッカー問題に対する技術サポートを提供しません。TMS環境では外部JavaScriptの同期ロードができません。
TMS実装では、非同期JavaScriptタグを使用してください。
window.kameleoonStartLoadTime = new Date().getTime();
var scriptNode = document.createElement("script");
scriptNode.src = "//SITE_CODE.kameleoon.io/engine.js"; //replace the SITE_CODE variable by your Kameleoon project Sitecode.
scriptNode.type = "text/javascript";
scriptNode.async = true;
scriptNode.setAttribute("data-tagmanager", true);
document.head.appendChild(scriptNode);
Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、kameleoon.euまたはkameleoon.ioのいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
一部のTMSはサーバーサイドサポートを提供しており、問題なくKameleoonをインストールできます。このセットアップは、インストールコードをHTMLに直接埋め込むのと同等です。
正しいトリガーを選択する
TMSを介してKameleoonを実装する場合、スクリプトができるだけ早く実行されるように特定のトリガーを使用してください。各TMSにおいてすべてのページで最も早く発火するトリガーを選択してください。
TMSがKameleoonスクリプトをキャッシュまたは結合するように設定しないでください。アプリケーションファイルには、実験とパーソナライゼーションを実行するために必要な動的構成データが含まれています。このファイルをキャッシュすると、実験が開始されなかったり、正しく実行されなかったりします。TMS内ではアンチフリッカー防止技術を使用しないでください。この環境で正しく動作するように設計されていないためです。
