Utiliser l'éditeur visuel

Au sommaire de cet article :

Interface de l'éditeur visuel

Avant de créer votre première variante Optimize, familiarisez-vous avec l'éditeur visuel. Il comprend deux principaux composants décrits ci-dessous : la barre de l'application et la palette d'édition.

Barre d'application

La barre d'application vous permet de naviguer dans l'interface. Elle s'affiche en haut de votre compte lorsque vous créez une variante. Elle est divisée en deux parties. La section supérieure affiche le nom et l'état du test, le nom de la variante, l'aperçu, la liste des modifications, le diagnostic et l'aide. La section inférieure contient l'outil de sélection des éléments, le chemin CSS et les boutons de l'éditeur CSS, ainsi que le mode interactif et les paramètres de déplacement.

The app bar in the visual editor.

Chacun des paramètres de la barre d'application est décrit plus en détail dans l'article Présentation de l'éditeur visuel.

Palette d'édition

La palette d'édition apparaît en bas à droite de la page. Elle contient des commandes permettant de modifier l'élément actuellement sélectionné. Les boutons Annuler, Répéter et Fermer ("x") se trouvent dans la barre bleue. Cliquez sur le bouton MODIFIER L'ÉLÉMENT pour changer son texte ou son code HTML, ou pour ajouter un code JavaScript à exécuter lors de son chargement. Les commandes relatives à la sélection actuelle sont affichées dans la partie inférieure de la palette. Par exemple, lorsqu'un élément textuel est sélectionné, vous pouvez en modifier les dimensions, l'emplacement, la typographie, l'arrière-plan, la bordure et la mise en page.

En savoir plus sur l'ensemble des outils de la barre d'application et de la palette d'édition dans l'article Présentation de l'éditeur visuel

Utiliser l'éditeur de code CSS

En plus d'effectuer des changements stylistiques dans l'éditeur visuel Optimize, vous pouvez afficher et reprendre les modifications apportées au style CSS de votre variante à l'aide de l'éditeur de code CSS. Au moment de l'enregistrement, les modifications que vous effectuez dans l'éditeur de code CSS sont traduites en changements stylistiques Optimize. Les changements de texte et de code HTML, et les autres modifications de style hors CSS (par exemple le style de l'élément) ne sont pas visibles. Ils ne sont pas concernés par l'éditeur de code CSS.

Pour accéder à l'éditeur de code CSS, cliquez sur le bouton d'intégration (Intégrer) en bas à droite de la barre d'application.

The embed button in the visual editor.

L'éditeur de code CSS Optimize s'affiche :

Optimize CSS code editor screenshot.

Assistance pour les règles conditionnelles

L'éditeur de code CSS accepte les règles conditionnelles comme les requêtes média, ce qui facilite l'intégration d'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 meilleure variante en copiant le code de l'éditeur de code CSS et en le déployant sur votre site Web de production.

Éditeur visuel responsif

Avec l'éditeur visuel Optimize, vous pouvez vous assurer que votre variante est compatible avec plusieurs tailles d'écran et types d'appareils. Il vous permet également d'apporter des modifications de style responsives qui s'appliquent à des largeurs d'écran spécifiques.

Vous disposez pour cela de deux méthodes :

  1. Sélectionnez l'un des appareils prédéfinis dans le menu Appareil situé en haut de l'éditeur visuel. Cette méthode vous permet de tester votre variante sur un modèle d'appareil spécifique. Le user-agent du navigateur correspondant sera simulé. Cette option offre de meilleurs résultats si vous disposez d'une version de votre site spécialement conçue pour mobile.
  2. Sélectionnez Responsive au bas du menu des appareils, puis simulez différentes tailles d'écran à l'aide des méthodes d'aperçu responsif (détaillées ci-dessous). Utilisez cette méthode si vous disposez d'un site responsif qui s'adapte dynamiquement à la largeur et à la hauteur de l'écran du navigateur (même sur ordinateur). Avec cette option, vous pouvez également effectuer des modifications de style responsives à l'aide de l'éditeur visuel.

Editor: Device menu screenshot

Menu des appareils de l'éditeur visuel

Aperçu responsif

Lorsque vous sélectionnez Responsive dans le menu des appareils, vous pouvez prévisualiser votre variante sur différentes tailles d'écran de trois manières différentes :

  1. Cliquez dans la barre de largeur automatique en gris, située juste en dessous de l'outil de sélection des éléments pour simuler des largeurs de page prédéfinies (par exemple, 320, 400 ou 600 px). Remarque : cette méthode ne permet de modifier que la largeur (et non la hauteur). Si votre site utilise déjà un code CSS responsif, cette barre ne proposera que vos points d'arrêt de largeur les plus courants. Vous pourrez ainsi voir facilement comment votre page s'affiche dans les différents cas.
  2. Saisissez directement dans l'outil de dimensionnement de page situé sous la barre de largeur automatique les valeurs souhaitées pour la largeur et la hauteur (en pixels), puis appuyez sur la touche RETOUR.
  3. Faites glisser les poignées de redimensionnement en gris foncé situées sur les bordures à droite et en bas de votre variante pour simuler une taille d'écran spécifique et vérifier que votre variante s'y adapte. Cet aperçu simule le rendu dans le navigateur de l'utilisateur lorsque ce dernier modifie brusquement la taille de la fenêtre.

editor-responsive-previewing-ss-fpo

Options d'aperçu responsif de l'éditeur visuel

Apporter des modifications responsives

Lorsque vous sélectionnez Responsive en bas du menu des appareils, en plus de prévisualiser vos variantes, vous pouvez appliquer des modifications stylistiques responsives à l'aide du menu des points d'arrêt.

editor-device-and-breakpoint-menus

Menu des appareils (à gauche) et menu des points d'arrêt (à droite).

Le menu des points d'arrêt contient des options correspondant aux restrictions responsives simples (à savoir les requêtes média) les plus courantes qui s'appliquent à votre site (pour la largeur seulement). Si votre site utilise déjà un code CSS responsif, cette barre vous propose les points d'arrêt de largeur les plus courants. Vous pouvez alors apporter les modifications adéquates pour vos points d'arrêt actuels.

Editor breakpoint menu screenshot

Menu des points d'arrêt développé

 

Lorsque vous sélectionnez une option dans le menu des points d'arrêt, l'éditeur bascule en un mode particulier : toutes les modifications stylistiques que vous apportez à l'aide de la palette de l'éditeur utilisent la restriction que vous avez choisie. Par exemple, si vous sélectionnez "Au maximum 600 pixels de large" dans le menu des points d'arrêt, puis modifiez la taille de police dans un bouton, ce dernier utilisera la police d'origine sur les appareils ou les fenêtres de navigateur de largeur supérieure à 600 pixels. Ce point sera mis en évidence dans la palette de l'éditeur. Cette spécificité ne concerne que les changements stylistiques (et non les modifications apportées au texte et au contenu).

Editor palette constrained by the breakpoint menu.

Palette de l'éditeur limitée aux valeurs sélectionnées dans le menu des points d'arrêt

Lorsque vous utilisez le menu des points d'arrêt, vous pouvez également vous servir des poignées de redimensionnement responsif à des fins de prévisualisation, mais la largeur de la page est automatiquement rétablie à la valeur de point d'arrêt sélectionnée.

Vous pouvez afficher et modifier la requête média de chaque changement de style individuel à l'aide de la liste des modifications ou de l'éditeur de code CSS. Ces outils vous permettent également de spécifier des restrictions de requête média plus complexes. Pour quitter le mode d'édition responsif, sélectionnez Toutes les tailles en haut du menu des points d'arrêt.

Liste des modifications

Chaque fois que vous effectuez une modification dans l'éditeur visuel, elle est ajoutée à la liste des modifications. Cette liste constitue l'ensemble des instructions brutes permettant de transformer la page d'origine en la variante que vous souhaitez tester. Le nombre de modifications apportées pour la variante actuelle est indiqué dans la barre d'application (par exemple, "1 modification" dans la capture d'écran ci-dessus). Pour consulter cette liste, cliquez sur le nombre de modifications dans la barre d'applications.

Optimize ne charge ni n'utilise aucune bibliothèque externe pour opérer les modifications. Les instructions de modification sont intégrées sous forme de balises Google Tag Manager compactes.

Types de modifications

Optimize prend en charge les types de modifications suivants :

Modification du style

Utilisée pour implémenter des modifications d'attribut de style incluant la taille et la position des éléments.

La modification de style vous permet d'implémenter les instructions en utilisant une règle CSS :

#target { color : red }

...elle permet autrement d'utiliser l'attribut de style de l'élément cible :

<p id="target" style="color : red"> </p>

La syntaxe la plus correcte devient le paramètre par défaut de l'éditeur visuel, ce qui favorise l'approche des règles CSS.

En présence d'une règle CSS davantage spécifique dans la page et qui remplace la nouvelle règle, l'éditeur visuel utilisera la propriété "importante", par exemple :

#target { color : red !important}

L'éditeur utilisera uniquement le style des éléments si la règle ci-dessus est également remplacée par une règle davantage spécifique dans la page.

L'approche des règles CSS minimise le clignotement (survenant lorsqu'un contenu sans style s'affiche brièvement avant le chargement CSS). En revanche, la modification d'une propriété de style en utilisant element.style nécessite que l'élément existe déjà dans la page, augmentant ainsi la probabilité que celui-ci soit brièvement visible par l’utilisateur avant sa modification.

Vous pouvez examiner les options sélectionnées par l'éditeur, et modifier celles-ci en éditant une modification de style existante.

Advanced editor – Edit style dialog screenshot

Modification de l'attribut

Utilisée pour implémenter des modifications d'attributs d'éléments, comme la cible d'un lien ou la source d'une image. Vous pouvez examiner et modifier les propriétés, telles que le sélecteur CSS, l'attribut et la valeur.

Advanced editor – edit attribute screenshot

Modification du texte

Utilisée lorsque vous effectuez des modifications de texte en ligne dans l'éditeur. Lorsqu'un élément contient du texte entrelacé avec des éléments enfants, l'éditeur indique la partie du texte qui a été modifiée. Dans l'exemple suivant, vous ne pouvez changer qu'une des parties, par exemple : "Certains textes." Pour effectuer une modification, cliquez individuellement sur chaque partie ou onglet pour passer à la prochaine partie.

<div>
Some text 
<b> a child element </b>
Some other text
</div>

 

Les modes suivants sont pris en charge :

  1. Remplacer : remplace une partie de texte existante.
  2. Insérer : insère un texte dans l'élément cible, au début de celui-ci.
  3. Ajouter : insère un texte dans l'élément cible, à la fin de celui-ci.
  4. Avant : insère un texte avant l'élément cible.
  5. Après : insère un texte après l'élément cible.

Advanced editor - edit text screenshot

Une modification de texte est plus sûre et moins invasive qu'une modification HTML. Il est préférable de l'utiliser uniquement lorsque le texte doit être modifié. Une modification de texte n'a pas d'effets secondaires dans la structure du document (ainsi que les sélecteurs CSS ou autres éléments) et n'a aucune incidence sur les gestionnaires d'événements qui pourraient être enregistrés dans les éléments cibles.

Modification HTML

Utilisée pour remplacer ou insérer un nouveau contenu HTML. Les modes suivants sont pris en charge :

  • Remplacer : remplace le contenu HTML existant.
  • Insérer : insère le nouveau contenu HTML dans l'élément cible, au début de celui-ci.
  • Ajouter : insère le nouveau contenu HTML à l'intérieur de l'élément cible, à la fin de celui-ci.
  • Avant : insère le nouveau contenu HTML avant l'élément cible.
  • Après : insère le nouveau contenu HTML après l'élément cible.

Advanced editor – Insert text before screenshot

Une modification HTML entraînera la perte de tous les gestionnaires d'événements n'étant pas en ligne. Par exemple, ce bouton cessera de fonctionner après une modification HTML (par exemple Insertion HTML avant) :
<button id=”button”> My button </button>
<script>
  document.getElementById("button")
    .addEventListener("click", function() {alert(‘hello’);});
</script>

Les modifications HTML se produisent après l'analyse du contenu HTML initial par le navigateur, de sorte que tous les scripts qu'il contient soient déjà exécutés. C'est pour cette raison que l'éditeur visuel supprime les balises de script lors du chargement du contenu HTML pour édition. Vous ne pouvez pas inclure de scripts dans le nouveau contenu HTML. Pour exécuter un nouveau script dans le cadre d'une variante, utilisez une Modification de script (Exécuter JavaScript). Vous ne pouvez pas modifier les scripts existants.

Modification de la réorganisation

Pour glisser-déplacer un élément vers un autre emplacement de la page, il est possible d'utiliser deux approches. L'approche par défaut produit une Modification de la réorganisation, ce qui modifie la position de l'élément dans le DOM. L'élément aura un nouveau parent, et/ou un ou des éléments frères/sœurs. Cela entraîne généralement l'adoption du style des éléments par l'élément, dans le nouveau domaine de celui-ci.

Utilisez une Modification de la réorganisation lors de la réorganisation des éléments de menu ou d'autres éléments d'aspect similaire.

Une Modification de la réorganisation implique une source et un sélecteur CSS cible (qui peuvent être modifiés à partir de la boîte de dialogue correspondante) ainsi qu'un mode de déplacement :

  • Haut : transforme l'élément source en premier enfant de l'élément cible.
  • Bas : transforme l'élément source en dernier enfant de l'élément cible.
  • Avant : place l'élément source en tant que frère précédant l'élément cible.
  • Après : place l'élément source en tant que frère suivant l'élément cible.

Modification du script

Une modification de script permet à Optimize d'exécuter du code JavaScript arbitraire sur chaque élément qui correspond à un sélecteur CSS. La modification permet à Optimize d'exécuter le code JavaScript comme le corps d'une fonction qui utilise l'élément à titre de paramètre.

Vous pouvez également utiliser "head" ou "body" avec le sélecteur CSS et exécuter une seule fois le code JavaScript (vu qu'il n'y a qu'un seul élément de ce type dans la page). Le sélecteur que vous utilisez, combiné à son option "run at", affecte les conditions préalables qui déterminent les cas d'exécution du script. Lisez l'article Cas d'application des instructions de modification ci-dessous.

Si un sélecteur CSS correspond à plusieurs éléments, le script fourni sera exécuté plusieurs fois, à raison d'une fois pour chaque élément. À chaque appel, l'élément est passé comme seul argument de la fonction.

Chaque appel est effectué le plus tôt possible, en fonction de l'option choisie :

  • Après la première balise : seule la première balise de l'élément correspondant doit avoir subi une analyse et doit être disponible sur la page pour que le script puisse s'exécuter.
  • Après la dernière balise : tous le contenu et la dernière balise de l'élément correspondant doivent avoir subi une analyse et doivent être disponibles sur la page pour que le script puisse s'exécuter.

Par exemple :

  • L'option "Après la première balise" utilisée avec le sélecteur "head" signifie que la modification de script peut s'exécuter dès lors que l'extrait Optimize est exécuté pour la première fois dans <HEAD> (exécution de blocage synchrone).
  • L'option "Après la dernière balise" utilisée avec le sélecteur "body" signifie que la modification de script sera exécutée une fois l'événement "document ready" (DOMContentLoaded) déclenché.

Advanced editor – Run JavaScript screenshot

Plusieurs éléments cibles

Comme avec les autres types de modifications, une Modification de la réorganisation vous permet de modifier ses sélecteurs CSS source et cible pour associer de multiples éléments. Par exemple, en sélectionnant des éléments sources multiples, vous pouvez déplacer tous les éléments d'un menu dans un autre menu.

Une Modification de la réorganisation prend également en charge un sélecteur cible correspondant à plusieurs éléments. Il permet de modifier l'ordre de deux colonnes de tableau ou toute autre structure tabulaire de la page.

  • Lorsqu'il y a plus d'éléments cibles que d'éléments sources, les éléments cibles supplémentaires sont ignorés.
  • S'il existe plus d'éléments sources que d'éléments cibles, les éléments sources supplémentaires sont ajoutés au dernier élément cible.

Déplacer n'importe où

Il existe une approche alternative pour déplacer les éléments vers un autre emplacement. Activez l'option Déplacer n'importe où située dans la fenêtre "Paramètres de déplacement".

Optimize editor – Move anywhere switch

Utiliser cette approche entraîne des modifications de style liées à la position (c.-à-d. gauche, haut, position, etc.). L'élément reste à son emplacement dans le DOM, mais semble être déplacé vers une nouvelle position. En règle générale, son style reste inchangé et il n'y a pas de modification dans le reste de la page.

L'option Déplacer n'importe où vous permet de modifier la position de boutons ou zones globaux (comme une zone de connexion) et des éléments déjà positionnés.

Sélectionner automatiquement pour la réorganisation

Cette option est activée par défaut, de sorte qu'il soit facile de choisir les éléments source et cible corrects pendant le glissement. L'éditeur choisit l'élément correct (par exemple, un élément de la liste <li> au lieu de l'image <img> qu'il contient) et limite la réorganisation au contenu du conteneur (par exemple, les éléments de la liste <ul>).

Vous pouvez désactiver cette option pour réorganiser un élément vers un autre endroit du DOM. Vous pouvez également modifier le mode de déplacement par défaut de Avant/Après à Haut/Bas en décochant la case Réorganiser en dehors de l'élément cible.

Concevoir un sélecteur CSS

Lorsque vous cliquez à un endroit de la page, l'éditeur sélectionne l'élément situé le plus en profondeur dans la zone sur laquelle vous avez cliqué.

Utilisez la barre hiérarchique pour sélectionner un élément ancêtre (qui peut occuper la même zone et qui peut affecter les propriétés visibles de cette zone, comme l'image ou la couleur d'arrière-plan). Passez la souris sur les éléments ancêtres situés dans la barre de hiérarchie pour inspecter la zone qu'occupe chaque élément. Cliquez sur l'élément pour le sélectionner, utilisez ensuite la palette de l'éditeur pour inspecter les propriétés qu'il affecte.

Advanced editor – CSS selector screenshot

Une fois qu'un élément est sélectionné pour la modification, le sélecteur CSS que l'éditeur construit devient une propriété importante de cette modification, car celui-ci peut aider à associer les bons éléments.

Voici l'algorithme que l'éditeur utilise pour construire le sélecteur :

  • Balayer les ancêtres dans le DOM jusqu'à en trouver un pouvant ê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é 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
Quelques astuces 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 sont variables.

Cas d'application des instructions de modification

L'extrait Optimize est chargé dans la balise <HEAD> de la page. Cela signifie que lorsque les instructions de modification sont exécutées, les éléments cibles n'ont pas été analysés et ne sont pas disponibles dans la page.

De nombreuses pages comprennent des scripts synchrones dans leur corps, ceux-ci permettent de retarder la préparation du DOM. Pour éviter le scintillement, les modifications d'Optimize contrôlent le document toutes les 80 ms, jusqu'à ce que les éléments correspondants puissent être identifiés. Si un sélecteur CSS correspond à plusieurs éléments sur une page complexe contenant plusieurs scripts synchrones, la modification peut être appliquée progressivement sur plusieurs itérations pendant l'analyse des éléments correspondants.

Des types de modifications différents sont également appliqués à différentes phases de l'analyse. Le texte, le code HTML et la réorganisation sont appliqués uniquement lorsque tous les contenus et la dernière balise de l'élément correspondant ont été analysés. Les modifications d'attribut et de style ne nécessitent que la première balise, et les modifications de script sont configurables par l'utilisateur.

Pour réduire le scintillement, Optimize masque temporairement les éléments associés (en utilisant des balises <STYLE> qui sont ajoutées très tôt) jusqu'à ce que les éléments soient mis en correspondance et que les modifications soient appliquées.

  • Ces informations peuvent être importantes si vos modifications impliquent un conteneur global ou le corps du document.
  • Les modifications de style implémentées en tant que règles CSS sont ajoutées de manière synchrone dans la balise <HEAD> lorsque l'extrait Optimize s'exécute. Il n'est donc pas nécessaire d'attendre l'analyse des éléments correspondants.

Ordre d'application des modifications

L'ordre des instructions de modification est respecté lorsque des effets secondaires sont présents (comme une modification ultérieure d'un élément ayant été ajouté par le biais d'une modification antérieure). Optimize peut cependant appliquer les modifications dans un ordre différent en l'absence d'effets secondaires et lorsque des éléments correspondants d'une modification ultérieure deviennent disponibles. Optimize peut même exécuter des modifications correspondant à de multiples éléments de façon progressive ou en parallèle.

Bien qu'Optimize intègre ces fonctionnalités, il est préférable de modifier le document du haut vers le bas de celui-ci.

Événements d'activation

Les pages dynamiques et les applications Web monopage chargent généralement les données supplémentaires après le chargement initial de la page. Optimize prend en charge ces implémentations via une fonctionnalité appelée Activation Events (Événements d'activation). En savoir plus sur les événements d'activation

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?