> ## 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.

# 標準実装

> JavaScriptインストールタグをHTMLソースコードに追加して、Webサイト上にKameleoonを実装します。

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

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

Web実験では、必ずHTMLソースコードの`<head>`セクション内にKameleoonタグを追加してください。タグを`<body>`セクション、特にページの末尾に配置すると、[フリッカー](../technical-concepts/flicker-management-and-performance)のリスクが高まります。`<head>`セクションのできるだけ上の位置、理想的には開始`<head>`タグの直後に追加してください。この位置に配置することで、ブラウザは他のリソースよりも先にKameleoonのアプリケーションファイルをロードできます。Kameleoonタグの前にCSSやその他のスクリプトを配置すると、フリッカーのリスクが高まります。

<Note>
  ハイブリッドモード(SDKとJavaScriptインストールタグの両方)を使用する場合は、タグを終了`</body>`タグの直前など、bodyの後半に配置できます。Web SDKを使用する場合、フリッカーは発生しません。
</Note>

KameleoonはWeb実験において**アンチフリッカー付き非同期タグ**の方法を推奨します。この方法は他の方法よりもKameleoonのロードが遅いものの、最も安全な実装を提供します。非同期スクリプトにより、KameleoonがWebサイトのロードをブロックしないことが保証されます。白いオーバーレイは、同期的にロードされたスクリプトを「シミュレート」して[フリッカー](../technical-concepts/flicker-management-and-performance)を防ぎます。ロード時間の高速化を優先する場合は、代わりに[同期タグ](#同期タグ)を使用してください。

<Tip>
  Webサイトで複数のサブドメインを使用している場合は、追加の[サブドメイン間でのセッションデータ統合](../technical-concepts/unify-session-data-storage-across-subdomains)コードを実装スクリプトに含めてください。Kameleoonでは、高度な行動ターゲティングのためにすべてのサブドメインでセッションデータを利用するために、このコードが必要です。
</Tip>

<Info>
  Webサイトにスクリプトやリソースを追加すると、負荷が増加します。Kameleoonはパフォーマンスを優先し、可能な限り最良の結果を達成するためにコードを最適化しています。
</Info>

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

この方法では、Kameleoonスクリプトを非同期でロードし、アンチフリッカーコードを含めます。Kameleoonは「ブロッキングCSSルール」を使ってページのコンテンツを非表示にし、アプリケーションコードがロードされた時点(通常50ms以内)または指定されたタイムアウト(デフォルト750ms)が経過した時点で削除します。このセーフガードにより、KameleoonがWebサイトをクラッシュさせたり、ページが永久に空白のままになることを防ぎます。

タイムアウトはインストールスニペット内の`kameleoonLoadingTimeout` JavaScript変数で調整できます。

<Tip>
  タイムアウトが発生したものの、最終的にKameleoonのコードがロードされた場合、次の動作はプロジェクトの[詳細な確認設定](/user-manual/project-management/manage-your-projects#behavior-if-timeout-occurs)で構成できます。次の2つのオプションがあります。

  * そのビジターに対してKameleoonを完全に無効化する。
  * Kameleoonのコードを通常通り実行する(フリッカーが発生する可能性があります)。
</Tip>

<Important>
  `kameleoon.js`を使用するインストールスクリプトURLは非推奨であり、Kameleoonは**2026年6月1日**以降サポートを終了します。スニペットを`kameleoon.js`の代わりに`engine.js`を使うように置き換えてください。この日付以降、`kameleoon.js`を含むキャンペーンは動作しなくなります。
</Important>

```html theme={null}
<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`プレースホルダーをプロジェクトの[サイトコード](/user-manual/faq#how-do-i-find-my-sitecode)に置き換えてください。

<Note>
  Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、`kameleoon.eu`または`kameleoon.io`のいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
</Note>

<Note>
  タイムアウトカウンターは、ブラウザがコードを実行した時点で開始し、`engine.js`のダウンロードを開始した時点ではありません。タイムアウトを低く設定しすぎる(例:100ms)と、特に低速接続や他のスクリプトがキューに入っている場合、ブラウザがファイルをダウンロードして実行する十分な時間が確保できない可能性があります。
</Note>

<Warning>
  Kameleoonインストールタグは`<head>`タグ内または`<body>`タグの先頭に配置してください。`<body>`の後半に配置すると、アンチフリッカーコードが正しく機能するために`<head>`内で実行する必要があるため、ページがロード→消失→再表示する場合があります。
</Warning>

### 同期タグ

この方法では、Kameleoonスクリプトを同期的にロードしてフリッカーを防ぎます。ただし、このアプローチでは、ブラウザがKameleoonコードをダウンロードして実行するまでページのロードがブロックされるため、パフォーマンスに影響を与える可能性があります。

<Important>
  `kameleoon.js`を使用するインストールスクリプトURLは非推奨であり、Kameleoonは**2026年6月1日**以降サポートを終了します。スニペットを`kameleoon.js`の代わりに`engine.js`を使うように置き換えてください。この日付以降、`kameleoon.js`を含むキャンペーンは動作しなくなります。
</Important>

```html theme={null}
<script>window.kameleoonQueue = window.kameleoonQueue || [];</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high"></script> 
```

`SITE_CODE`プレースホルダーをプロジェクトの[サイトコード](/user-manual/faq#how-do-i-find-my-sitecode)に置き換えてください。

<Note>
  Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、`kameleoon.eu`または`kameleoon.io`のいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
</Note>

### アンチフリッカーなしの非同期タグ

このタグは、アンチフリッカー防止なしでKameleoonアプリケーションファイルを非同期でインストールします。ハイブリッドモードを使用している場合など、フリッカーが懸念事項でない場合にこのタグを使用してください。

<Important>
  `kameleoon.js`を使用するインストールスクリプトURLは非推奨であり、Kameleoonは**2026年6月1日**以降サポートを終了します。スニペットを`kameleoon.js`の代わりに`engine.js`を使うように置き換えてください。この日付以降、`kameleoon.js`を含むキャンペーンは動作しなくなります。
</Important>

```html theme={null}
<script>
  window.kameleoonQueue = window.kameleoonQueue || [];
</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script> 
```

`SITE_CODE`プレースホルダーをプロジェクトの[サイトコード](/user-manual/faq#how-do-i-find-my-sitecode)に置き換えてください。

<Note>
  Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、`kameleoon.eu`または`kameleoon.io`のいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
</Note>

## タグマネージャーでKameleoonを実装する

Kameleoonは主要なタグ管理システム(TMS)すべてをサポートしています。[フリッカー](../technical-concepts/flicker-management-and-performance)を防ぐため、Kameleoonはページのソースコードに直接インストールしてください。TMSを使用するとロードが遅延し、特にTMSがHTMLページの末尾でロードされる場合、目立つフリッカーがしばしば発生します。

KameleoonはTMS実装に起因するフリッカー問題に対する技術サポートを提供しません。TMS環境では外部JavaScriptの同期ロードができません。

TMS実装では、**非同期JavaScriptタグ**を使用してください。

<Important>
  `kameleoon.js`を使用するインストールスクリプトURLは非推奨であり、Kameleoonは**2026年6月1日**以降サポートを終了します。スニペットを`kameleoon.js`の代わりに`engine.js`を使うように置き換えてください。この日付以降、`kameleoon.js`を含むキャンペーンは動作しなくなります。
</Important>

```js theme={null}
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);
```

<Note>
  Kameleoonスクリプトのドメインはプロジェクトごとに異なります。プロジェクトの作成日に応じて、`kameleoon.eu`または`kameleoon.io`のいずれかが使用されます。プロジェクトのKameleoonアプリで表示されているドメインを使用してください。
</Note>

<Tip>
  一部のTMSはサーバーサイドサポートを提供しており、問題なくKameleoonをインストールできます。このセットアップは、インストールコードをHTMLに直接埋め込むのと同等です。
</Tip>

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

TMSを介してKameleoonを実装する場合、スクリプトができるだけ早く実行されるように特定のトリガーを使用してください。各TMSにおいてすべてのページで最も早く発火するトリガーを選択してください。

<Warning>
  TMSがKameleoonスクリプトをキャッシュまたは結合するように設定しないでください。アプリケーションファイルには、実験とパーソナライゼーションを実行するために必要な動的構成データが含まれています。このファイルをキャッシュすると、実験が開始されなかったり、正しく実行されなかったりします。

  **TMS内ではアンチフリッカー防止技術を使用しないでください。この環境で正しく動作するように設計されていないためです。**
</Warning>
