> ## 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 と Page Templates の連携

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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "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 Support" />

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

<Warning>
  ベータ期間中、Experiment Center は開発テナントでのみ実行されます。Production テナントはサポート対象外です。
</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  → このバリエーションにおけるパラメータの値
```

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

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

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

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

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