Aller au contenu principal

JavaScript d'expérience et CSS d'expérience

Dernière mise à jour le 23 oct. 20262 min de lecture
Table des matières

En bref​

Avec Experiment JavaScript et Experiment CSS, tu peux livrer du code JavaScript et CSS à toutes les variantes d'une expérience, y compris l'original. Le code d'expérience est toujours exécuté avant le code des variantes individuelles.

Cela est utile chaque fois qu'un code doit s'exécuter de manière identique pour chaque visiteur de l'expérience, par exemple pour charger un script de tracking sur toutes les variantes. Le code d'expérience est destiné aux utilisateurs expérimentés ayant des connaissances en programmation.

Tableau de bord Varify avec le menu à trois points d'une expérience ouvert, montrant la section « Code appliqué à toutes les variantes » avec les entrées Add Experiment JavaScript, Add Experiment CSS et Add Reset JavaScript

Où trouver Experiment JS et Experiment CSS​

Tu trouveras les deux fonctions dans l'aperçu des expériences de ton tableau de bord :

  1. Clique sur le menu à trois points en haut à droite de l'expérience.
  2. Sous Code applied for all variations, sélectionne Add Experiment JavaScript ou Add Experiment CSS.
  3. Saisis ton code et enregistre-le.

Le badge à côté de chaque entrée indique si du code a déjà été ajouté.

Comment fonctionne le code d'expérience​

  • Livré à chaque variante : le code d'expérience est appliqué à toutes les variantes de l'expérience ainsi qu'à l'original.
  • Exécuté en premier : le code d'expérience est toujours exécuté avant le code des variantes. Le code ou les styles que tu ajoutes dans une variante peuvent donc s'appuyer sur ce que le code d'expérience a déjà mis en place.
  • Même code, même résultat pour tous : comme le code est livré à toutes les variantes, il ne crée pas de différence entre elles. Utilise-le pour ce qui doit s'appliquer à tout le monde, et utilise le code de variante (voir Add JavaScript et Add CSS) pour les changements que tu souhaites tester.

Exemples d'application​

Exécuter un script de tracking sur toutes les variantes​

Un cas d'usage typique pour Experiment JavaScript est un script de tracking qui doit être ajouté à chaque variante. Au lieu de copier le script dans chaque variante, tu l'ajoutes une fois en tant qu'Experiment JavaScript.

// Runs on the original and on all variations
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: 'experiment_loaded',
});

Partager des styles entre toutes les variantes​

Avec Experiment CSS, tu peux définir des styles nécessaires dans chaque variante, par exemple pour un élément que tu ajoutes via JavaScript.

.promo-note {
  font-size: 14px;
  color: #333;
}

Utiliser les fonctions d'aide​

Les fonctions d'aide de Varify fonctionnent aussi dans Experiment JavaScript. Tu peux les utiliser, par exemple, pour attendre des éléments dans le DOM ou pour empêcher l'exécution du code dans l'éditeur. Tu trouveras toutes les fonctions disponibles et des exemples dans l'article Code Helpers.

window.varify.helpers.waitFor('.product', (element) => {
  // Runs as soon as the element is available in the DOM
});

Ajouter un reset JavaScript​

Dans le même menu, tu trouveras également Add Reset JavaScript. Il supprime le code que tu as ajouté, ce qui est particulièrement utile pour les Single Page Applications. Tu trouveras plus d'informations dans l'article Add JavaScript Reset.

Sur cette page