Experiment Center と Page Templates の連携

実験がアクティブでバリエーションが割り当てられると、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 を使用して 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>
<% } %>

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

Brand Customization

Code Customization

Third-Party Customization

Experiment Center と Page Templates の連携

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

`experiment.config` の構造

テンプレートでパラメータを読み取る

例: 条件付きUI要素

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

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

​experiment.config の構造

​テンプレートでパラメータを読み取る

​Partials を使用してサインアップとログインをカスタマイズする

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

​例: 条件付きUI要素

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

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

`experiment.config` の構造

テンプレートでパラメータを読み取る

Partials を使用してサインアップとログインをカスタマイズする

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

例: 条件付きUI要素

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