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.

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

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

​

Campos de contexto disponibles

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.

​

Estructura de experiment.config

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.

​

Leer un parámetro en una plantilla

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:

<%= experiment && experiment.config.heading_text.value %>

Con una comprobación de valor nulo:

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

​

Personaliza Signup y Login con parciales

Cuando personalizas las pantallas de Signup y Login mediante parciales, el contexto del experimento se pasa explícitamente como parte del parcial.

En el parcial, está disponible la misma variable experiment:

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

​

Ejemplo: variante del texto del encabezado de registro

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:

{
  "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:

{
  "overrides": {
    "signup_headline": { "value": "Join in seconds" }
  }
}

Código de la plantilla:

<!-- 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).

​

Ejemplo: elemento condicional de la interfaz de usuario

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

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

​

Valores predeterminados seguros cuando no hay ningún experimento activo

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:

<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):

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