概要
ウェブサイトやモバイルアプリで実験を起動する前に、Kameleoon スクリプトをインストールする必要があります。一意のプロジェクトコードを含むこのスクリプトは、ソースコードの<head> タグに追加する必要があります。
パッケージで許可されている場合は、Kameleoon アカウントから複数のサイトやアプリを管理できます。これは、ステージングまたはプリプロダクション環境でのテストに役立ちます。
複数のセットアップオプションが利用できます。それらの順序はこのパターンに従います:
プロジェクト構成
Kameleoon アプリ では、プロジェクトのリストが表示されます。デフォルトでは、サインアップ時に入力したウェブサイトまたはモバイルアプリ用のプロジェクトカードがあります。既存のプロジェクトを構成する
プロジェクトの設定を変更するには:- プロジェクトのカードで Setup をクリックします。
- プロジェクトの構成を確認し、Modify setup をクリックします。
- 表示されるポップインで、もう一度 Modify をクリックして設定にアクセスします。
新しいプロジェクトを作成する
新しいプロジェクトを作成するには:- New project をクリックします。
- サイト URL と、オプションで名前と説明を入力します。
- Add をクリックします。
追加のプロジェクトを作成する能力は Kameleoon パッケージによって異なります。
実装設定を選択する
新しいプロジェクトをセットアップする際、実装設定を選択するよう求められます。タグマネージャーを使用した Kameleoon のインストール方法やカスタムスクリプトタイプの実装方法など、技術的な詳細については、この 記事を参照してください。同意
ウェブサイトに Kameleoon スクリプトをインストールする前に、セットアップが組織の同意管理ポリシーに準拠していることを確認してください。 Consent Management Platform(CMP)を使用している場合は、Kameleoon と統合して、実験とデータ収集がいつアクティベートされるかを制御できます。 詳細については、Kameleoon の 同意管理の記事 を参照してください。ドメイン構成
Kameleoon スクリプトを読み込み、その機能にアクセスできるドメインとサブドメインを定義できます。- Domain configuration で、クロスドメイントラッキング用にドメインを許可リストに追加するため、Add a domain/subdomain をクリックします。
- これにより、Kameleoon のグラフィックエディタを使用したり、ドメイン間で訪問者データを保存/取得したりできます。
- リストにないドメインで Kameleoon を使用しようとすると、ブラウザのセキュリティポリシー(CORS)により読み込みが失敗します。
クロスドメイントラッキング
クロスドメイントラッキングを使用すると、次のことが可能になります:- 異なるドメインとサブドメイン間で同じ訪問者を追跡する(例:
example.comとexample.org)。 - ドメイン間を移動するユーザーを “新規訪問者” として再分類することを避ける。
- プロパティ間で一貫したパーソナライゼーションと実験エクスペリエンスを提供する。
複数のドメインにわたってセッションデータを統合する予定がある場合は、クロスドメイントラッキングを有効にする必要があります。
認可
サブドメインをターゲットにしている場合は、次の HTTP ヘッダーを設定する必要があります:Safari でのクロスサイトトラッキングを制限する Apple の Intelligent Tracking Prevention(ITP)について詳しくは、この ITP ドキュメント で学んでください。
リソースホスティング
Kameleoon が公開リソースをホストするか、自分でセルフホストするかを選択できます。- セットアップページのドロップダウンメニューからオプションを選択します。
- セルフホスティング を選択する場合は、Content Delivery Network(CDN)の URL を提供します。
Kameleoon スクリプトをインストールする
サイトの URL を定義した後、Kameleoon はインストール用のスクリプトを生成します。- 提供されたコードスニペットをコピーします。
- サイトのソースコードの
<head>タグの直後 に貼り付けます。 - 更新したページを保存してサーバーにアップロードします。
- Kameleoon で Validate をクリックします。
最良の結果を得るには、ページの読み込みプロセスでできるだけ早くスクリプトをインストールしてください。
フリッカリングの防止
ウェブページが読み込まれると、ユーザーはバリエーションが適用される前に元のバージョンを一瞬見ることがあります。この一瞬の閃きはフリッカーエフェクトまたはフリッカリングと呼ばれます。フリッカリングはバリエーションの変更が遅延したときに発生し、オリジナルと変更されたコンテンツの間で目に見える切り替わりを作り出します。フリッカリングは、特に A/B テストで、ユーザーエクスペリエンスと実験の信頼性に影響を与える可能性があります。フリッカリングを避けるためのガイドライン
実装
Kameleoon スクリプトを<head> タグのできるだけ高い位置に配置してください。スクリプトが 1 秒以内、理想的には 500 ms 以下で読み込まれることを確認してください。Kameleoon の読み込み時間を確認するには、ブラウザの開発者ツールの Network タブを使用してください。
同意
同意ポリシーが consent required に設定されている場合、訪問者がまだ同意していないときは 初回ページビュー でフリッカリングが発生する可能性があります。このフリッカリングは、同意が不明なときに Kameleoon を部分的または完全にブロックすることを選択した場合に発生します。 フリッカリングを防ぐには、Kameleoon をブロックしないようにする必要があります。これにより、訪問者のランディングページで同意が与えられる前に実験を表示できます。このアプローチは、GDPR、CCPA、英国、カナダ、米国の他の主要なフレームワークなどのプライバシー規制に完全準拠しています。同意が付与される前に、追跡またはデータ保存(cookies/localStorage)は行われないためです。
利用可能なオプションを確認するには、以下のスクリーンショットを参照してください。
ターゲティング
早期読み込み情報を使用する
最高のパフォーマンスのために、ページ読み込み時にすぐに利用可能なデータに基づいてターゲティングを行ってください。例えば:- ページ URL
- ブラウザの種類
- デバイスの種類
cookies/localStorage
dataLayer 変数など、遅れて読み込まれる要素のターゲットを避けてください。これらは非同期で読み込まれる可能性があるため、ターゲティングに使用するとバリエーションの実行が遅れる可能性があります。セグメントがカスタム JS 条件、または dataLayer 自体に依存するカスタムデータに依存している場合、フリッカリングも発生する可能性があります。
フリッカリングを最小化するには、ターゲティングに使用される条件がページのライフサイクルでできるだけ早く解決されるようにしてください。
Segment Builder のすべてのターゲティング条件について詳しくは、この 記事を参照してください。
バリエーションコード
視覚的変更には JavaScript の代わりに CSS を使用する
JavaScript の代わりに CSS を使用することで、より高速でスムーズなレンダリングが保証されます。CSS は次のように使用するべきです:- 要素の非表示または変更
- ブロックの入れ替え
- スタイルやテキストの変更
Activation API で JavaScript の実行を最適化する
JavaScript が必要な場合は、Kameleoon の Activation API を使用して、バリエーションが適切なタイミングで適用されるようにします:runWhenConditionTrue: 特定の条件が満たされたときにコードを実行します。runWhenElementPresent: ターゲット要素がページに読み込まれるとすぐにバリエーションが表示されることを保証します。これらのメソッドを使用すると、非同期に読み込まれる要素による遅延を回避できます。