Expérimentation
Éditeur visuel sans code
Sélectionnez un élément sur votre propre site en production et modifiez-le dans l’inspecteur, ou déposez une section prête à l’emploi. La variante s’enregistre ; la page reste intacte.
Éditeur IA
Décrivez la modification et regardez-la prendre forme
Dites à l’éditeur ce que vous voulez, en termes simples, ou désignez un élément et formulez votre demande. L’IA lit la page, propose les modifications et en affiche l’aperçu sur votre site en production. Rien n’est enregistré tant que vous ne les avez pas appliquées.
- Un mot ou toute une sectionCorrigez un titre ou refaites entièrement un hero, un menu ou une grille tarifaire en une seule demande. Chaque modification est listée à part : vous ne gardez que celles qui vous conviennent.
- Du JavaScript seulement quand il le fautLa plupart des tests portent sur le texte, le style et le balisage, et c’est ce que l’IA écrit. Quand un test exige un comportement, par exemple un élément qui réagit à un clic ou au défilement, elle écrit aussi le code, qui doit alors être approuvé séparément.
- L’IA lit la page pour vousL’IA travaille à partir d’un schéma de la page sur laquelle vous êtes : sa structure et ses textes. Vous décrivez le résultat voulu, elle trouve les éléments à modifier. Ni sélecteur ni développeur.
- Un aperçu avant tout enregistrementLes modifications proposées s’affichent sur votre page en production, chacune avec sa case à cocher. Une fois appliquées, elles deviennent des modifications ordinaires de la variante, que vous pouvez annuler jusqu’à l’enregistrement.
- Des tests solides, sans codeQuiconque sait décrire une meilleure page peut en créer la variante. L’IA répond dans la langue de votre demande et laisse les textes de la page dans leur langue d’origine.
- Le coût, connu d’avanceChaque demande consomme des crédits IA, et le panneau en affiche une estimation avant que vous ne l’envoyiez. Les valeurs des formulaires et les données personnelles de la page sont masquées avant tout envoi.
L’éditeur s’ouvre depuis le panneau latéral de Chrome et charge votre vrai site dans un cadre, si bien que vous désignez ce que vous voulez modifier plutôt que de le décrire dans un ticket. Sélectionner un élément ouvre l’inspecteur : typographie, espacement sur un modèle de boîte que vous pouvez faire glisser, taille, mise en page, fond et bordure, et une recherche parmi toutes les propriétés CSS que connaît le navigateur. Chaque modification est enregistrée sur la variante que vous éditez, jamais sur la page.
Un commutateur Normal, Hover, Focus et Active met en forme les états interactifs d’un élément sans CSS, si bien qu’un bouton peut changer de couleur au survol dans la variante comme il le ferait dans votre feuille de style. Le texte s’édite là où il se trouve, d’un double-clic, et les liens, les images (y compris les images responsives qu’utilisent la plupart des boutiques Shopify), le texte alternatif et les libellés d’accessibilité ont leurs propres champs.
Les modifications ne se limitent pas à ce qui est déjà sur la page. L’onglet Add est une bibliothèque de blocs, de mises en page et de médias, d’un hero ou d’une FAQ à une barre d’achat fixe sur mobile, et chacun reprend les polices et les couleurs du site là où il est déposé. Tout texte d’une modification peut intégrer les données de la page, si bien qu’une seule modification peut afficher le prix propre à chaque produit.
Une liste des modifications affiche en langage clair tout ce que fait la variante (Moved, Added button, Heading text), avec des fonctions d’annulation et de rétablissement fiables, et les modifications faites pendant un enregistrement en cours sont conservées. Cette liste, c’est la variante. C’est ce qui s’applique sur la page d’un visiteur et ce que la transmission à l’implémentation lira plus tard pour indiquer à un développeur quoi coder en dur.
L’éditeur en un coup d’œil
Un seul écran pour tout ce qu’un test modifie
Le panneau Layers et les composants à gauche, votre page en ligne au centre, l’inspecteur à droite. Chaque section ci-dessous en présente une partie, en action.
Panneau latéral de Chrome
Ouvrez l’éditeur depuis la page que vous regardez
L’extension s’ancre dans le panneau latéral de Chrome, à côté du site, et suit l’onglet sur lequel vous êtes. Elle reconnaît le site, liste ses tests et ouvre l’éditeur sur cette page plutôt que sur celle depuis laquelle le test a démarré.
- Pleine hauteur, redimensionnable, et toujours ouvert quand vous cliquez dans la page
- Filtrez par statut, ou cherchez par nom ou par numéro de test
- Ne demande l’accès à un site qu’une fois, la première fois que vous y ouvrez l’éditeur
Bibliothèque de composants
Ajoutez une section entière, pas seulement une nouvelle couleur
Glissez un bloc de l’onglet Add vers la page : une ligne bleue indique où il va se placer avant même que vous ne le lâchiez. Il adopte la police et les tailles de titres du site, et prend sa couleur d’accent à l’endroit où vous l’avez déposé.
- Douze blocs, d’un hero et d’une FAQ à une barre fixe et une pop-up
- Des sections, des conteneurs et des colonnes qui s’empilent sur téléphone
- Vidéo, carrousel d’images et galerie, avec YouTube lu via son lecteur sans cookies
Contenu dynamique
Construisez-le une fois, et chaque page affiche ses propres données
Insérez des données de la page dans n’importe quel texte, lien ou image, choisies dans une liste des vraies valeurs de la page. Une bannière construite une fois accueille chaque visiteur avec la campagne dont il vient ; sur une boutique, une barre fixe affiche le nom et le prix propres à chaque produit.
- Données de campagne, de visiteur et de date sur chaque site, sans configuration
- Données de produit, de prix et de panier sur les boutiques, dans la devise de la page
- Une donnée manquante masque l’élément, ou affiche une valeur de repli que vous choisissez
Flux de données
Des données issues de vos propres systèmes, dans le test
Connectez un flux que le site publie déjà, par exemple des avis, des dates d’événements, des textes de campagne ou un flux produits Google Merchant, choisissez l’élément que voit chaque visiteur, et cochez les champs qu’une page peut afficher. Les serveurs de Pertento le récupèrent à intervalles réguliers, si bien que les visiteurs n’attendent jamais les vôtres.
- Faites correspondre l’élément à l’adresse de la page, à un paramètre d’URL, à la campagne ou au produit
- Ou affichez l’élément programmé pour maintenant, pour les promotions limitées dans le temps
- Seuls les champs que vous cochez parviennent aux visiteurs
Inspecteur et états
Mettez en forme hover, focus et active sans écrire de CSS
L’inspecteur édite tout ce que vous sélectionnez : typographie, espacement sur un modèle de boîte, taille, mise en page, fond et bordure. Un commutateur Normal, Hover, Focus et Active met en forme les états interactifs, si bien que la couleur de survol d’un bouton fait elle aussi partie de la variante.
- Recherchez n’importe quelle propriété CSS que connaît le navigateur, avec Reset sur chaque champ
- Liens, images responsives, texte alternatif et libellés d’accessibilité
- Chaque modification d’état est une modification ordinaire, qui s’annule et s’enregistre comme les autres
Texte sur place
Réécrivez un titre là où il se trouve
Double-cliquez sur n’importe quel texte de la page et saisissez votre texte. Le gras, l’italique et le souligné fonctionnent comme dans un document, et quand vous cliquez ailleurs, l’édition devient une modification ordinaire, que l’annulation défait exactement.
- Gras, italique et souligné au clavier, Shift+Enter pour un saut de ligne, Escape pour annuler
- Fonctionne sur le texte et sur le balisage en ligne qu’il contient
- Apparaît dans la liste des modifications en langage clair, sous le nom Heading text
Tous les éléments correspondants
Modifiez tous les éléments correspondants à la fois, y compris ceux qui se chargent plus tard
Ciblez un sélecteur CSS et ajoutez du style ou du HTML à tous les éléments qu’il sélectionne. Les éléments qui arrivent plus tard via le défilement infini, un carrousel ou la navigation dans l’application reçoivent aussi la modification, une seule fois chacun.
- Ajouter, insérer, avant, après ou remplacer
- Un décompte en direct des éléments correspondants
- La sélection des éléments similaires fait de même en pointant, pour chaque élément semblable à celui que vous avez choisi
Modifications et enregistrement
Chaque modification listée, en termes clairs
Chaque modification est listée en langage clair, comme Moved, Added button ou Heading text, avec des fonctions d’annulation et de rétablissement fiables. Les modifications faites pendant un enregistrement en cours sont conservées, un enregistrement échoué peut être relancé, et l’éditeur demande confirmation avant de se fermer.
- Annulez n’importe quelle modification individuellement depuis la liste
- Le CSS et le JavaScript globaux en haut, avec leur nombre de lignes
- Une modification dont l’élément manque sur la page est signalée, pas masquée
Aperçu partout
Voyez la variante sur un vrai téléphone
Les aperçus par appareil affichent les tailles ordinateur, tablette et téléphone dans l’éditeur. Pour tester en conditions réelles, Preview on another device donne un lien qui ouvre la variante enregistrée sur n’importe quel téléphone ou navigateur, et un second lien qui rétablit l’affichage normal de ce navigateur.
- Les jetons de connexion sont retirés du lien, qui peut donc être partagé sans risque
- Affiche les modifications enregistrées pendant que le test tourne sur cette page
- S’ouvre dans n’importe quel navigateur, pas seulement Chrome
Du code, quand vous en voulez
HTML, CSS et JavaScript, avec les mêmes données de page
Tout ce que les outils visuels ne savent pas exprimer s’écrit en code sur la variante. Modifiez ou ajoutez du HTML autour d’un élément, ou écrivez le CSS et le JavaScript globaux de la variante, et lisez les données de la page avec pertento.data().
- Insert page data ajoute un jeton au HTML
- Read page data ajoute un appel à pertento.data() au JavaScript
- Le CSS et le JavaScript globaux peuvent être entièrement effacés
Raccourcis clavier
Raccourcis clavier pour les actions que vous répétez
Les raccourcis fonctionnent dès que vous cliquez sur un élément de la page, et la liste complète se trouve derrière l’icône de clavier dans la barre d’outils de l’éditeur.
- Enregistrer
- ⌘SCtrl+S
- Annuler
- ⌘ZCtrl+Z
- Rétablir
- ⇧⌘ZCtrl+Y
- Modifier le HTML
- E
- Dupliquer
- D
- Masquer, en gardant sa place
- H
- Ajouter un élément
- A
- Supprimer l’élément
- ⌫
- Sélectionner le parent
- ⇧↵
- Monter ou descendre
- ⌥↑⌥↓
- Ouvrir le menu de l’élément
- ⇧F10
- Modifier le texte sur place