文件Journey OptimizerJourney Optimizer 指南

管理網頁修改 manage-web-modifications

Last update: Thu May 23 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined
  • undefined

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

使用修改窗格 use-modifications-pane

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

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

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

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

  4. 若要同時刪除多項修改，請按一下 選取 按鈕在頂端 修改 窗格，檢查您選擇的修改內容，然後按一下 刪除 圖示。

  5. 使用 更多動作 按鈕在頂端 修改 窗格，一次刪除所有修改。

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

  7. 您可以使用取消和重做動作 還原/重做 按鈕。

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

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

使用網頁設計工具編輯頁面時，您可以直接從 修改 窗格 — 不需從Web設計工具介面選取元件並加以編輯。 請遵循下列步驟。

  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，該動作便沒有任何專案需要修改，因此變更不再有作用。
使用時要小心<><>頁面 <head><>影響相同URL之兩個行銷活動的修改型別。
如果您使用 頁面<head> 針對影響相同URL的兩個行銷活動的修改型別，JavaScript會從兩個行銷活動插入頁面。 Journey Optimizer 自動決定傳遞內容的順序。 確定程式碼不取決於放置位置。 您可以自行確定程式碼中是否有衝突。
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76