Experiment Center とページテンプレートの統合

実験コンテキストが Auth0 Universal Login のページテンプレートや partials をどのように流れ、バリエーションに応じてテンプレートのレンダリングをどのように分岐させるかを説明します。

実験がアクティブで、かつバリエーションが割り当てられている場合、Experiment Center は ページテンプレート のレンダリングコンテキストに実験コンテキストを自動的に追加します。ページテンプレートでオプトインの手順は必要ありません。実験がアクティブな場合、実験コンテキストは無条件ですべてのテンプレートに渡されます。テンプレートは、このコンテキストを experiment という名前のローカル変数として受け取ります。

Beta 期間中、Experiment Center は開発用テナントでのみ動作します。本番用テナントはサポート対象ではありません。

​

利用可能なコンテキストフィールド

実験がアクティブな場合、ページテンプレートでは次のフィールドを利用できます。

変数	型	説明
experiment.experiment_id	string	アクティブな実験の ID
experiment.variation_id	string	割り当てられたバリエーションの ID
experiment.config	object	マージされた設定: ベースラインのパラメーター + バリエーションのオーバーライド
experiment.is_control	boolean	コントロールバリエーションかどうか

アクティブな実験がない場合、experiment は null です (または存在しません) 。使用する前に、必ず null チェックを行ってください。

​

experiment.config の構造

experiment.config はキーと値のマップで、各キーはパラメーター名、各値は value プロパティを持つオブジェクトです。

experiment.config.my_param.value  → the parameter's value for this variation

フィーチャーフラグで定義されたすべてのパラメーターには、config 内に値があります。Experiment Center は注入前にベースラインのパラメーターとバリエーションのオーバーライドをマージするため、既定値を自分で確認する必要はありません。

​

テンプレートでパラメーターを参照する

Auth0 Universal Login のページテンプレートでは EJS を使用します。以下の例では EJS 構文を使用しています。

EJS 構文:

<%= experiment && experiment.config.heading_text.value %>

null チェックを行う場合:

<% if (experiment) { %>
  <h1><%= experiment.config.heading_text.value %></h1>
<% } else { %>
  <h1>Create your account</h1>
<% } %>

​

Partials を使用して Signup と Login をカスタマイズする

partials を使用して Signup プロンプトとログイン プロンプトをカスタマイズする場合、実験コンテキストは partial の一部として明示的に渡されます。

partial では、同じ experiment 変数を利用できます。

<!-- partials/signup-header.ejs -->
<header>
  <h1>
    <% if (experiment && experiment.config.heading_text) { %>
      <%= experiment.config.heading_text.value %>
    <% } else { %>
      Create your account
    <% } %>
  </h1>
</header>

​

例: サインアップ見出し文言のバリエーション

この例では、サインアップページの見出しを制御する文字列パラメーターを持つフィーチャーフラグを示します。コントロールバリエーションでは “Create your account” を使用し、トリートメントでは “Join in seconds.” を使用します。

フィーチャーフラグのパラメーター:

{
  "signup_headline": {
    "type": "string",
    "value": "Create your account",
    "description": "Headline text on the signup screen"
  }
}

コントロールバリエーション: overrides が空 (signup_headline: "Create your account" を継承)

トリートメントバリエーション:

{
  "overrides": {
    "signup_headline": { "value": "Join in seconds" }
  }
}

テンプレートのコード：

<!-- signup.ejs -->
<div class="signup-container">
  <h1>
    <% if (experiment) { %>
      <%= experiment.config.signup_headline.value %>
    <% } else { %>
      Create your account
    <% } %>
  </h1>

	{%- auth0:widget -%}
</div>

コントロールバリエーションに割り当てられたユーザーには “アカウントを作成しましょう。” と表示されます。トリートメントに割り当てられたユーザーには “数秒で登録できます。” と表示されます。アクティブな実験がないユーザーにも “アカウントを作成しましょう” が表示されます (else 分岐) 。

​

例: 条件付き UI 要素

この例では、ブール値のパラメーターを使用して、追加の UI 要素の表示／非表示を切り替えます。

<!-- login.ejs -->
<% if (experiment && experiment.config.show_social_proof.value === true) { %>
  <div class="social-proof">
    <p>Join 2 million people who sign in with their passkey.</p>
  </div>
<% } %>

{%- auth0:widget -%}

=== true との比較 (truthy チェックではなく) により、experiment が null の場合や、パラメーターが存在しない場合に要素が表示されるのを防ぎます。

​

アクティブな実験がない場合の安全なデフォルト値

アクティブな実験がない場合、テンプレートコンテキストでは experiment は null です。実験コンテキストがなくても常に正しくレンダリングされるように、テンプレートを作成してください。

<h1>
  <%= (experiment && experiment.config.page_title && experiment.config.page_title.value)
      || "Default page title" %>
</h1>

または、if/else を明示的に記述することもできます (複雑な条件ではこちらのほうが読みやすくなります) :

<% if (experiment && experiment.config.page_title) { %>
  <h1><%= experiment.config.page_title.value %></h1>
<% } else { %>
  <h1>Default page title</h1>
<% } %>

フォールバック値はテンプレートにハードコードしてください。これらの値はコントロールバリエーションのベースラインと一致するため、実験が実行されていない場合でも、コントロールバリエーションが割り当てられている場合でも、テンプレートは正しく動作します。