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

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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  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 && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {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" />

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](/docs/fr-ca/customize/login-pages/universal-login/customize-templates#customize-universal-login-page-templates). 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`.

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

<div id="available-context-fields">
  ## Champs de contexte disponibles
</div>

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.

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

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

<div id="read-a-parameter-in-a-template">
  ## Lire un paramètre dans un modèle
</div>

Les gabarits de page d’Auth0 Universal Login utilisent EJS. Les exemples ci-dessous utilisent la syntaxe EJS.

**Syntaxe EJS :**

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

Avec une vérification de la valeur null :

```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">
  ## Personnaliser l’inscription et la connexion avec des Partials
</div>

Lorsque vous personnalisez les prompts d’inscription et de connexion à l’aide de [partials](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts#manage-partials-programmatically), le contexte de l’expérience est transmis explicitement dans votre partial.

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

```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">
  ## Exemple : variante du texte du titre de la page d’inscription
</div>

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

```json theme={null}
{
  "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 :**

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

**Code du modèle :**

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

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

<div id="example-conditional-ui-element">
  ## Exemple : élément d’UI conditionnel
</div>

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

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

<div id="safe-defaults-when-no-experiment-is-active">
  ## Valeurs par défaut en l’absence d’expérience active
</div>

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 :

```html theme={null}
<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) :

```html theme={null}
<% 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.