> ## 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.

# Integración de Experiment Center y las plantillas de página

> Cómo el contexto de experimentos fluye a través de las plantillas de página y los parciales de Auth0 Universal Login, y cómo condicionar el renderizado de plantillas según la variación.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Acceso anticipado"
  };
  const stageText = stageTextMap[stage] || "una etapa de lanzamiento del producto";
  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 && <>Esta funcionalidad está disponible en los {linkify(`planes ${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Para participar, ponte en contacto con " + contact + ". "}
            {terms && <>Al usar esta funcionalidad, aceptas los términos aplicables de la prueba gratuita incluidos en el {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} de Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La funcionalidad {feature} está en {linkify(stageText, prsLink)}.</strong>
            </span>

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

<ReleaseStageNotice feature="Auth0 Experiment Center" stage="beta" terms="true" contact="Auth0 Support" />

Cuando un experimento está activo y se asigna una variación, Experiment Center inyecta automáticamente el contexto del experimento en el contexto de renderizado de la [plantilla de página](/es/docs/customize/login-pages/universal-login/customize-templates#customize-universal-login-page-templates). Las plantillas de página no requieren un paso de habilitación explícita: el contexto del experimento se pasa a todas las plantillas de forma incondicional cuando hay un experimento activo. Las plantillas reciben el contexto como una variable local llamada `experiment`.

<Warning>
  Durante la versión beta, Experiment Center se ejecuta solo en tenants de desarrollo. Los tenants de producción no son compatibles.
</Warning>

<div id="available-context-fields">
  ## Campos de contexto disponibles
</div>

Los siguientes campos están disponibles en la plantilla de la página cuando hay un experimento activo:

| **Variable**               | **Tipo** | **Descripción**                                                           |
| -------------------------- | -------- | ------------------------------------------------------------------------- |
| `experiment.experiment_id` | cadena   | El ID del experimento activo                                              |
| `experiment.variation_id`  | cadena   | El ID de la variación asignada                                            |
| `experiment.config`        | objeto   | Configuración combinada: parámetros base + sobrescrituras de la variación |
| `experiment.is_control`    | booleano | Indica si esta es la variación de control                                 |

Cuando no hay ningún experimento activo, `experiment` es `null` (o no está presente). Comprueba siempre que no sea `null` antes de usarlo.

<div id="experimentconfig-structure">
  ### Estructura de `experiment.config`
</div>

`experiment.config` es un mapa de pares clave-valor en el que cada clave es el nombre de un parámetro y cada valor es un objeto con una propiedad `value`:

```
experiment.config.my_param.value  → el valor del parámetro para esta variación
```

Cada parámetro definido en el indicador de funcionalidad tiene un valor en `config`. Experiment Center combina los parámetros base con las sobrescrituras de la variación antes de inyectarlos, así que nunca tendrás que buscar el valor predeterminado por tu cuenta.

<div id="read-a-parameter-in-a-template">
  ## Leer un parámetro en una plantilla
</div>

Las plantillas de las páginas de Auth0 Universal Login usan EJS. En los ejemplos siguientes se usa la sintaxis de EJS.

**Sintaxis de EJS:**

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

Con una comprobación de valor nulo:

```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">
  ## Personaliza Signup y Login con parciales
</div>

Cuando personalizas las pantallas de Signup y Login mediante [parciales](/es/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts#manage-partials-programmatically), el contexto del experimento se pasa explícitamente como parte del parcial.

En el parcial, está disponible la misma variable `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">
  ## Ejemplo: variante del texto del encabezado de registro
</div>

Este ejemplo muestra un indicador de funcionalidad con un parámetro de cadena que controla el encabezado de la página de registro. La variante de control usa "Crea tu cuenta"; la variante de tratamiento usa "Únete en segundos."

**Parámetros del indicador de funcionalidad:**

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

**Variación de control:** sin sobrescrituras (hereda `signup_headline: "Create your account"`)

**Variación de tratamiento:**

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

**Código de la plantilla:**

```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>
```

Los usuarios asignados a la variación de control ven "Create your account." Los usuarios del grupo de tratamiento ven "Join in seconds." Los usuarios sin ningún experimento activo también ven "Create your account" (la rama `else`).

<div id="example-conditional-ui-element">
  ## Ejemplo: elemento condicional de la interfaz de usuario
</div>

Este ejemplo usa un parámetro booleano para mostrar u ocultar un elemento adicional de la interfaz de usuario:

```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 -%}
```

La comparación `=== true` (en lugar de una comprobación de valor truthy) evita que el elemento aparezca cuando `experiment` es `null` o cuando el parámetro no está presente.

<div id="safe-defaults-when-no-experiment-is-active">
  ## Valores predeterminados seguros cuando no hay ningún experimento activo
</div>

Cuando no hay ningún experimento activo, `experiment` es `null` en el contexto de la plantilla. Estructura las plantillas de modo que siempre se rendericen correctamente sin el contexto del experimento:

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

O bien usa bloques `if/else` explícitos (más legibles para condiciones complejas):

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

Define de forma fija los valores de respaldo en tus plantillas. Coinciden con la configuración base de la variación de control, por lo que tus plantillas se comportarán correctamente tanto cuando no se esté ejecutando ningún experimento como cuando se asigne la variación de control.