デモ: フィーチャーエクスペリメンテーション

開発者向けのこのハンズオンチュートリアルでは、Kameleoon プラットフォーム上でフィーチャーエクスペリメンテーションがどのように動作するかを示します。サンプルアプリから始めて、Kameleoon アプリで一連のフィーチャーフラグを構成し、サンプルアプリで有効化し、フィーチャーフラグが訪問者のページにどう影響するかを確認するためのステップバイステップの手順に従います。 サンプルは TypeScript で書かれていますが、このチュートリアルを完了するために TypeScript を知っている必要はありません。重要なポイントを理解するには、最新のプログラミング言語の経験があれば十分です。

​

前提条件​

開始する前に、いくつかのアカウントを作成する必要があります。

• 無料の30日間の Kameleoon トライアルアカウントに サインアップ します。アカウント請求後30日以内にこのチュートリアルを完了する必要がありますが、チュートリアル自体は約30分程度で完了するはずです。
• GitHub アカウント。

​

サンプルアプリを実行する​

最初に、GitHub Pages 上でアプリを起動するので、Web サーバーをセットアップする心配は不要です。GitHub アカウントにログインする必要があります。

1. GitHub の Bouncing ball リポジトリ で Fork をクリックします。プロンプトに従って、github.com/<your_username>/bouncing-ball にサンプルアプリのフォークを作成します。(このチュートリアル全体で <your_username> を GitHub アカウント名に置き換えてください。)
2. GitHub の新しい https://github.com/<your_username>/bouncing-ball リポジトリで、Actions タブをクリックし、ワークフローを有効にするボタンをクリックします。
3. Settings タブで、Pages をクリックし、Source ドロップダウンをクリックして、GitHub Actions をクリックします。
4. Actions タブで、Deploy static content to Pages > Run workflow > Run workflow をクリックします。

ビルドおよびデプロイプロセスが完了すると (1～2分かかる場合があります)、https://<your_username>.github.io/bouncing-ball でブラウザで実行中のデモアプリが見られるはずです。次のようになるはずです。 プロジェクトの変更を高速化するため、SDK が Kameleoon アカウントの構成変更を確認する更新間隔をプログラム的に調整できます。

1. GitHub リポジトリの Code タブで、src/main.ts ファイルを開きます。
2. Edit this file ボタン (鉛筆アイコン) をクリックします。
3. /src/main.ts ファイルを見つけて編集します。次の行を見つけます。
   const client = new KameleoonClient({ siteCode });
   
   この行を次のコードに置き換えます。
   const configuration = {   updateInterval: 1,};const client = new KameleoonClient({ siteCode, configuration });
   
   新しいコードは updateInterval が 1 の構成を追加します。この値は、SDK が構成の変更をポーリングする頻度を1分に1回 (デフォルトの60分から) に減らします。この頻繁なポーリングは、パフォーマンスへの影響のため本番環境では推奨されませんが、チュートリアルでは役立ちます。Kameleoon は、構成変更を SDK にただちにプッシュする プレミアムストリーミングオプション も提供しています。
4. Commit changes… をクリックします。

​

Kameleoon プロジェクトをセットアップする​

このセクションを開始する前に、Kameleoon トライアルアカウントのクレデンシャルが必要です。

1. トライアルアカウントのクレデンシャルを使用して Kameleoon アプリ にサインインします。
2. 左メニューで、Admin を展開し、Projects > New project をクリックします。
3. ダイアログで、最初のドロップダウンの Site: Feature flags をクリックし、URL of site として https://<your_username>.github.io/bouncing-ball を貼り付けます。<your_username> を GitHub アカウント名で置き換えるのを忘れないでください。Add をクリックします。
4. 次のページに表示されているサイトコードをコピーします。
   
5. GitHub リポジトリの Code タブで、src/constants ファイルを編集します。siteCode の値を、今コピーしたサイトコードで置き換え、Commit changes をクリックします。

ブラウザで再びアプリを確認すると (https://<your_username>.github.io/bouncing-ball)、すべてのバウンスする円が消えているのが分かるはずです。これは、円が別のプロジェクトの Kameleoon フィーチャーフラグによって追加されていたためです。サイトコードを変更したばかりなので、現在サイトはまだ完全に構成していないあなたの Kameleoon プロジェクトによって制御されています。心配は不要です。自分自身のフィーチャーフラグでアプリに自分の円を戻すことになります。

​

フィーチャーフラグをセットアップする​

フィーチャーフラグを使用すると、新機能を限定されたオーディエンスに展開して、完全な展開の前に効果をテストできます。構成は開発者または他のチームメンバーによって管理できます。Kameleoon インターフェイスでフィーチャーフラグがどのように構成されているかを理解することで、アプリ内で変数を効果的に使用できます。

1. Kameleoon アプリの Activate メニューで、Feature flags をクリックします。
2. New feature flag をクリックします。
3. 次の値でフィールドを記入します。
   • Name: Bouncing ball demo
   • Project: {ドロップダウンからプロジェクトを選択}
   • Flag type: Permanent
   • Feature key: bouncing_ball_demo タグと説明フィールドは空のままにできます。
4. Validate をクリックします。

​

変数をセットアップする​

変数 は、アプリの動作を変更するためにアプリコードで使用する文字列、数値、ブール値、または JSON 値です。それらの値は、Kameleoon が訪問者に割り当てるバリエーションによって変化します。 たとえば、「Party time」バリエーションで訪問者にサービスを提供したときと「Hypnotize」バリエーションで提供したときに、訪問者がサイトに長く留まるかどうかを判断するには、各オプションのバリエーションをセットアップして実験を実行します。

1. 表示される新しいページで、Set Up メニューを展開して、Variables をクリックします。

2. + Add Variable ボタンを使用して、次の値で 6 つの変数を追加します。

   変数キー	タイプ	デフォルト値
   title_text	String	Default variation: 1 green ball
   randomize_on_bounce	Boolean	False
   balls_amount	Number	1
   ball_speed	Number	10
   ball_color	String	green
   ball_size	Number	20

   入力ミスに注意してください! 変数キー名とタイプは完全に一致する必要があります。GitHub リポジトリの src/main.ts ファイルを見ると、その理由が分かります。コードサンプルは、Kameleoon が訪問者に割り当てるバリエーションに応じて、これらの正確な変数キー名を使用して変数の値を取得します。
3. Save をクリックします。

これで、デフォルト値を持つ一連の変数をセットアップしました。デフォルト値は、訪問者に対してアクティブなキャンペーンがない場合にアプリが使用する値です。今すぐフィーチャーフラグを有効にすると、デフォルトのバリエーション (1つの緑色のボールがゆっくりとバウンスする) が表示されます。これは、まだバリエーションがセットアップされていないためです。

​

バリエーションをセットアップする​

バリエーション は、訪問者がアプリで何を見るかを制御する変数の可能な組み合わせを定義します。Kameleoon は、訪問者がアプリに初めて訪問したときにバリエーションを割り当てます。

1. Set Up で Variations をクリックします。
2. + Add variation ボタンを使用して、2つの新しいバリエーションを追加します。
   • Name: Party time
     • ball_size: 50
     • ball_color: random
     • ball_speed: 75
     • balls_amount: 75
     • randomize_on_bounce: True
     • title_text: Hey! Get up and dance!
   • Name: Hypnotize
     • ball_size: 200
     • ball_color: blue
     • ball_speed: 2
     • balls_amount: 10
     • randomize_on_bounce: False
     • title_text: You're getting very, very sleepy

​

ゴールをセットアップする​

次に、ゴール をセットアップします。ゴールは、バリエーションの効果をどう測定するかを定義します。 使用可能なカスタマイズ可能なゴールタイプには複数の種類がありますが、このチュートリアルでは基本的な「time spent」(滞在時間) 指標を使用します。

1. Set Up メニューで、Goals > + Add goal をクリックします。
2. Configure goals セクションで + Create a new goal をクリックし、次のフィールドに入力します。
   • Name: Time spent
   • Type: Time Spent
   • Project: {自分のプロジェクトを選択}
3. Next をクリックし、ゴールを The visitor spent more than 30 seconds に設定します。
4. Validate をクリックします。

​

実験を展開する​

バリエーションが構成されたので、オーディエンスのサブセットに対して2つのバリエーションを表示する実験を作成できます。1つのバリエーションを訪問者の40%に表示し、もう1つのバリエーションを別の40%の訪問者に表示します。残りの20%の訪問者は、アプリの未変更バージョン (デフォルト) を見ます。

1. Rollout Planner セクションで、Production をクリックします。
2. + Add a rule > Experiment をクリックします。
3. Exposure スライダーを 80% に下げます。
4. Variations to serve の下で、Party time をクリックし、Exposition の値を 40.00% に変更します。
5. + Add a variation をクリックします。バリエーション Hypnotize が自動的に選択されているはずです (そうでない場合は選択してください)。Exposition の値を 40.00% に変更します。
6. ON/OFF トグルを ON に切り替えます。
7. Save をクリックします。

​

アプリをテストする​

ブラウザでアプリを開きます。3つの可能なバリエーション (Party time バリエーション、Hypnotize バリエーション、または Default バリエーション) のいずれかが表示されるはずです。 次に、他のバリエーションが表示されるまで新規ユーザーをシミュレートしてみてください。同じバリエーションに何度も割り当てられる可能性があるため、何度か試す必要があるかもしれません。ブラウザがあなたを識別するユニーク ID である visitorCode を保存するため、単純にページを更新しても、最初に割り当てられたバリエーションが常に表示されます。代わりに、新しい訪問者のように見える必要があります。それを行う最も簡単な方法は次のとおりです。

• 別のブラウザまたはデバイスに切り替えます。
• 毎回新しいプライベートウィンドウでアプリを開きます (選択したブラウザによっては「インコグニート」、「プライベートブラウジング」などと呼ばれることもあります)。

十分な試行の後、3つのバリエーションすべてが見られるはずです。そうであれば、おめでとうございます! Kameleoon でフィーチャー実験を正常にセットアップしました! 🎉🎉🎉

​

次のステップ​

• 実験の Reporting セクションで、初期結果、利用可能な統合、アクティビティログのいくつかを確認します。トラフィックが少ないため、まだ多くの結果データにアクセスすることはできません。
• サンプルコードを確認して、変数がコードでどのように適用されているかを理解します。TypeScript を書くのに慣れている場合は、自分の変数を追加してみてください。
• この開発者ドキュメントと エクスペリメンテーションユーザーガイド の残りの部分を確認して、利用可能なすべてのオプションと機能について詳細を学んでください。
• 選択した SDK をインストールし、自分のフィーチャーフラグ、パーソナライゼーション、その他の実験の構築を開始します。