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

# Web Experimentation インストールガイド

> プロジェクトセットアップ、ドメイン構成、同意設定、フリッカリング防止など、ウェブサイトに Kameleoon スクリプトをインストールして構成します。

本ページでは、ウェブサイト用の Web Experimentation プロジェクトの作成、プロジェクト設定の構成を含む Kameleoon のインストール手順を順に解説します。(Feature Experimentation プロジェクトは Web / Backend と Mobile app の両方のプラットフォームをサポートします。)

## 概要

ウェブサイトやモバイルアプリで実験を起動する前に、Kameleoon スクリプトをインストールする必要があります。一意のプロジェクトコードを含むこのスクリプトは、ソースコードの `<head>` タグに追加する必要があります。

パッケージで許可されている場合は、Kameleoon アカウントから複数のサイトやアプリを管理できます。これは、ステージングまたはプリプロダクション環境でのテストに役立ちます。

プロジェクトを作成すると、セットアップフォームが 4 つのステップをガイドします。インストール方法によって表示されるオプションが決まります:

```mermaid theme={null}
flowchart LR
    MI[MAIN INFORMATION] --> IM[INSTALLATION METHOD]
    IM --> CS[CODE SNIPPET AND LOADING MODE]
    IM --> TM[TAG MANAGER]
    IM --> SH[SHOPIFY]
    CS --> TC[TECHNICAL CONFIGURATION]
    TM --> TC
    TC --> CL[CHECKLIST]
    SH --> CL
```

クロスドメイントラッキングを有効にすると、チェックリストには Kameleoon の静的 HTML ファイルをメインドメインでホストするタスクも含まれます。

## プロジェクト構成

[Kameleoon アプリ](https://app.kameleoon.com/) で、**Admin** > **Projects** をクリックするとプロジェクトのリストが表示されます。デフォルトでは、サインアップ時に入力したウェブサイトまたはモバイルアプリ用のプロジェクトがあります。

### 既存のプロジェクトを構成する

プロジェクトのインストール設定を変更するには:

1. **Admin** > **Projects** をクリックします。
2. プロジェクトの行にある **Edit** をクリックし、**Setup** タブをクリックします。
3. **Installation method** または **Technical configuration** セクションで、**Edit** をクリックします。3 ステップのセットアップフォームが開きます。

### 新しいプロジェクトを作成する

新しいプロジェクトを作成するには:

1. **Admin** > **Projects** をクリックし、**New project** をクリックします。
2. **Web Experimentation** を選択します。同じプロジェクトからフィーチャーフラグや SDK 実験も実行する場合は **All campaign types** を選択します。プロジェクトを作成した後は、タイプを変更できません。**Next** をクリックします。
3. メインプロジェクトドメインを入力し、色を選択して、オプションで名前、説明、タグを追加し、**Next** をクリックします。
4. インストール方法と、コードスニペットの場合はローディングモードを選択し、**Next** をクリックします。
5. 動的ウェブサイトのサポート(コードスニペットのみ)、リソースホスティング、ドメインを構成し、**Next** をクリックします。インストール方法として **Shopify** を選択した場合、Kameleoon はこのステップをスキップします。
6. チェックリストのタスクを完了し、**Complete setup** をクリックします。

後で完了するには、**Installation method** または **Technical configuration** ステップで **Save for later** をクリックします。Kameleoon はプロジェクトをドラフトとして保存し、プロジェクトは **Projects** ページに **Draft** ステータスで表示されます。**Complete setup** をクリックすると、Kameleoon はプロジェクトを **Enabled** として保存します。オプションの完全なリストについては、[プロジェクトの作成](https://docs.kameleoon.com/ja/user-manual/project-management/create-a-project.md#プロジェクトセットアップステップ) を参照してください。

> [!NOTE]
>
> 追加のプロジェクトを作成する能力は Kameleoon パッケージによって異なります。

## 実装設定を選択する

セットアップフォームの **Installation method** ステップで、Kameleoon のインストール方法と、ウェブサイトでの Kameleoon の読み込み方法を選択します。タグマネージャーを使用した Kameleoon のインストール方法やカスタムスクリプトタイプの実装方法など、技術的な詳細については、[標準実装](https://docs.kameleoon.com/ja/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md) の記事を参照してください。

## 同意

ウェブサイトに Kameleoon スクリプトをインストールする前に、セットアップが組織の同意管理ポリシーに準拠していることを確認してください。

Consent Management Platform(CMP)を使用している場合は、Kameleoon と統合して、実験とデータ収集がいつアクティベートされるかを制御できます。

詳細については、Kameleoon の [同意管理の記事](https://docs.kameleoon.com/ja/user-manual/project-management/consent-management-policy.md) を参照してください。

## ドメインとサブドメイン

Kameleoon スクリプトを読み込み、その機能にアクセスできるドメインとサブドメインを定義できます。

* **Technical configuration** ステップの **Domains and subdomains** で、クロスドメイントラッキング用にドメインを許可リストに追加するため、ドメインを入力して **Add domain** をクリックします。
  * これにより、Kameleoon のグラフィックエディタを使用したり、ドメイン間で訪問者データを保存/取得したりできます。
  * リストにないドメインで Kameleoon を使用しようとすると、ブラウザのセキュリティポリシー(CORS)により読み込みが失敗します。

### クロスドメイントラッキング

クロスドメイントラッキングを使用すると、次のことが可能になります:

* 異なるドメインとサブドメイン間で同じ訪問者を追跡する(例: `example.com` と `example.org`)。
* ドメイン間を移動するユーザーを "新規訪問者" として再分類することを避ける。
* プロパティ間で一貫したパーソナライゼーションと実験エクスペリエンスを提供する。

> [!NOTE]
>
> 複数のドメインにわたってセッションデータを統合する予定がある場合は、クロスドメイントラッキングを有効にする必要があります。有効にするには、**Domains and subdomains** の下にある **Track visitors across listed subdomains** をオンにします。

## 認可

サブドメインをターゲットにしている場合は、次の 2 つの HTTP ヘッダー設定を確認してください:

* [Kameleoon iframe をホストするページに X-Frame-Options レスポンスヘッダーを設定しない](#issue-refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin)
* [Content Security Policy で Kameleoon リソースを許可する](#issue-refused-to-load-the-script)

> [!NOTE]
>
> Safari でのクロスサイトトラッキングを制限する Apple の Intelligent Tracking Prevention(ITP)について詳しくは、この [ITP ドキュメント](https://docs.kameleoon.com/ja/developer-docs/web-experimentation/technical-concepts/itp-management.md) で学んでください。

## リソースホスティング

Kameleoon が公開リソースをホストするか、自分でセルフホストするかを選択できます。

* **Technical configuration** ステップの **Resource hosting** で、**Self-host the script file**、**Self-host images**、または両方をオンにします。
* Content Delivery Network(CDN)またはサーバーの URL を **Script file URL**、**Image base URL**、または両方に入力します。

リソースホスティングについて詳しくは、[こちら](https://docs.kameleoon.com/ja/developer-docs/web-experimentation/self-hosting/simple-self-hosting-and-on-premises-options.md) で学んでください。

## Kameleoon スクリプトをインストールする

プロジェクトのメインドメインを定義した後、Kameleoon はインストール用のスクリプトを生成します。スクリプトは、**Setup** タブと、**Checklist** ステップの **Add JavaScript snippet to your website** タスクで確認できます。

1. **Copy** をクリックしてコードスニペットをコピーします。
2. サイトのソースコードの **`<head>` タグの直後** に貼り付けます。
3. 更新したページを保存してサーバーにアップロードします。
4. Kameleoon で **Mark as completed** をクリックします。

> [!NOTE]
>
> ページの読み込みプロセスでできるだけ早くスクリプトをインストールしてください。

## フリッカリングの防止

ウェブページが読み込まれると、ユーザーはバリエーションが適用される前に元のバージョンを一瞬見ることがあります。この一瞬の閃きはフリッカーエフェクトまたはフリッカリングと呼ばれます。フリッカリングはバリエーションの変更が遅延したときに発生し、オリジナルと変更されたコンテンツの間で目に見える切り替わりを作り出します。フリッカリングは、特に A/B テストで、ユーザーエクスペリエンスと実験の信頼性に影響を与える可能性があります。

### フリッカリングを避けるためのガイドライン

#### 実装

Kameleoon スクリプトを `<head>` タグのできるだけ高い位置に配置してください。スクリプトが 1 秒以内、理想的には 500 ms 以下で読み込まれることを確認してください。Kameleoon の読み込み時間を確認するには、ブラウザの開発者ツールの **Network** タブを使用してください。

![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/get-started/web-installation/dev-tools.png)

高速読み込みを保証する最も効果的な方法は、Google Tag Manager などのタグマネージャーを使用するのではなく、Kameleoon を HTML ソースコードに直接インストールすることです。

オプションとして、フリッカリングに対する追加の保護層として anti-flicker スクリプトを使用できます。詳細については、Kameleoon の [開発者ドキュメント](https://docs.kameleoon.com/ja/developer-docs/web-experimentation/technical-concepts/flicker-management-and-performance.md) を参照してください。

このオプションを有効にすると、タイムアウトが発生した場合の Kameleoon の動作を制御するためのいくつかの構成があります。タイムアウト期間はインストールされたスクリプト内で構成可能で、デフォルトでは 750 ms に設定されています。

利用可能なオプションを確認するには、以下のスクリーンショットを参照してください。

![Campaign displayセクションにBehavior if timeout occursドロップダウンがあるSettingsフォーム](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/edit-project-settings.png)

**Behavior if timeout occurs** ドロップダウンにアクセスするには、**Admin** > **Projects** をクリックし、プロジェクトの行にある **Edit** をクリックして、**Settings** タブを開きます。**Campaign display** セクションの **Edit** をクリックします。

Kameleoon の読み込みが遅れると、バリエーションコードが適用される前にページが表示される可能性があります。その場合、以下に説明する最適化は無効になります。

#### 同意

同意ポリシーが **consent required** に設定されている場合、訪問者がまだ同意していないときは **初回ページビュー** でフリッカリングが発生する可能性があります。このフリッカリングは、同意が不明なときに Kameleoon を部分的または完全にブロックすることを選択した場合に発生します。

フリッカリングを防ぐには、Kameleoon をブロックしないようにする必要があります。これにより、訪問者のランディングページで同意が与えられる前に実験を表示できます。このアプローチは、GDPR、CCPA、英国、カナダ、米国の他の主要なフレームワークなどのプライバシー規制に完全準拠しています。同意が付与される前に、追跡またはデータ保存(`cookies`/`localStorage`)は行われないためです。

利用可能なオプションを確認するには、以下のスクリーンショットを参照してください。

![3つの同意ポリシーセクションが表示されたConsentタブ](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/consent-tab.png)

**Behavior when consent is unknown** ドロップダウンにアクセスするには、**Admin** > **Projects** をクリックし、プロジェクトの行にある **Edit** をクリックして、**Consent** タブを開きます。**For A/B tests and feature experiments** または **For personalizations** セクションの **Edit** をクリックし、**Consent policy** で **Consent required** を選択します。

#### ターゲティング

##### ページ読み込み時に利用可能な情報を使用する

最高のパフォーマンスのために、ページ読み込み時にすぐに利用可能なデータに基づいてターゲティングを行ってください。例えば:

* ページ URL
* ブラウザの種類
* デバイスの種類
* `cookies`/`localStorage`

可能な限り、**`dataLayer`** 変数など、遅れて読み込まれる要素のターゲットを避けてください。これらは非同期で読み込まれる可能性があるため、ターゲティングに使用するとバリエーションの実行が遅れる可能性があります。セグメントがカスタム JS 条件、または `dataLayer` 自体に依存するカスタムデータに依存している場合、フリッカリングも発生する可能性があります。

フリッカリングを最小化するには、ターゲティングに使用される条件がページのライフサイクルでできるだけ早く解決されるようにしてください。

Segment Builder のすべてのターゲティング条件について詳しくは、[この](https://docs.kameleoon.com/ja/user-manual/assets/segments/create-a-segment.md) 記事を参照してください。

#### バリエーションコード

##### 視覚的変更には JavaScript の代わりに CSS を使用する

JavaScript の代わりに CSS を使用することで、より高速でスムーズなレンダリングが保証されます。CSS は次のように使用するべきです:

* 要素の非表示または変更
* ブロックの入れ替え
* スタイルやテキストの変更

##### Activation API で JavaScript の実行を最適化する

JavaScript が必要な場合は、Kameleoon の [Activation API](https://docs.kameleoon.com/ja/developer-docs/apis/activation-api-js/api-reference/api-reference.md) を使用して、バリエーションが適切なタイミングで適用されるようにします:

* **`runWhenConditionTrue`:** 特定の条件が満たされたときにコードを実行します。
* **`runWhenElementPresent`:** ターゲット要素がページに読み込まれるとすぐにバリエーションが表示されることを保証します。これらのメソッドを使用すると、非同期に読み込まれる要素による遅延を回避できます。

##### シングルページアプリケーションの処理

実験がシングルページアプリケーション(SPA)または動的に更新されるページで実行される場合、特別な実装手順が必要です。ベストプラクティスについては、SPA で実験を設定するための [この](https://docs.kameleoon.com/ja/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app.md) ガイドに従ってください。

## FAQ

> [accordion] 問題: フレーム内での表示を拒否(X-Frame-Options)
>
> **フレーム内での表示を拒否** エラーは、クロスドメイントラッキングを有効にしている場合に発生します。メインドメインで静的 iframe をホストする必要があります。
>
> **Kameleoon iframe の仕組み**
>
> iframe は、ホストドメインの `localStorage` への読み書きを通じてサブドメイン間のデータ一貫性を確保します。Kameleoon は追加のサーバーコールなしに同じ訪問者を追跡できます。詳細については、[サブドメイン間でのセッションデータの統合](https://docs.kameleoon.com/ja/developer-docs/web-experimentation/technical-concepts/unify-session-data-storage-across-subdomains.md) を参照してください。
>
> Kameleoon は iframe を 3 つの対策で保護しています:
>
> 1. **アクセス制限:** `allowedDomains` 変数内のドメインのみが iframe をリクエストできます。
> 2. **サイトコード検証:** 指定されたサイトコードのみが iframe をリクエストできます。
> 3. **プレフィックス付きストレージ:** Kameleoon は `kameleoon` でプレフィックスが付いたエントリにのみアクセスします。
>
> Kameleoon は非個人データを収集します。[収集データのリスト](https://docs.kameleoon.com/ja/developer-docs/privacy-and-compliance/data-collection-backend.md#収集されるデータの一覧) を参照してください。同意は [Kameleoon の同意管理 API](https://docs.kameleoon.com/ja/developer-docs/privacy-and-compliance/consent-management.md) を通じて管理できます。
>
> **表示問題の解決**
>
> `X-Frame-Options` ヘッダーは、クリックジャッキングを防ぐためにブラウザがフレーム内のページをレンダリングするのを防ぎます。詳細については、[Mozilla ドキュメント](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) を参照してください。
>
> クロスドメイントラッキングを有効にするには、`X-Frame-Options` ヘッダーを設定しないでください。ホストされた iframe ファイルにドメインの制限リストを提供することで iframe を保護できます。

> [accordion] 問題: スクリプトの読み込みを拒否
>
> `https://xxxxxx.kameleoon.eu/kameleoon.js` スクリプトが [Content Security Policy(CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) に違反しているというエラーが表示される場合があります。
>
> サイトが CSP ヘッダーでリソースを制限している場合は、Kameleoon リソースを許可するようポリシーを更新してください。[許可する Kameleoon ドメインの完全なリスト](https://docs.kameleoon.com/ja/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md#what-are-the-kameleoon-domains-that-i-need-to-whitelist) を参照してください。

> [accordion] Kameleoon はすべての Web ブラウザで動作しますか?
>
> **サポートされる Web ブラウザ**
>
> Kameleoon は一部の古いブラウザをサポートしません。訪問者がサポートされていないブラウザを使用している場合、実験ではなくオリジナルのページが表示されます。元のページへのフォールバックは実験結果に悪影響を及ぼしません。
>
> Kameleoon スクリプトがサポートするブラウザ:
>
> * Chrome
> * Firefox
> * Microsoft Edge
> * Opera
> * Safari
>
> Kameleoon は各ブラウザの直近 3 バージョンとの互換性を保証します。
>
> **グラフィックエディタがサポートするブラウザ**
>
> グラフィックエディタがサポートするブラウザについては、[グラフィックエディタがサポートするブラウザ](https://docs.kameleoon.com/ja/user-manual/experimentation/web-experimentation/graphic-based-experiments/edit-a-variation.md#which-browsers-does-the-graphic-editor-support) を参照してください。
>
> **レスポンシブデザインのウェブサイトとの互換性**
>
> 高度な編集機能を使用して、レスポンシブウェブサイト用の実験を作成できます。主な課題は通常、コンテンツブロックのリサイズと再配置です。
>
> ページは解像度やデバイスに基づいて表示されるため、要素を移動するときは注意してください。これらのページではフレームが固定されていないため、ヒートマップは利用できません。
>
> Kameleoon は、要素を移動してレイアウトの問題を避けるための高度なツールを提供します。

> [accordion] Kameleoon スクリプトのキャッシュ有効期限(TTL)はどれくらいですか?
>
> 訪問者がウェブサイトに到達すると、ブラウザはサイトコードと Kameleoon スクリプトをダウンロードします。ページの読み込み時間は、コードの長さと外部リソースに依存します。キャッシュは、静的リソースをブラウザキャッシュに保存することで、その後のアクセスのパフォーマンスを向上させます。
>
> キャッシュはユーザーエクスペリエンスを向上させますが、キャッシュに古いバージョンのスクリプトを持つリピーター訪問者に新しい実験を遅らせる可能性があります。
>
> この問題を解決するために、Kameleoon スクリプトには **キャッシュ有効期限(TTL: Time-to-live)** フラグが含まれています。このフラグにより、ブラウザは 1.5 時間ごとに新しいバージョンのスクリプトをダウンロードするよう指示されます。
>
> > [!NOTE]
> >
> > 一部のモバイルブラウザは、ブラウザポリシーに応じてパフォーマンスを最適化するために TTL 設定を無視する場合があります。

> [accordion] フリッカーエフェクトとは何ですか?
>
> フリッカーエフェクト(またはフリッカリング)は、訪問者がバリエーションが読み込まれる前にオリジナルのページが一瞬表示されるときに発生します。フリッカリングは Kameleoon スクリプトがページコンテンツの後に読み込まれると発生する可能性があります。その場合、ブラウザはバリエーションの変更を最後に適用します。フリッカリングを減らすには、HTML `<head>` のできるだけ高い位置に Kameleoon スクリプトを配置してください。完全なガイドについては、[フリッカリングの防止](#フリッカリングの防止) を参照してください。

> [accordion] Kameleoon は他のサイト上のスクリプトと競合する可能性がありますか?
>
> Kameleoon が他のスクリプトと競合する可能性は非常に低いです。
>
> Kameleoon は純粋な JavaScript を使用しており、jQuery は必要ないため、jQuery を使用するサイトとの競合を回避します。サーバーサイド言語から独立して動作し、グローバル JavaScript 変数を避けて非互換性のリスクを最小化します。
>
> **jQuery**
>
> ウェブサイトで jQuery を使用している場合、Kameleoon は jQuery と競合しません。ただし、Kameleoon は jQuery でも使用される CSS セレクターエンジンである [Sizzle](http://sizzlejs.com/) ライブラリを使用しています。実験を作成する際に Sizzle を使用できます。