Intégration entre Experiment Center et les gabarits de page

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

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>

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.

Brand Customization

Code Customization

Third-Party Customization

Intégration entre Experiment Center et les gabarits de page

Champs de contexte disponibles

Structure de `experiment.config`

Lire un paramètre dans un modèle

Exemple : élément d’UI conditionnel

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

​Champs de contexte disponibles

​Structure de experiment.config

​Lire un paramètre dans un modèle

​Personnaliser l’inscription et la connexion avec des Partials

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

​Exemple : élément d’UI conditionnel

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

Champs de contexte disponibles

Structure de `experiment.config`

Lire un paramètre dans un modèle

Personnaliser l’inscription et la connexion avec des Partials

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

Exemple : élément d’UI conditionnel

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