Experiment Center et intégration des modèles de page

Comment le contexte d’expérience se transmet dans les modèles de page et les partials d’Auth0 Universal Login, et comment adapter le rendu du modèle selon la variante.

Lorsqu’une expérience est active et qu’une variante est attribuée, Experiment Center injecte automatiquement le contexte de l’expérience dans le contexte de rendu du modèle de page. Les modèles de page ne nécessitent aucune étape d’activation : le contexte de l’expérience est transmis à tous les modèles sans condition lorsqu’une expérience est active. Les modèles reçoivent ce contexte sous la forme d’une variable locale nommée experiment.

Pendant la période bêta, Experiment Center fonctionne uniquement sur les locataires de développement. Les locataires de production ne sont pas pris en charge.

​

Champs de contexte disponibles

Les champs suivants sont disponibles dans le modèle de page lorsqu’une expérience est active :

Variable	Type	Description
experiment.experiment_id	string	L’ID de l’expérience active
experiment.variation_id	string	L’ID de la variante attribuée
experiment.config	object	Configuration fusionnée : paramètres de base + surcharges de variante
experiment.is_control	boolean	Indique s’il s’agit de la variante témoin

Lorsqu’aucune expérience n’est active, experiment est null (ou n’est pas présent). Vérifiez toujours que la valeur n’est pas nulle avant de l’utiliser.

​

Structure de experiment.config

experiment.config est un dictionnaire clé-valeur dans lequel chaque clé correspond à un nom de paramètre et chaque valeur est un objet doté d’une propriété value :

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

Chaque paramètre défini dans l’indicateur de fonctionnalité a une valeur dans config. Experiment Center fusionne les paramètres de base avec les remplacements de la variante avant de les injecter; vous n’avez donc jamais à chercher vous-même la valeur par défaut.

​

Lire un paramètre dans un modèle

Les modèles de page Auth0 Universal Login utilisent EJS. Les exemples ci-dessous utilisent la syntaxe EJS.

Syntaxe EJS :

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

Avec une vérification de valeur nulle :

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

​

Personnaliser Signup et Login avec des Partials

Lorsque vous personnalisez les invites Signup et Login à l’aide de partials, le contexte de l’expérience est transmis explicitement dans votre partial.

Dans le partial, la même variable experiment est disponible :

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

​

Exemple : variante du texte du titre de la page d’inscription

Cet exemple montre un indicateur de fonctionnalité avec un paramètre String qui contrôle le titre de la page d’inscription. La variante témoin utilise “Créez votre compte” ; la variante de traitement utilise “Inscrivez-vous en quelques secondes.”

Paramètres du indicateur de fonctionnalité :

{
  "signup_headline": {
    "type": "string",
    "value": "Create your account",
    "description": "Headline text on the signup screen"
  }
}

Variante témoin : overrides vides (hérite de signup_headline: "Create your account")

Variante de traitement :

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

Code du modèle :

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

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

Les utilisateurs affectés à la variante témoin voient “Créez votre compte.” Les utilisateurs du groupe test voient “Inscrivez-vous en quelques secondes.” Les utilisateurs sans expérimentation active voient aussi “Créez votre compte” (la branche else).

​

Exemple : élément d’interface utilisateur conditionnel

Cet exemple utilise un paramètre booléen pour afficher ou masquer un élément d’interface utilisateur supplémentaire :

<!-- 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 comparaison === true (plutôt qu’un test « truthy ») empêche l’élément de s’afficher lorsque experiment est null ou lorsque le paramètre est absent.

​

Valeurs par défaut sûres lorsqu’aucune expérience n’est active

Lorsqu’aucune expérience n’est active, experiment vaut null dans le contexte du modèle. Structurez vos modèles de façon à ce qu’ils s’affichent toujours correctement, même en l’absence de contexte d’expérience :

<h1>
  <%= (experiment && experiment.config.page_title && experiment.config.page_title.value)
      || "Default page title" %>
</h1>

Ou utilisez des blocs if/else explicites (plus lisibles lorsque les conditions sont complexes) :

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

Codez en dur les valeurs de repli dans vos modèles. Elles correspondent à la base de référence de la variante témoin, de sorte que vos modèles se comportent correctement autant lorsqu’aucune expérience n’est en cours que lorsque la variante témoin est attribuée.