Web Experimentation インストールガイド

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

​

概要

ウェブサイトやモバイルアプリで実験を起動する前に、Kameleoon スクリプトをインストールする必要があります。一意のプロジェクトコードを含むこのスクリプトは、ソースコードの <head> タグに追加する必要があります。 パッケージで許可されている場合は、Kameleoon アカウントから複数のサイトやアプリを管理できます。これは、ステージングまたはプリプロダクション環境でのテストに役立ちます。 プロジェクトを作成すると、セットアップフォームが 4 つのステップをガイドします。インストール方法によって表示されるオプションが決まります: クロスドメイントラッキングを有効にすると、チェックリストには Kameleoon の静的 HTML ファイルをメインドメインでホストするタスクも含まれます。

​

プロジェクト構成

Kameleoon アプリ で、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 として保存します。オプションの完全なリストについては、プロジェクトの作成 を参照してください。

​

実装設定を選択する

セットアップフォームの Installation method ステップで、Kameleoon のインストール方法と、ウェブサイトでの Kameleoon の読み込み方法を選択します。タグマネージャーを使用した Kameleoon のインストール方法やカスタムスクリプトタイプの実装方法など、技術的な詳細については、標準実装 の記事を参照してください。

​

同意

ウェブサイトに Kameleoon スクリプトをインストールする前に、セットアップが組織の同意管理ポリシーに準拠していることを確認してください。 Consent Management Platform(CMP)を使用している場合は、Kameleoon と統合して、実験とデータ収集がいつアクティベートされるかを制御できます。 詳細については、Kameleoon の 同意管理の記事 を参照してください。

​

ドメインとサブドメイン

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

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

​

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

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

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

​

認可

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

• Kameleoon iframe をホストするページに X-Frame-Options レスポンスヘッダーを設定しない
• Content Security Policy で Kameleoon リソースを許可する

​

リソースホスティング

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

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

リソースホスティングについて詳しくは、こちら で学んでください。

​

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

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

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

​

フリッカリングの防止

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

​

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

​

実装

Kameleoon スクリプトを <head> タグのできるだけ高い位置に配置してください。スクリプトが 1 秒以内、理想的には 500 ms 以下で読み込まれることを確認してください。Kameleoon の読み込み時間を確認するには、ブラウザの開発者ツールの Network タブを使用してください。 高速読み込みを保証する最も効果的な方法は、Google Tag Manager などのタグマネージャーを使用するのではなく、Kameleoon を HTML ソースコードに直接インストールすることです。 オプションとして、フリッカリングに対する追加の保護層として anti-flicker スクリプトを使用できます。詳細については、Kameleoon の 開発者ドキュメント を参照してください。 このオプションを有効にすると、タイムアウトが発生した場合の Kameleoon の動作を制御するためのいくつかの構成があります。タイムアウト期間はインストールされたスクリプト内で構成可能で、デフォルトでは 750 ms に設定されています。 利用可能なオプションを確認するには、以下のスクリーンショットを参照してください。 Behavior if timeout occurs ドロップダウンにアクセスするには、Admin > Projects をクリックし、プロジェクトの行にある Edit をクリックして、Settings タブを開きます。Campaign display セクションの Edit をクリックします。

​

同意

同意ポリシーが consent required に設定されている場合、訪問者がまだ同意していないときは 初回ページビュー でフリッカリングが発生する可能性があります。このフリッカリングは、同意が不明なときに Kameleoon を部分的または完全にブロックすることを選択した場合に発生します。 フリッカリングを防ぐには、Kameleoon をブロックしないようにする必要があります。これにより、訪問者のランディングページで同意が与えられる前に実験を表示できます。このアプローチは、GDPR、CCPA、英国、カナダ、米国の他の主要なフレームワークなどのプライバシー規制に完全準拠しています。同意が付与される前に、追跡またはデータ保存(cookies/localStorage)は行われないためです。 利用可能なオプションを確認するには、以下のスクリーンショットを参照してください。 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 のすべてのターゲティング条件について詳しくは、この 記事を参照してください。

​

バリエーションコード

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

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

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

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

JavaScript が必要な場合は、Kameleoon の Activation API を使用して、バリエーションが適切なタイミングで適用されるようにします:

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

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

実験がシングルページアプリケーション(SPA)または動的に更新されるページで実行される場合、特別な実装手順が必要です。ベストプラクティスについては、SPA で実験を設定するための この ガイドに従ってください。

​

FAQ