> ## 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 スクリプトをインストールして構成します。 本ページでは、ウェブサイト、モバイルアプリ、または両方のプロジェクトの作成、プロジェクト設定の構成を含む Kameleoon のインストール手順を順に解説します。 ## 概要 ウェブサイトやモバイルアプリで実験を起動する前に、Kameleoon スクリプトをインストールする必要があります。一意のプロジェクトコードを含むこのスクリプトは、ソースコードの `` タグに追加する必要があります。 パッケージで許可されている場合は、Kameleoon アカウントから複数のサイトやアプリを管理できます。これは、ステージングまたはプリプロダクション環境でのテストに役立ちます。 複数のセットアップオプションが利用できます。それらの順序はこのパターンに従います: ```mermaid theme={null} flowchart LR TM[TAG MANAGER] --> YES TM --> NO YES --> A1[ASYNCHRONOUS] YES --> A2[ASYNCHRONOUS WITH ANTI-FLICKER] NO --> A3[ASYNCHRONOUS] NO --> S[SYNCHRONOUS] A1 & A2 & A3 & S -. "+" .-> AS subgraph cross["IF CROSS-DOMAIN = YES"] AS[ADDITIONAL SETUP] end style cross stroke-dasharray: 5 5 ``` ## プロジェクト構成 [Kameleoon アプリ](https://app.kameleoon.com/) では、プロジェクトのリストが表示されます。デフォルトでは、サインアップ時に入力したウェブサイトまたはモバイルアプリ用のプロジェクトカードがあります。 ### 既存のプロジェクトを構成する プロジェクトの設定を変更するには: 1. プロジェクトのカードで **Setup** をクリックします。 2. プロジェクトの構成を確認し、**Modify setup** をクリックします。 3. 表示されるポップインで、もう一度 **Modify** をクリックして設定にアクセスします。 ### 新しいプロジェクトを作成する 新しいプロジェクトを作成するには: 1. **New project** をクリックします。 2. サイト URL と、オプションで名前と説明を入力します。 3. **Add** をクリックします。 インストールをガイドする新しいページが表示されます。 追加のプロジェクトを作成する能力は Kameleoon パッケージによって異なります。 ## 実装設定を選択する 新しいプロジェクトをセットアップする際、実装設定を選択するよう求められます。タグマネージャーを使用した Kameleoon のインストール方法やカスタムスクリプトタイプの実装方法など、技術的な詳細については、[この](../../developer-docs/web-experimentation/implementation-and-deployment/standard-implementation) 記事を参照してください。 ## 同意 ウェブサイトに Kameleoon スクリプトをインストールする前に、セットアップが組織の同意管理ポリシーに準拠していることを確認してください。 Consent Management Platform(CMP)を使用している場合は、Kameleoon と統合して、実験とデータ収集がいつアクティベートされるかを制御できます。 詳細については、Kameleoon の [同意管理の記事](../project-management/consent-management-policy) を参照してください。 ## ドメイン構成 Kameleoon スクリプトを読み込み、その機能にアクセスできるドメインとサブドメインを定義できます。 * **Domain configuration** で、クロスドメイントラッキング用にドメインを許可リストに追加するため、**Add a domain/subdomain** をクリックします。 * これにより、Kameleoon のグラフィックエディタを使用したり、ドメイン間で訪問者データを保存/取得したりできます。 * リストにないドメインで Kameleoon を使用しようとすると、ブラウザのセキュリティポリシー(CORS)により読み込みが失敗します。 ### クロスドメイントラッキング クロスドメイントラッキングを使用すると、次のことが可能になります: * 異なるドメインとサブドメイン間で同じ訪問者を追跡する(例: `example.com` と `example.org`)。 * ドメイン間を移動するユーザーを "新規訪問者" として再分類することを避ける。 * プロパティ間で一貫したパーソナライゼーションと実験エクスペリエンスを提供する。 複数のドメインにわたってセッションデータを統合する予定がある場合は、クロスドメイントラッキングを有効にする必要があります。 ## 認可 サブドメインをターゲットにしている場合は、次の HTTP ヘッダーを設定する必要があります: * [X-Frame-Options HTTP レスポンス](../faq#issue-refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin) * [Content Security Policy](../faq#issue-refused-to-load-the-script) Safari でのクロスサイトトラッキングを制限する Apple の Intelligent Tracking Prevention(ITP)について詳しくは、この [ITP ドキュメント](../../developer-docs/web-experimentation/technical-concepts/itp-management) で学んでください。 ## リソースホスティング Kameleoon が公開リソースをホストするか、自分でセルフホストするかを選択できます。 * セットアップページのドロップダウンメニューからオプションを選択します。 * **セルフホスティング** を選択する場合は、Content Delivery Network(CDN)の URL を提供します。 リソースホスティングについて詳しくは、[こちら](../../developer-docs/web-experimentation/self-hosting/simple-self-hosting-and-on-premises-options) で学んでください。 ## Kameleoon スクリプトをインストールする サイトの URL を定義した後、Kameleoon はインストール用のスクリプトを生成します。 1. 提供されたコードスニペットをコピーします。 2. サイトのソースコードの **`` タグの直後** に貼り付けます。 3. 更新したページを保存してサーバーにアップロードします。 4. Kameleoon で **Validate** をクリックします。 最良の結果を得るには、ページの読み込みプロセスでできるだけ早くスクリプトをインストールしてください。 Kameleoon がスクリプトを検出できない場合は、正しく追加されたことを確認してください。スクリプトが存在していると確信している場合は、検証をスキップすることもできます。 ## フリッカリングの防止 ウェブページが読み込まれると、ユーザーはバリエーションが適用される前に元のバージョンを一瞬見ることがあります。この一瞬の閃きはフリッカーエフェクトまたはフリッカリングと呼ばれます。フリッカリングはバリエーションの変更が遅延したときに発生し、オリジナルと変更されたコンテンツの間で目に見える切り替わりを作り出します。フリッカリングは、特に A/B テストで、ユーザーエクスペリエンスと実験の信頼性に影響を与える可能性があります。 ### フリッカリングを避けるためのガイドライン #### 実装 Kameleoon スクリプトを `` タグのできるだけ高い位置に配置してください。スクリプトが 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 の [開発者ドキュメント](../../developer-docs/web-experimentation/technical-concepts/flicker-management-and-performance) を参照してください。 このオプションを有効にすると、タイムアウトが発生した場合の Kameleoon の動作を制御するためのいくつかの構成があります。タイムアウト期間はインストールされたスクリプト内で構成可能で、デフォルトでは 1,000 ms に設定されています。 利用可能なオプションを確認するには、以下のスクリーンショットを参照してください。 ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/get-started/web-installation/behavior.png) **Admin** > **Configuration** > **General** をクリックして、**Behavior if timeout occurs** ドロップダウンにアクセスできます。 Kameleoon の読み込みが遅れると、バリエーションコードが適用される前にページが表示される可能性があります。その場合、以下に説明する最適化は無効になります。 #### 同意 同意ポリシーが **consent required** に設定されている場合、訪問者がまだ同意していないときは **初回ページビュー** でフリッカリングが発生する可能性があります。このフリッカリングは、同意が不明なときに Kameleoon を部分的または完全にブロックすることを選択した場合に発生します。 フリッカリングを防ぐには、Kameleoon をブロックしないようにする必要があります。これにより、訪問者のランディングページで同意が与えられる前に実験を表示できます。このアプローチは、GDPR、CCPA、英国、カナダ、米国の他の主要なフレームワークなどのプライバシー規制に完全準拠しています。同意が付与される前に、追跡またはデータ保存(`cookies`/`localStorage`)は行われないためです。 利用可能なオプションを確認するには、以下のスクリーンショットを参照してください。 ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/get-started/web-installation/consent.png) **Behavior when consent is unknown** ドロップダウンにアクセスするには、**Admin** > **Configuration** > **Experiment**/**Personalization** をクリックします。 #### ターゲティング ##### 早期読み込み情報を使用する 最高のパフォーマンスのために、ページ読み込み時にすぐに利用可能なデータに基づいてターゲティングを行ってください。例えば: * ページ URL * ブラウザの種類 * デバイスの種類 * `cookies`/`localStorage` 可能な限り、**`dataLayer`** 変数など、遅れて読み込まれる要素のターゲットを避けてください。これらは非同期で読み込まれる可能性があるため、ターゲティングに使用するとバリエーションの実行が遅れる可能性があります。セグメントがカスタム JS 条件、または `dataLayer` 自体に依存するカスタムデータに依存している場合、フリッカリングも発生する可能性があります。 フリッカリングを最小化するには、ターゲティングに使用される条件がページのライフサイクルでできるだけ早く解決されるようにしてください。 Segment Builder のすべてのターゲティング条件について詳しくは、[この](../assets/segments/create-a-segment) 記事を参照してください。 #### バリエーションコード ##### 視覚的変更には JavaScript の代わりに CSS を使用する JavaScript の代わりに CSS を使用することで、より高速でスムーズなレンダリングが保証されます。CSS は次のように使用するべきです: * 要素の非表示または変更 * ブロックの入れ替え * スタイルやテキストの変更 ##### Activation API で JavaScript の実行を最適化する JavaScript が必要な場合は、Kameleoon の [Activation API](../../developer-docs/apis/activation-api-js/api-reference/api-reference) を使用して、バリエーションが適切なタイミングで適用されるようにします: * **`runWhenConditionTrue`:** 特定の条件が満たされたときにコードを実行します。 * **`runWhenElementPresent`:** ターゲット要素がページに読み込まれるとすぐにバリエーションが表示されることを保証します。これらのメソッドを使用すると、非同期に読み込まれる要素による遅延を回避できます。 ##### シングルページアプリケーションの処理 実験がシングルページアプリケーション(SPA)または動的に更新されるページで実行される場合、特別な実装手順が必要です。ベストプラクティスについては、SPA で実験を設定するための [この](../experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app) ガイドに従ってください。