在此页面上：了解如何查看、删除和撤消从“修改”窗格应用于网页的更改，以及如何直接在Adobe Journey Optimizer中添加CSS选择器和页头修改。
您可以轻松管理添加到网页的所有组件、调整和样式。 您还可以直接从专用窗格添加修改。
使用修改窗格 use-modifications-pane
-
选择 修改 图标以在左侧显示相应的窗格。
-
您可以查看对页面所做的每项更改。
-
选择一个不需要的修改，然后单击 更多操作 按钮中的 删除修改 选项以将其删除。
note caution CAUTION 在删除操作时请务必谨慎，因为此操作可能影响后续操作。 -
要同时删除多个修改，请单击 修改 窗格顶部的 选择 按钮，检查您选择的修改，然后单击 删除 图标。
-
使用 修改 窗格顶部的 更多操作 按钮一次删除所有修改。
-
您还可以仅删除无效的修改，即由其他更改覆盖的更改。 例如，如果修改文本的颜色，然后删除该文本，则颜色修改将变得无效，因为该文本已不存在。
-
您可以使用屏幕右上角的 撤消/重做 按钮取消和重做操作。
单击并按住按钮可在 撤消 和 重做 选项之间切换。 然后，单击按钮本身以应用所需的操作。
从专用窗格中添加修改 add-modifications
使用Web设计器编辑页面时，您可以直接从 修改 窗格向内容添加新更改，而无需从Web设计器界面中选择组件并进行编辑。 请按照以下步骤操作。
CSS选择器 css-selector
要添加 CSS选择器 类型修改，请执行以下步骤。
-
选择 CSS选择器 作为修改类型。
-
CSS元素选择器字段可帮助您查找和选择要应用更改的HTML元素（或DOM树中的节点）。
-
选择操作类型（设置内容或设置属性）并填写所需信息/内容。
-
设置内容：指定进入 CSS元素选择器 字段标识的元素的内容。
-
设置属性：指定要与当前CSS选择器关联的属性，以便该选择器也可以由此属性标识。 为此，请在 属性名称 字段中输入名称，并在 内容 字段中输入值。 如果属性已存在，则更新值；否则，将添加具有指定名称和值的新属性。
-
页面 <head> page-head
您可以使用 页面<head> 修改类型添加自定义代码。
<head>元素是元数据（有关数据的数据）的容器，它位于<html>标记和<body>标记之间。 在这种情况下，代码不会等待主体或页面加载事件，而是在页面加载开始时执行。
<head>元素通常用于将JavaScript或CSS代码添加到页面顶部。 适用于后续可视化操作的选择器取决于此选项卡中添加的 HTML 元素。
要添加 页面<head> 类型修改，请执行以下步骤。
-
选择 页面
<head>作为修改类型。
-
在 Content 框中添加您的自定义代码。
note caution CAUTION 您只能将 <script>和<style>元素添加到<head>部分。 添加<div>标记和其他元素可能会导致其余的<head>元素出现在<body>中。 -
单击 高级编辑选项 按钮。 个性化编辑器将打开。
您可以利用Journey Optimizer个性化编辑器及其所有个性化和创作功能。 了解详情
自定义代码示例 custom-code-examples
您可以使用 页面<head> 修改类型来：
-
使用JavaScript内联或链接到外部JavaScript文件。
例如，要更改元素的颜色：
code language-none <script type="text/javascript"> document.getElementById("element_id").style.color = "blue"; </script> -
配置指向外部样式表的内联样式或链接。
例如，要为叠加元素定义一个类：
code language-none <style> .overlay { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; } </style>
自定义代码最佳实践 custom-code-best-practices
例如：
| code language-none |
|---|
|
如果需要进行任何修改，在此容器内更改即可。
如果您不再需要该自定义代码，则只需将此容器保留为空，而不需要将其移除。 这可确保其他体验修改不受影响。
<head>修改类型时，请务必小心。<head> 修改类型，则JavaScript会从这两个营销活动注入到页面中。 Journey Optimizer自动确定已交付内容的顺序。 请确保代码不依赖于位置。 您需要确保代码中没有冲突。This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to review, delete, and undo changes applied to a web page from the Modifications pane, and how to add CSS selector and page head modifications directly in Journey Optimizer.
Intents:
- Review the changes made to a page from the Modifications pane
- Delete a single modification, multiple modifications, all modifications, or only invalid modifications
- Undo and redo actions using the Undo/Redo button
- Add a modification directly from the pane as a CSS Selector or Page
<head>type - Configure a CSS Selector modification with a Set Content or Set Attribute action
- Add custom JavaScript or CSS code through a Page
<head>modification
Glossary:
- Modifications pane: The pane used to navigate through and manage all components, adjustments, and styles added to a web page, and to add new modifications (product-specific)
- Invalid modifications: Changes that were overridden by other changes, for example a color modification whose target text was later deleted (product-specific)
- CSS Selector modification: A modification type that uses the CSS Element Selector field to identify HTML elements (DOM nodes) and apply a Set Content or Set Attribute action (product-specific)
- Page
<head>modification: A modification type for adding custom code to the<head>container, executed at the beginning of page load (product-specific) - Set Content: A CSS Selector action that specifies the content placed into the element identified by the CSS Element Selector (product-specific)
- Set Attribute: A CSS Selector action that associates an attribute (name and value) with the current CSS selector; an existing attribute’s value is updated, otherwise a new attribute is added (product-specific)
Guardrails:
- Proceed with care when deleting an action, as it may impact subsequent actions.
- You can only add
<script>and<style>elements to the<head>section; adding<div>tags and other elements might cause remaining<head>elements to pop into the<body>. - Do not perform document.write actions in custom code scripts, as scripts are executed asynchronously and this often causes document.write to appear in the wrong place.
- If you create an element and then modify it, do not delete the original element, because the modifying action would no longer have anything to modify and would stop working.
- If you use the Page
<head>modification type for two campaigns impacting the same URL, JavaScript is injected from both campaigns and Journey Optimizer automatically determines the order; make sure the code does not depend on placement and has no conflicts. - Always wrap custom code in one element; if the code is no longer needed, leave the container empty but do not remove it.
Terminology:
- Canonical name: Modifications pane — Acronym: n/a — variants: Modifications panel
- Synonyms: “CSS Element Selector” = “CSS selector field used to find and select HTML elements”
- Do not confuse: “Set Content” (specifies content placed into the selected element) ≠ “Set Attribute” (associates an attribute name and value with the CSS selector)
- Do not confuse: “Delete modification” (removes one modification) ≠ “Undo” (cancels an action, reversible with Redo)
- Do not confuse: “invalid modifications” (changes overridden by other changes) ≠ modifications you intentionally delete
FAQ:
- Q: How do I delete all modifications at once? — Use the More actions button on top of the Modifications pane to delete all modifications at once.
- Q: What are invalid modifications? — Changes that were overridden by other changes, such as a color modification whose target text was later deleted; you can delete only the invalid modifications.
- Q: What can I add in a Page
<head>modification? — Only<script>and<style>elements; adding<div>tags and other elements might cause remaining<head>elements to pop into the<body>. - Q: What is the difference between Set Content and Set Attribute? — Set Content specifies the content placed into the element identified by the CSS Element Selector; Set Attribute associates an attribute name and value with the CSS selector, updating it if it already exists.
- Q: Can I undo changes? — Yes, use the Undo/Redo button on the top right; click and hold to switch between Undo and Redo, then click to apply.