文档Journey OptimizerJourney Optimizer 指南

管理 Web 修改 manage-web-modifications

Last update: Wed Oct 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

您可以轻松管理添加到网页的所有组件、调整和样式。 您还可以直接从专用窗格添加修改。

使用修改窗格 use-modifications-pane

  1. 选择​ 修改 ​图标以在左侧显示相应的窗格。

  2. 您可以查看对页面所做的每项更改。

  3. 选择一个不需要的修改，然后单击​ 更多操作 ​按钮中的​ 删除修改 ​选项以将其删除。

    note caution
    CAUTION
    删除操作时请小心，因为此操作可能会影响后续操作。

  4. 如果您正在创作单页应用程序，则可以将任何修改应用于其他视图。 了解详情

  5. 要同时删除多个修改，请单击​ 修改 ​窗格顶部的​ 选择 ​按钮，检查您选择的修改，然后单击​ 删除 ​图标。

  6. 使用“修改”窗格顶部的“更多操作”按钮一次删除所有修改。

  7. 您也可以仅删除无效的修改，即被其他更改覆盖的更改。 例如，如果修改文本的颜色，然后删除该文本，则颜色修改将变得无效，因为该文本已不存在。

  8. 您可以使用屏幕右上角的​ 撤消/重做 ​按钮取消和重做操作。

    单击并按住按钮可在​ 撤消 ​和​ 重做 ​选项之间切换。 然后，单击按钮本身以应用所需的操作。

从专用窗格中添加修改 add-modifications

使用Web设计器编辑页面时，您可以直接从​ 修改 ​窗格向内容添加新的更改，而无需选择组件并从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. 在​ Content ​框中添加您的自定义代码。

    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>

  • 配置指向外部样式表的内联样式或链接。

    例如，要为overlay元素定义类：

    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。
如果您创建了一个元素，然后对其进行了修改，请不要删除原始元素。
每次更改都会在​ 修改 ​面板中创建一个新元素。 因为第2个操作修改了Element 1，如果删除Element 1，则该操作将没有任何可修改的内容，因此更改不再有效。
对于影响同一URL的两个营销活动使用<><>页面<><head><>修改类型时，请务必小心。
如果您对两个影响同一URL的营销活动使用​ 页面<head> ​修改类型，则JavaScript会从这两个营销活动注入到页面中。 Journey Optimizer自动确定所交付内容的顺序。 确保代码不依赖于位置。 由您来确保代码中没有冲突。
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76