管理 Web 修改 manage-web-modifications

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

使用修改窗格 use-modifications-pane

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

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

  3. 选择不需要的修改,然后单击 删除修改 选项来自 更多操作 按钮将其删除。

    note caution
    CAUTION
    在删除操作时请务必谨慎,因为此操作可能影响后续操作。
  4. 要同时删除多个修改,请单击 选择 按钮位于顶部 修改 窗格,检查您选择的修改内容,然后单击 删除 图标。

  5. 使用 更多操作 按钮位于顶部 修改 窗格,以便一次删除所有修改。

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

  7. 您可以使用取消和重做操作 撤消/重做 按钮。

    单击并按住按钮以在 还原重做 选项。 然后,单击按钮本身以应用所需的操作。

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

使用Web设计器编辑页面时,可以直接从 修改 窗格 — 无需从Web设计器界面中选择组件并进行编辑。 请按照以下步骤操作。

  1. 修改 窗格,单击 更多操作 按钮。

  2. 选择 添加修改.

  3. 选择修改类型:

  4. 输入您的内容并 保存 您所做的更改。

  5. 单击 更多操作 按钮进行修改,然后选择 信息 以显示其详细信息。

CSS选择器 css-selector

添加 CSS选择器 键入modification ,请按照以下步骤操作。

  1. 选择 CSS选择器 作为修改类型。

  2. CSS元素选择器 字段可以帮助您查找和选择要应用更改的HTML元素(或DOM树中的节点)。

  3. 选择操作类型(设置内容设置属性)并填写所需的信息/内容。

    • 设置内容:指定进入由标识的元素中的内容 CSS元素选择器 字段。

    • 设置属性:指定要与当前CSS选择器关联的属性,以便该选择器能够也由此属性进行标识。 要执行此操作,请在 属性名称 字段和中的值 内容 字段。 如果属性已存在,则更新值;否则,将添加具有指定名称和值的新属性。

页面 <head> page-head

您可以使用添加自定义代码 页面<head> 修改类型。

<head> 元素是元数据(有关数据的数据)的容器,它放置在 <html> 标记和 <body> 标记之前。 在这种情况下,代码不会等待主体或页面加载事件,而是在页面加载开始时执行。

<head> 元素通常用于将JavaScript或CSS代码添加到页面顶部。 适用于后续可视化操作的选择器取决于此选项卡中添加的 HTML 元素。

添加 页面<head> 键入modification ,请按照以下步骤操作。

  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>
    
  • 配置指向外部样式表的内联样式或链接。

    例如,要为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,则该操作将没有任何可修改的内容,因此更改不再有效。
使用时要小心<><>页面 <head><>影响同一URL的两个营销活动的修改类型。
如果您使用 页面<head> 修改类型对于影响同一URL的两个营销活动,JavaScript会从这两个营销活动注入页面。 Journey Optimizer 自动确定已交付内容的顺序。 确保代码与放置无关。 由您来确保代码中没有冲突。
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76