Optimizely の機能実験で 10 分以内に機能フラグを作成します 😲

この記事では、Optimizely 機能実験を使用して機能フラグを作成するために知っておく必要があるすべてを学びます。 Optimizely の機能実験には、JavaScript、C#、Python、IOS、Android、Flutter、Java、PHP、C など、現在最も人気のあるプログラミング言語に対して構築された 92 を超える既製の SDK が付属しています。

Optimizely Feature 内でフラグを作成すると、作成した任意の機能に対して AB テストも実行できるという便利な点があります。

Optimizely 機能実験を使用してサーバー側テストを作成する方法

このチュートリアルでは、JavaScript SDK を使用して機能フラグを設定および作成する方法を説明します。 興味のある人向けのコードは私の GitHub から入手できます ここ。 最初のタスクは React SDK をインストールすることです。これは、次のコマンドを使用して NPM 経由で行われます。

SDK がインストールされたら、最初のステップとして、追加するファイル内のいくつかのコンポーネントをインポートし、機能フラグを作成します。 ほとんどの乳首では、3 つのことを追加する必要がありますL

の createInstance この関数を使用すると、Optimizely CDN への接続を確立してデータファイルの最新コピーを取得するための構成を定義できます。 コード内で機能フラグ キーを渡す必要はありません。 JavaScript でフラグを作成するには 2 つの方法があります。 ReactSDK を使用すると、Optimizely は Optimizely JavaScript SDK もインストールします。

機能フラグにアクセスするには、 OptimizelyFeature 成分。 これを内側にラップする必要があります OptimizelyProvider。 定義するとき OptimizelyFeature 参照したい機能フラグ ID を prop として渡します。 注意すべき重要な点の 1 つは、機能フラグ名では大文字と小文字が区別されることです。 コードでフラグ名を設定するときは、これに注意してください。そうしないと、フラグは常に false を返します 😔。

Optimizely 機能実験 UI 内での機能フラグの構成

UI 内でのフラグの作成は通常、開発者のタスクになります。 フラグが作成されると、製品所有者はポータルにログインし、その機能の動作をより詳細に制御できるようになります。 サイトにいつ表示されるか、どのセグメントがその機能を表示できるかなどを決定できます。 ポータルで、 Features タブをクリックし、新規をクリックします Feature ボタン：

機能を作成したら、その機能に対して実験を実行し、どのように起動するかを正確に決定できるようになります。 これは、フィーチャにルールを適用することで行われます。

ルール内で、機能に誘導されるトラフィックの合計量と、実験を表示するユーザーのサブセットを定義できます。 この機能は、機能がどのように使用されているか、顧客がその機能をどのように使用しているかを分析できるため、非常に便利です📈📈📈。

動的構成をポータルからコードに渡す

Optimizely ポータルからコードに動的構成を渡すこともできます。 これは、構成の小さな調整が必要な場合に、不必要なデプロイメントを回避するのに役立つ非常に便利な機能です。 動的構成は、Optimizely 変数を介して行われます。 ポータル内で、機能フラグ プロジェクトを開き、変数を選択します。

変数のタイプは、Boolean、Double、Integer、String、または JSON のいずれかです。 ReactJs コード内で、次のようにその変数にアクセスできます。

JSON は、多くの設定を props として React コンポーネントに渡したい場合に非常に便利です 😊😊😊。 React コードで行う必要があるのは、 JSON.parse （または JSON.stringify）そして仕事は良いものです：

JSON を使用すると、コード内で必要なだけ構成を動的に渡すことができます 💥

Optimizely 内で最初の機能フラグを作成するために必要なものはこれでほぼすべてです。 プロセスは非常に簡単で、すべての設定方法を理解したら、最小限の労力で基本的なテストを設定できるはずです。 コーディングを楽しんでください 🤘