> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "ベータ",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は、{linkify(`${plans}プラン`, "https://auth0.com/pricing")}で利用できます。 </>}
            {contact && "参加するには、" + contact + " までお問い合わせください。 "}
            {terms && <>この機能を使用すると、Okta の{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に定める該当する無料トライアル条件に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature} 機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Experiment Center" stage="beta" terms="true" contact="Auth0 サポート" />

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

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

<div id="available-context-fields">
  ## 利用可能なコンテキストフィールド
</div>

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

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

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

<div id="experimentconfig-structure">
  ### `experiment.config` の構造
</div>

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

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

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

<div id="read-a-parameter-in-a-template">
  ## テンプレートでパラメーターを参照する
</div>

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

**EJS 構文:**

```html theme={null}
<%= experiment && experiment.config.heading_text.value %>
```

null チェックを行う場合:

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

<div id="customize-signup-and-login-with-partials">
  ## Partials を使用して Signup と Login をカスタマイズする
</div>

[partials](/ja/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts#manage-partials-programmatically) を使用して Signup プロンプトとログイン プロンプトをカスタマイズする場合、実験コンテキストは partial の一部として明示的に渡されます。

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

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

<div id="example-signup-headline-copy-variant">
  ## 例: サインアップ見出し文言のバリエーション
</div>

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

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

```json theme={null}
{
  "signup_headline": {
    "type": "string",
    "value": "Create your account",
    "description": "Headline text on the signup screen"
  }
}
```

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

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

```json theme={null}
{
  "overrides": {
    "signup_headline": { "value": "Join in seconds" }
  }
}
```

**テンプレートのコード：**

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

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

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

<div id="example-conditional-ui-element">
  ## 例: 条件付き UI 要素
</div>

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

```html theme={null}
<!-- 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` の場合や、パラメーターが存在しない場合に要素が表示されるのを防ぎます。

<div id="safe-defaults-when-no-experiment-is-active">
  ## アクティブな実験がない場合の安全なデフォルト値
</div>

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

```html theme={null}
<h1>
  <%= (experiment && experiment.config.page_title && experiment.config.page_title.value)
      || "Default page title" %>
</h1>
```

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

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

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