Experiment Center と Page Templates の連携

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

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

ベータ期間中、Experiment Center は開発テナントでのみ実行されます。Production テナントはサポート対象外です。

​

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

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

変数	型	説明
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  → このバリエーションにおけるパラメータの値

機能フラグで定義されたすべてのパラメータには、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 を使用してサインアップとログインをカスタマイズする

partials を使用して Signup および Login プロンプトをカスタマイズすると、実験のコンテキストが partials に明示的に渡されます。

partials では、同じ 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"
  }
}

コントロールバリエーション: オーバーライドなし (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>
<% } %>

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