> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/cn/experience/campaign/create-new.md).

# 如何新建页面编辑体验

页面编辑，是**不动网站源码、直接在页面上改内容**的能力——改标题、换图、调顺序、加一块内容，运营和设计自己就能做完，不用等开发排期。

本节讲三件事：怎么新建一个页面编辑体验、编辑器怎么用、编辑时有哪些坑要避开。

| 想做什么                      | 看这篇                                                                |
| ------------------------- | ------------------------------------------------------------------ |
| 跟着走一遍完整流程                 | 本页 ↓                                                               |
| 编辑器各功能怎么用（文字/图片/视频/链接/事件） | [编辑器的使用方法](/cn/experience/campaign/create-new/editor-usage.md)     |
| 要写 HTML 时的注意事项            | [HTML 编辑](/cn/experience/campaign/create-new/notes-html.md)        |
| 改动没生效、选错了层级               | [选择合适的图层](/cn/experience/campaign/create-new/notes-layer.md)       |
| 新增内容时的技巧                  | [添加内容的技巧](/cn/experience/campaign/create-new/notes-add-content.md) |

***

### 如何快速上手你的第一个页面编辑 <a href="#get-started-with-page-editing" id="get-started-with-page-editing"></a>

如果位于体验列表，请选择【创建体验】。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-93e0af1889aa0235ff00fce4f4c5708e671b03d2%2Fexperience-campaign-inline-edit-create-new-1.png?alt=media" alt=""><figcaption></figcaption></figure>

点击创建【页面编辑】。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-e39bdf7dc2f5d493180357b91ab00032bf3bc00c%2Fimage%20(16).png?alt=media" alt=""><figcaption></figcaption></figure>

您可以在这里选择基于您自己的想法从原始页面开始创建，也可以从我们给出的一些场景参考开始创建。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-836203d797d04ffbd6b60b302c7f52dda400e505%2Fexperience-campaign-inline-edit-create-new-3.png?alt=media" alt=""><figcaption></figcaption></figure>

在此，您可以选择您想要进行编辑的页面，这是您用于编辑的页面，如果您的修改想要在多个页面生效，您可以在后面的设置中进行设置。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-21f575be7dc8be8aa575922ef2b5e3ffb09c5748%2Fexperience-campaign-inline-edit-create-new-4.png?alt=media" alt=""><figcaption></figcaption></figure>

### 制作内容 <a href="#create-content" id="create-content"></a>

**编辑页面内容**

* 您可以点击选中页面的任意元素来进行编辑。
* 通过工具条进行文字编辑、图片更换、CTA文案编辑、链接替换、元素样式编辑。
* 对于需要交互才能出现的内容，例如tab切换或下拉框等等，可以通过右上角的【交互模式】来进行操作。
* 右上角的代码模式可以支持更多自定义CSS或JS。

**设备同步**

您可以点击智能手机编辑器顶部的【与PC同步】，将PC画布上的变更快速复制过来。 如果希望在不同设备上修改的内容略有不同，您也可以在两个设备下分别进行编辑。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-1811f486640feeecf8642ec982ddf32260f595b0%2Fimage%20(21).png?alt=media" alt=""><figcaption></figcaption></figure>

### 预览与发布 <a href="#preview-and-publish" id="preview-and-publish"></a>

点击【预览】可以查看页面编辑成品的样子。 完成全部设计后，点击【保存】。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-51c1067c694a41966f79ac1ffc012ed9b2a6a63a%2Fexperience-campaign-inline-edit-create-new-6.png?alt=media" alt=""><figcaption></figcaption></figure>

### 设置页面修改后的触发条件 <a href="#set-display-conditions" id="set-display-conditions"></a>

**设置修改生效的页面**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-5afa1be4783f9ab1b9ee11cf2eee138e7a5ed202%2Fexperience-create-new-01.png?alt=media)

您可以在此界面来指定修改展示的页面范围。对于页面编辑，默认状态下紧展示在您编辑的页面上，但如果您修改的内容会在多个页面展示，例如网站导航，或是所有商品页面都有的加购按钮等等，您也可以通过包含、不包含、头匹配、尾匹配、完全匹配、正则表达式几种方式来匹配您想要展示的页面。

**设置触达人群**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-b14ea93fb701f819ebb9d92b788ce65189ac99c1%2Fexperience-create-new-02.png?alt=media)

您可以根据特定的用户来展示修改或添加的内容，以提供最佳的体验。您可以根据以下几个角度来进行用户的筛选：

* 用户行为：根据用户是否访问过关键页面（如购买成功后的感谢页面URL）、是否完成过某个关键行为、以及来访次数来进行筛选。
* 访问属性：根据用户访问的来源、广告信息、地区、设备等属性来进行筛选。
* 用户标签：根据用户的标签属性如Email、年龄、喜好、会员等级等标签来进行筛选。这个需要您进行用户识别码的埋点，即可将用户信息发送给我们，了解[Identify埋点](/cn/experience/setting/user-id-tag-setup.md)。

**设置目标**

![](https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-872d08e285c2f8604c84cb5e646bf6b95a55a635%2Fexperience-create-new-03.png?alt=media)

基于修改页面内容的主要目的，在此设置修改目标，以评估效果。常见的目标有购买完成、预约完成、下载资料等等，目标的设置可以根据页面的访问（如购买或预约成功的感谢页面），或者发生关键事件行为来进行设置。

**页面修改定时或预约**

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-728b9cc47e763d09eeb743dd4d2151eada3f4d2a%2Fexperience-campaign-inline-edit-create-new-7.png?alt=media" alt=""><figcaption></figcaption></figure>

当您的页面修改涉及计划的某个活动时，您可以选择提前修改好您的页面，并在此预约在活动开始时自动发布到线上。另外您还可以根据活动时长来设置自动停止发布的时间点，并可以根据一周中的周期或时间来进行修改的展示。

**发布页面修改**

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-66034e747f0faf232653731d8e1d31193139f757%2Fexperience-campaign-inline-edit-create-new-8.png?alt=media" alt=""><figcaption></figcaption></figure>

完成全部设置后，在”发布“部分勾选确认，并点击【立刻发布】按钮，即可完成发布。

### 查看数据与持续改善 <a href="#review-data-and-improve" id="review-data-and-improve"></a>

**查看页面修改数据表现**

发布后，Ptengine将为您持续收集数据，您可以在报告中了解有多少人被展示了修改、有多少人达成了您设定的目标，以及被展示的人群的停留时长、访问的页面数以及访问跳出率。

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-345801908531bb236f648b1e1d68b03e7540aa96%2Fexperience-campaign-inline-edit-create-new-9.png?alt=media" alt=""><figcaption></figcaption></figure>

**基于细分查看数据表现**

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-c81e537dc70151ec580872bb780f7f3d611571fb%2Fexperience-campaign-inline-edit-create-new-10.png?alt=media" alt=""><figcaption></figcaption></figure>

您可以根据设备、来源、广告信息、地域、用户标签等来进行细分查看不同的用户的数据表现，从而发现哪类用户对您的修改有着更高的目标达成率。

**热图查看修改后用户的行为**

<figure><img src="https://2044586328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnucbKsG9WGIoxCpzyoHL%2Fuploads%2Fgit-blob-310c302f24317d0d0c3954e6ed5639293fb13994%2Fexperience-campaign-inline-edit-create-new-11.png?alt=media" alt=""><figcaption></figcaption></figure>

通过热图，您还可以进一步查看用户在修改后页面的浏览、点击、注意力等行为。

***

## 注意事项 <a href="#notes" id="notes"></a>

* 页面加载时套用改动，可能出现瞬间闪烁——处理方法见 [闪烁现象及应对方法](/cn/faq/experience-edit/anti-flicker.md)
* 网站改版后，原本选中的元素可能找不到，体验会失灵。改版后请复查已发布的体验
* 发布了但页面上看不到，参考 [体验无法正常显示](/cn/faq/experience-edit/campaign-not-displaying.md)
