Gérer les modifications web manage-web-modifications
Vous pouvez facilement gérer tous les composants, réglages et styles que vous avez ajoutés à votre page web. Vous pouvez également ajouter des modifications directement à partir du volet dédié.
Utiliser le volet Modifications use-modifications-pane
-
Sélectionnez l’icône Modifications pour afficher le volet correspondant à gauche.
-
Vous pouvez passer en revue chacune des modifications que vous avez apportées à la page.
-
Sélectionnez une modification non souhaitée et cliquez sur l’option Supprimer la modification à partir du bouton Plus d’actions pour la supprimer.
note caution CAUTION Procédez avec précaution lors de la suppression d’une action, car elle peut avoir un impact sur les actions suivantes. -
Pour supprimer plusieurs modifications en même temps, cliquez sur le bouton Sélectionner en haut du volet Modifications, vérifiez les modifications de votre choix et cliquez sur l’icône Supprimer.
-
Cliquez sur le bouton Plus dʼactions en haut du volet Modifications pour supprimer toutes les modifications à la fois.
-
Vous pouvez également supprimer uniquement les modifications non valides, c’est-à-dire les modifications qui ont été remplacées par d’autres modifications. Par exemple, si vous modifiez la couleur d’un texte, puis que vous le supprimez, la modification de couleur devient non valide car le texte n’existe plus.
-
Vous pouvez annuler et rétablir des actions à l’aide du bouton Annuler/rétablir en haut à droite de l’écran.
Cliquez sur le bouton et maintenez-le enfoncé pour passer de l’option Annuler à l’option Rétablir, et inversement. Cliquez ensuite sur le bouton lui-même pour appliquer l’action souhaitée.
Ajouter des modifications à partir du volet dédié add-modifications
Lors de la modification d’une page à l’aide du concepteur web, vous pouvez ajouter de nouvelles modifications à votre contenu directement à partir du volet Modifications, sans avoir à sélectionner un composant et à le modifier dans l’interface du concepteur web. Suivez les étapes ci-dessous.
-
Dans le volet Modifications, cliquez sur le bouton Plus d’actions.
-
Sélectionnez Ajouter une modification.
-
Sélectionnez le type de modification :
- Sélecteur CSS - En savoir plus
- Page
<Head>- En savoir plus
-
Saisissez votre contenu et enregistrez vos modifications.
-
Cliquez sur le bouton Plus d’actions en regard de votre modification et sélectionnez Infos pour afficher ses détails.
Sélecteur CSS css-selector
Pour ajouter une modification de type Sélecteur CSS, suivez les étapes ci-dessous.
-
Sélectionnez Sélecteur CSS comme type de modification.
-
Le champ Sélecteur d’éléments CSS vous aide à rechercher et à sélectionner les éléments HTML (ou les nœuds dans l’arborescence DOM) sur lesquels vous souhaitez appliquer les modifications.
-
Sélectionnez un type d’action (Définir le contenu ou Définir l’attribut) et renseignez les informations/le contenu requis.
-
Définir le contenu : indiquez le contenu qui va dans l’élément identifié par le champ Sélecteur d’éléments CSS.
-
Définir l’attribut : indiquez un attribut à associer au sélecteur CSS actuel afin que ce sélecteur puisse ensuite être également identifié par cet attribut. Pour ce faire, saisissez un nom dans le champ Nom de l’attribut et une valeur dans le champ Contenu. Si l’attribut existe déjà, la valeur est mise à jour; dans le cas contraire, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.
-
Page <head> page-head
Vous pouvez ajouter du code personnalisé à l’aide du type de modification Page<head>.
L’élément <head> est un conteneur pour les métadonnées et est placé entre la balise <html> et la balise <body>. Dans ce cas, le code n’attend pas les événements de chargement de page ou de corps, il est exécuté au début du chargement de la page.
L’élément <head> est généralement utilisé pour ajouter du code JavaScript ou CSS en haut de la page. Les sélecteurs pour les actions visuelles suivantes dépendent des éléments HTML ajoutés dans cet onglet.
Pour ajouter une modification de type Page<head>, suivez les étapes ci-dessous.
-
Sélectionnez Page
<head>comme type de modification.
-
Ajoutez votre code personnalisé dans la zone Contenu.
note caution CAUTION Vous pouvez uniquement ajouter les éléments <script>et<style>à la section<head>. L’ajout de balises<div>et d’autres éléments risque d’entraîner l’apparition des éléments<head>restants dans la section<body>. -
Cliquez sur le bouton Options de modification avancées. L’éditeur de personnalisation s’ouvre.
Vous pouvez utiliser l’éditeur de personnalisation de Journey Optimizer et toutes ses fonctionnalités de personnalisation et de création. En savoir plus
Exemples de code personnalisé custom-code-examples
Vous pouvez utiliser le type de modification Page<head> pour :
-
Utilisez JavaScript intégré ou un lien vers un fichier JavaScript externe.
Par exemple, pour modifier la couleur d’un élément :
code language-none <script type="text/javascript"> document.getElementById("element_id").style.color = "blue"; </script> -
Configurez un style intégré ou un lien vers une feuille de style externe.
Par exemple, pour définir une classe pour un élément de recouvrement :
code language-none <style> .overlay { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; } </style>
Bonnes pratiques relatives au code personnalisé custom-code-best-practices
Par exemple :
| code language-none |
|---|
|
Si des modifications sont nécessaires, apportez des modifications dans ce conteneur.
Si vous n’avez plus besoin du code personnalisé, laissez ce conteneur vide, mais ne le supprimez pas. Cela permet de s’assurer que d’autres modifications d’expérience ne sont pas affectées.
<head>pour deux campagnes ayant un impact sur la même URL.<head> pour deux campagnes ayant un impact sur la même URL, le code JavaScript est injecté dans la page à partir des deux campagnes. Journey Optimizer détermine automatiquement l’ordre du contenu diffusé. Assurez-vous que le code ne dépend pas de l’emplacement. C’est à vous de vous assurer qu’il n’y a aucun conflit dans le code.