Intégration entre Experiment Center et les gabarits de page

Comment le contexte de l’expérience se transmet dans les gabarits de page et les partials d’Auth0 Universal Login, et comment adapter le rendu du gabarit selon la variation.

Lorsqu’une expérience est active et qu’une variation est attribuée, Experiment Center injecte automatiquement le contexte de l’expérience dans le contexte de rendu du gabarit de page. Les gabarits de page ne nécessitent aucune étape d’activation : le contexte de l’expérience est transmis à tous les gabarits sans condition lorsqu’une expérience est active. Les gabarits 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 tenants de développement. Les tenants de production ne sont pas pris en charge.

​

Champs de contexte disponibles

Les champs suivants sont disponibles dans le gabarit 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 variation attribuée
experiment.config	object	Configuration fusionnée : paramètres de référence + remplacements de la variation
experiment.is_control	boolean	Indique s’il s’agit de la variation témoin

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

​

Structure de experiment.config

experiment.config est un ensemble clé-valeur dans lequel chaque clé correspond au nom d’un 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 le feature flag a une valeur dans config. Experiment Center fusionne les paramètres de référence avec les remplacements de la variation avant l’injection, de sorte que vous n’avez jamais besoin de chercher vous-même la valeur par défaut.

​

Lire un paramètre dans un modèle

Les gabarits de page d’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 la valeur null :

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

​

Personnaliser l’inscription et la connexion avec des Partials

Lorsque vous personnalisez les prompts d’inscription et de connexion à 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 feature flag avec un paramètre de type chaîne de caractères qui contrôle le titre de la page d’inscription. La variation témoin utilise “Créez votre compte”; le traitement utilise “Inscrivez-vous en quelques secondes.”

Paramètres du feature flag :

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

Variation témoin : aucun remplacement (hérite de signup_headline: "Create your account")

Variation 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 attribués à la variation témoin voient “Créez votre compte.” Les utilisateurs du traitement 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’UI conditionnel

Cet exemple utilise un paramètre booléen pour afficher ou masquer un élément d’UI 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 de vérité implicite) empêche l’élément d’apparaître lorsque experiment est null ou que le paramètre est absent.

​

Valeurs par défaut en l’absence d’expérience active

Lorsqu’aucune expérience n’est active, experiment a la valeur null dans le contexte du modèle. Structurez vos modèles de manière à ce qu’ils s’affichent toujours correctement, même sans contexte de l’expérience :

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

Ou encore, 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>
<% } %>

Intégrez en dur les valeurs de solution de secours dans vos modèles. Elles correspondent à la configuration de référence de la variation témoin, afin que vos modèles se comportent correctement aussi bien lorsqu’aucune expérience n’est en cours que lorsque la variation témoin est attribuée.