文件Journey OptimizerJourney Optimizer 指南

管理網頁修改 manage-web-modifications

最後更新： 2026年9月9日

建立對象：

  • 中繼
  • 初級
  • 使用者

在此頁面上：​瞭解如何檢閱、刪除和復原從[修改]窗格套用至網頁的變更，以及如何直接在Adobe Journey Optimizer中新增CSS選取器和頁面標頭修改。

style
shade-box

您可以輕鬆管理新增至網頁的所有元件、調整和樣式。 您也可以直接從專用窗格新增修改。

使用修改窗格 use-modifications-pane

  1. 選取​ 修改 ​圖示以在左側顯示對應的窗格。

  2. 您可以檢閱對頁面所做的每項變更。

  3. 選取不想要的修改，然後從​ 更多動作 ​按鈕按一下​ 刪除修改 ​選項以移除它。

    note caution
    CAUTION
    刪除動作時請務必謹慎，因為動作可能會影響後續動作。

  4. 如果您正在編寫單頁應用程式，您可以將任何修改套用至其他檢視。 了解更多

  5. 若要同時刪除多個修改，請按一下​ 修改 ​窗格上方的​ 選取 ​按鈕，檢查您選擇的修改，然後按一下​ 刪除 ​圖示。

  6. 使用​ 修改 ​窗格上方的​ 更多動作 ​按鈕，一次刪除所有修改。

  7. 您也可以僅刪除無效的修改，亦即其他變更已覆寫這些變更。 例如，如果您修改文字的顏色，然後刪除該文字，則顏色修改會變成無效，因為該文字已不存在。

  8. 您可以使用畫面右上方的​ 復原/重做 ​按鈕來取消和重做動作。

    按住按鈕以在​ 復原 ​和​ 取消復原 ​選項之間切換。 然後按一下按鈕本身，套用所需的動作。

從專用窗格新增修改 add-modifications

使用網頁設計工具編輯頁面時，您可以直接從​ 修改 ​窗格新增內容變更，而不需要從網頁設計工具介面選取元件並加以編輯。 請遵循下列步驟。

  1. 在​ 修改 ​窗格中，按一下​ 更多動作 ​按鈕。

  2. 選取​新增修改。

  3. 選取修改型別：

  4. 輸入您的內容並​ 儲存 ​您的變更。

  5. 按一下您修改旁的​ 更多動作 ​按鈕，並選取​ 資訊 ​以顯示其詳細資料。

CSS選取器 css-selector

若要新增​ CSS選取器 ​型別修改，請遵循下列步驟。

  1. 選取​ CSS選取器 ​作為修改型別。

  2. CSS元素選取器​欄位可協助您尋找並選取要套用變更的HTML元素（或DOM樹狀結構中的節點）。

  3. 選取動作型別（設定內容​或​設定屬性）並填入必要的資訊/內容。

    • 設定內容：指定進入​ CSS元素選取器 ​欄位所識別之元素的內容。

    • 設定屬性：指定要與目前CSS選取器關聯的屬性，以便這個選取器也能由這個屬性識別。 若要這麼做，請在​ 屬性名稱 ​欄位中輸入名稱，並在​ 內容 ​欄位中輸入值。 如果屬性已經存在，則會更新值；否則，會以指定的名稱和值新增屬性。

頁面 <head> page-head

您可以使用​ 頁面<head> ​修改型別來新增自訂程式碼。

<head>元素是中繼資料（資料的相關資料）的容器，並置於<html>標籤和<body>標籤之間。 在此情況下，程式碼不會等待內文或頁面載入事件，而是在頁面載入開始時執行。

<head>元素通常用於將JavaScript或CSS程式碼新增至頁面頂端。 後續視覺化動作的選取器，會根據此標籤中新增的 HTML 元素而定。

若要新增​ 頁面<head> ​型別修改，請遵循下列步驟。

  1. 選取​ 頁面<head> ​作為修改型別。

  2. 在​ 內容 ​方塊中新增您的自訂程式碼。

    note caution
    CAUTION
    您只能新增<script>和<style>專案至<head>區段。 新增<div>標籤和其他元素可能導致剩餘的<head>元素出現在<body>中。

  3. 按一下​ 進階編輯選項 ​按鈕。 個人化編輯器隨即開啟。

    您可以善用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 
<script>
// Code goes here
</script>

如果需要任何修改，請在此容器內變更。

如果不再需要自訂程式碼，只要將此容器保持空白即可，不要移除。 這可確保其他體驗修改不受影響。

請勿在自訂程式碼指令碼中執行 document.write 動作。
指令碼會非同步執行。 這通常會導致document.write動作出現在頁面上的錯誤位置。 不建議在自訂程式碼建立的指令碼中使用document.write。
如果您建立元素然後修改，請勿刪除原始元素。
每次變更都會在​ 修改 ​面板中建立新元素。 因為第二個動作會修改元素 1，如果刪除元素 1，則動作就沒有可修改的項目，變更也就失去作用。
針對影響相同URL的兩個行銷活動使用​​頁面​<head>​修改型別時，請小心。
如果您對影響相同URL的兩個行銷活動使用​ 頁面<head> ​修改型別，則JavaScript會從兩個行銷活動插入頁面。 Journey Optimizer會自動決定傳遞內容的順序。 請確定程式碼不依賴位置。 您必須確保程式碼中沒有衝突。
AI Knowledge Reference

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.
recommendation-more-help
journey-optimizer-help