Utiliser l'éditeur visuel

Ajoutez du code CSS ou JavaScript global à votre page grâce à l'éditeur de code.

Interface utilisateur

L'éditeur visuel d'Optimize comprend deux composants visuels : la barre d'application et la palette d'édition, qui s'affichent sur la page Web que vous souhaitez modifier (la page d'édition).

Barre d'application

La barre d'application, située en haut de la page, contient des informations qui vous permettent d'identifier votre expérience (son nom et son état, le nom de la variante, le nombre de modifications apportées, les diagnostics et l'aide, par exemple). Pour en savoir plus sur la première ligne, consultez l'article Présentation de l'éditeur visuel.

Première ligne

La première ligne de la barre d'application (en gris foncé) comprend le nom de l'expérience (et son état), le nom de la variante, le menu prédéfini de l'appareil, le bouton des modifications et les diagnostics. Vous trouverez plus d'informations à leur sujet dans d'autres sections du centre d'aide.

En savoir plus sur la première ligne :

Dernière ligne

La dernière ligne de la barre d'application (en gris clair) contient les fonctionnalités suivantes (avec une description plus détaillée plus bas) :

  • Sélecteur d'éléments
  • Fil d'Ariane
  • Éditeur de code
  • Mode interactif
  • Paramètres de déplacement

 

Sélecteur d'éléments et sélection multiple

Grâce au sélecteur d'éléments [Icône de sélecteur d], vous pouvez sélectionner plusieurs éléments sur votre page Web et leur appliquer les mêmes modifications. Vous gagnez ainsi du temps. Il vous permet par exemple d'augmenter uniformément la taille de la police appliquée à tous les boutons de la barre de navigation supérieure.

Pour commencer, cliquez sur un élément de votre page, puis sur le bouton du sélecteur d'éléments [Icône de sélecteur d] dans la barre d'application. Le sélecteur d'éléments s'affiche :

Conseil : Pour sélectionner plusieurs éléments à modifier, maintenez la touche Maj enfoncée.

Le champ du sélecteur d'éléments affiche la sélection en cours (#header>a>img, par exemple) et le nombre total d'éléments sélectionnés (1, par exemple). Ces données sont mises à jour de façon dynamique au fur et à mesure que vous sélectionnez des éléments sur la page. Vous pouvez également saisir du texte directement dans le champ du sélecteur d'éléments (#login, par exemple) pour rechercher et sélectionner des éléments encore plus rapidement.

Les cases Utiliser l'ID de l'élément et Utiliser la classe de l'élément sont cochées par défaut. Cela permet à l'éditeur visuel de sélectionner l'ID et la classe appropriés lorsque vous cliquez sur un élément de la page. Laissez les cases "Utiliser l'ID de l'élément" et "Utiliser la classe de l'élément" cochées lorsque vous savez que les attributs de l'élément sont statiques.

Si l'ID et/ou la classe d'un élément sont générés de façon dynamique (à partir d'un site Web/système de gestion de contenu dynamique, par exemple), vous ne souhaitez peut-être pas que l'éditeur visuel les détecte. Pour pouvoir exercer un contrôle plus précis lorsque vous créez vos sélecteurs, utilisez les cases à cocher suivantes :

  • Utiliser l'ID de l'élément : décochez cette option si l'ID de l'élément est dynamique.
  • Utiliser la classe de l'élément : décochez cette case si la classe de l'élément est dynamique.

Pour en savoir plus, consultez la section Concevoir un sélecteur CSS ci-dessous.

Fil d'Ariane

Lorsque vous cliquez sur votre page Web, l'éditeur visuel sélectionne l'élément le plus profond dans la zone sur laquelle vous avez cliqué. Le fil d'Ariane (au milieu de la barre d'application) indique le chemin d'accès vers votre sélection dans la structure de la page.

Cliquez sur les éléments du fil d'Ariane pour en sélectionner l'ancêtre (qui peut occuper la même zone et en affecter les propriétés visibles, comme l'image ou la couleur de fond). Passez la souris sur les éléments ancêtres situés dans le fil d'Ariane afin d'inspecter la zone occupée par chaque élément. Cliquez sur l'élément pour le sélectionner, puis inspectez les propriétés sur lesquelles il a un impact à l'aide de la palette d'édition.

Éditeur avancé : capture d

Conseil de pro :
Cliquez sur le chevron (">") situé à côté d'un élément pour en sélectionner un ancêtre.

La sélection d'un élément dans l'éditeur visuel détermine le sélecteur CSS auquel vos modifications seront appliquées. La valeur du sélecteur est importante, car elle est utilisée lorsque l'expérience est en cours pour les visiteurs de votre site.

Voici l'algorithme grâce auquel l'éditeur construit le sélecteur :

  • Il examine les ancêtres dans le DOM jusqu'à en trouver un qui puisse être identifié de manière unique :
    • Par son attribut d'ID
    • Par une classe utilisée seulement par cet élément de la page
    • En tant que balise <BODY> du document
  • Revenez à l'élément sélectionné plus bas et :
    • utilisez le nom de la balise s'il n'y a qu'un seul élément enfant ayant cette balise ;
    • utilisez le sélecteur :nth-of-type si ce n'est pas le cas.
Conseils pour les sélecteurs CSS
  • Il est toujours préférable de cibler les éléments ayant un ID ou une classe unique, ou un ancêtre proche qui les possède. Cela rend vos variantes plus faciles à maintenir quand des petites modifications sont effectuées dans la structure de la page.
  • Lors de l'utilisation des classes comme identifiants uniques, assurez-vous d'utiliser une page représentative comme la page de l'éditeur (et non, par exemple, une page de résultats de produits contenant un seul produit).
  • Vous pouvez toujours modifier le sélecteur CSS d'une modification et saisir votre propre sélecteur. L'éditeur mettra en évidence les éléments associés / les éléments.
  • Vous pouvez désactiver les options d'utilisation des ID ou d'une classe unique pour établir une hiérarchie de sélecteurs. Cela peut être utile si ces attributs utilisent un identifiant CMS ou de base de données, et qu'ils sont variables.

Éditeur de code

L'éditeur de code Optimize vous permet non seulement d'apporter des modifications dans l'éditeur visuel, mais aussi d'ajouter du code CSS et JavaScript global directement à votre page Web.

Pour ajouter ces codes, cliquez sur le bouton de l'éditeur de code Intégrer dans la barre d'application :

Bouton de l

Ajouter du code CSS

Pour ajouter du code CSS directement à votre page :

Cliquez sur CSS :

Menu de l

L'éditeur de code CSS s'affiche :

Capture d

Rédigez (ou collez) votre code CSS dans la zone de texte, puis cliquez sur Enregistrer.

Remarque : Les changements de texte et de code HTML, et les autres modifications de style hors CSS (le style de l'élément, par exemple) ne sont pas visibles. Ils ne sont pas concernés par les modifications du code CSS.

Convertir en HTML

Si vous devez modifier le code CSS d'une variante, par exemple pour ajouter des styles non compatibles (tels que le préfixe de fournisseur de navigateur, un commentaire CSS, une animation par image clé, le raccourci CSS, etc.), utilisez alors l'option Convertir en HTML. Optimize vous permet de modifier le code CSS d'une variante et de l'utiliser sans le valider.

À l'aide de l'éditeur de code CSS Optimize, vous pouvez afficher et copier le code CSS généré par l'interface utilisateur. Vous pouvez aussi saisir votre propre code CSS personnalisé, ce qui se traduit par des modifications de style dans Optimize. Si vous saisissez un code CSS personnalisé qui n'est pas reconnu par l'analyseur Optimize, vous pouvez :

  1. cliquer sur Nettoyer le code CSS pour supprimer tout code CSS non analysé ; ou
  2. cliquer sur Enregistrer, puis sur Convertir en HTML afin de conserver tout code CSS non analysé et de l'encapsuler dans le code HTML.

Boîte de dialogue "Convertir le code CSS en HTML ?"

Lorsque vous cliquez sur Convertir en HTML, le code CSS non analysé est inséré dans une balise HTML <STYLE> et ajouté à la balise <HEAD> dans le code de votre site Web. De cette façon, l'éditeur Optimize ne tentera pas de valider ni d'afficher le code CSS en tant que changements stylistiques individuels.

Convertir en HTML : exemples

Quelques exemples de situations où vous pouvez utiliser cette option pour convertir un code CSS non compatible (en gras) au format HTML :

Préfixe de fournisseur de navigateur
div.nav > ul > li:nth-of-type(4) > a > span {
  color : rgb(247, 148, 151);
  -moz-font-smoothing: antialiased;
}
Commentaire CSS
div.nav > ul > li:nth-of-type(2) > a > span {
  color : rgb(247, 148, 151); /* This RGB value is a pink color. */
}
Animation par images clés
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
Raccourci CSS
div.nav > ul > li:nth-of-type(2) > a > span {
  *color : rgb(247, 148, 151); /* Targeting IE <= 7 browsers. */
}

Limites

L'option Convertir en HTML ne vous permet pas de prévisualiser l'effet des changements stylistiques individuels dans l'éditeur visuel d'Optimize (par exemple, le nombre de telles modifications, les éléments concernés et si ces éléments existent réellement). Optimize ne valide pas et n'affiche pas non plus les erreurs liées au code CSS converti en HTML. Toutefois, vous pouvez toujours déboguer votre code à l'aide des Outils pour les développeurs Chrome.

Assistance pour les règles conditionnelles

L'éditeur de code CSS accepte les règles conditionnelles telles que les requêtes média. Il est ainsi facile d'intégrer une variante de page responsive. Par exemple, vous pouvez réduire la taille de la police à 14 pixels sur les écrans de largeur inférieure à 500 pixels en ajoutant le code CSS suivant :

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

Éditeur de code CSS avancé

Si vous connaissez bien le CSS, vous pouvez intégrer l'ensemble de votre variante via l'éditeur de code CSS. Le code CSS que vous ajoutez dans cet éditeur est traduit en changements stylistiques individuels visibles dans la liste des modifications. Par ailleurs, vous pouvez intégrer votre variante dominante en copiant le code de l'éditeur de code CSS et en le déployant sur votre site Web de production.

Ajouter le code JavaScript global

Les sites Web dynamiques présentent des défis spécifiques en termes de test et de personnalisation. En effet, il est probable que de nombreux signaux que vous recherchez ne soient pas présents lorsque le conteneur Optimize se charge. De plus, même dans les situations où Optimize applique une modification, un site Web dynamique peut, par la suite, modifier ou déplacer les éléments de la page. Optimize doit alors appliquer de nouveau la modification.

Les applications monopages (SPA) peuvent présenter des défis similaires. En effet, elles ne modifient pas les URL et n'actualisent pas leur page après chaque interaction de l'utilisateur. Si vous ajoutez du code JavaScript global au niveau de la page, vous pourrez l'appliquer à n'importe quel élément de celle-ci (il ne sera donc pas associé à un seul élément).

Conseil de pro : Utilisez un événement d'activation pour que votre code JavaScript global puisse appliquer la modification autant de fois que nécessaire.

Ajouter le code JavaScript global à votre page

Pour ajouter le code JavaScript global à votre page, cliquez sur le bouton de l'éditeur de code Intégrer dans la barre d'application :

Bouton de l

Cliquez sur Code JavaScript global :

Éditeur de code, code JavaScript global sélectionné

L'éditeur JavaScript global s'affiche :

Capture d

Saisissez ou collez une fonction JavaScript au niveau de la page qui sera appelée au moment de l'activation de cette expérience, puis cliquez sur Appliquer.

Exemple de code JavaScript global

// Activation happens whenever the user refines e-commerce results.
// Whenever that happens, this will add an additional link to see latest offers
// but only in the cases where there are less than 3 results.

var eCommerceContainer = document.getByElementId('ecommerce-container');

if (eCommerceContainer.childNodes.length < 3) {
var offers = document.createElement('a');
offers.href = "/offers";
offers.innerText = ' Have a look at our latest offers'
eCommerceContainer.appendChild(offers);
}
Conseil de pro : Utilisez un événement d'activation pour que votre code JavaScript global puisse appliquer la modification autant de fois que nécessaire.

Mode interactif

Le mode interactif [Icône du mode interactif] permet de créer des variantes à partir de pages comprenant des éléments interactifs qui ne se déclenchent que sous l'effet d'une interaction de l'utilisateur (défilement, menus interactifs et panneaux de connexion, par exemple).

Raccourci clavier :

Appuyez sur Maj+Retour/Entrée pour activer/désactiver le mode interactif.

Remarque : Même si votre sélection n'est peut-être pas visible, l'élément reste sélectionné en mode interactif. Vous pouvez ainsi passer dans l'éditeur visuel pour apporter des modifications à la nouvelle sélection.

Cliquez sur le bouton [Icône du mode interactif] dans la barre d'application pour activer le mode interactif. La palette d'édition est ainsi masquée, et la barre d'application est remplacée par cette simple barre noire : Bannière du mode interactif.

En mode interactif, affichez l'élément que vous souhaitez modifier ou interagissez avec celui-ci, puis cliquez sur Quitter dans la barre noire. Vous revenez ainsi dans l'éditeur visuel, où vous pouvez apporter les modifications nécessaires.

Paramètres de déplacement

Vous pouvez déplacer des éléments sur votre page Web à votre convenance grâce à l'option Déplacer n'importe où. Pour ce faire, cliquez sur Paramètres [Paramètres] dans la barre d'application :

Menu des paramètres "Déplacer n

Déplacer n'importe où

L'option "Déplacer n'importe où" modifie le style en fonction de la position d'un élément sur votre page Web (par exemple, à gauche, en haut, en bas, etc.). Bien que l'élément conserve sa position d'origine dans le DOM, l'internaute le voit ailleurs. En règle générale, le style de cet élément reste le même et rien d'autre ne change sur la page.

L'option Déplacer n'importe où vous permet de modifier l'emplacement de boutons et de zones généraux, et d'éléments fixes (comme une zone de connexion).

Sélectionner automatiquement pour la réorganisation

Cette option vous permet de sélectionner facilement les bons éléments source et cible dans l'éditeur visuel. Lorsque cette option est cochée, l'éditeur visuel choisit automatiquement l'élément approprié (par exemple, un élément de liste <li> au lieu de l'image <img> qu'il contient) et limite la réorganisation à ce qui se trouve dans le conteneur (à savoir, l'élément de liste <ul>).

Réorganiser en dehors de l'élément cible

Remarque : Pour activer cette option, décochez la case Sélectionner automatiquement pour la réorganisation.

Lorsque l'option "Réorganiser en dehors de l'élément cible" est cochée, l'option "Déplacer n'importe où" est activée. Lorsqu'elle est décochée, vous ne pouvez pas réorganiser les éléments dans le DOM. De plus, le mode de déplacement par défaut passe de Avant/Après à Haut/Bas.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?
Recherche
Effacer la recherche
Fermer le champ de recherche
Applications Google
Menu principal
Rechercher dans le centre d'aide
true
101337
false