> 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-1.md).

# 弹窗创建方法

## 弹窗制作 <a href="#tan-chuang-zhi-zuo" id="tan-chuang-zhi-zuo"></a>

弹窗或悬浮条是吸引用户转化、防止用户离开、进行站内引导、收集用户信息的常见方式，通过Ptengine您可以像制作PPT一样通过拖拖拽拽的方式便可以制作出适合您网站的弹窗或悬浮条。不仅如此，您还可以根据需要展示的弹窗时机、需要触达的人群进行方便配置。Ptengine会为您持续收集弹窗表现数据，您可以了解有多少人与弹窗互动过、多少人达成了转化目标，您还可以了解这些用户的特征，以及他们的热图上呈现了什么行为。

### 如何快速制作你的第一个弹窗 <a href="#ru-he-kuai-su-zhi-zuo-ni-de-di-yi-ge-tan-chuang" id="ru-he-kuai-su-zhi-zuo-ni-de-di-yi-ge-tan-chuang"></a>

在创建体验时选择创建【弹窗】，可以在这里选择从空白开始创建、从特定布局创建、或者从内容更丰富的模板开始创建。![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/page/1.png)![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/2.png)

你可以使用所见即所得的编辑器，像摆放PPT一样设计你的弹窗内容。

### 编辑弹窗 <a href="#bian-ji-tan-chuang" id="bian-ji-tan-chuang"></a>

**编辑本体**

* ![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/4.png)

点击画布空白位置，会出现弹窗的设置工具条，点击可调整弹窗位置、大小、背景等。

**添加元素**

* ![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/3.png)

从左侧边栏可以添加文字、图片、视频、按钮、素材、表单、倒计时这些各类元素。

**编辑元素**

* ![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/5.png)

中央的画布区域，在选中元素后可以自由拖拽移动位置，或点击后选择工具条选项，可调整内容、样式及点击动作。

**设备同步**

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

![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/page/8.png)

右上角的**代码模式**可以支持更多自定义CSS或JS

**预览与发布**

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

![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/page/9.png)

### 设置弹窗的触发时机 <a href="#she-zhi-tan-chuang-de-chu-fa-shi-ji" id="she-zhi-tan-chuang-de-chu-fa-shi-ji"></a>

![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/4-1.png)

一个好的弹窗应该在最适当的时机展示给用户，在设置界面，您可以选择不同的触发时机，例如当用户打算离开时、在页面中停留了一段时间、浏览到了页面的某个位置，或者停止活跃一段时间后，再为用户触发对应的弹窗。![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/4-2.png)

另一方面，您也需要注意设置停止展示的时机，以免给客户造成过多打扰，当用户与您的弹窗产生一定交互或看过足够次数之后，就可以选择不再继续给客户展示。展示频率的设置也是为了避免给客户过多打扰，来设定同样的弹窗在一定时间内不会重复给用户展示。

### 设置弹窗的展示页面 <a href="#she-zhi-tan-chuang-de-zhan-shi-ye-mian" id="she-zhi-tan-chuang-de-zhan-shi-ye-mian"></a>

![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/page/1-1.png)

您可以在此界面来指定弹窗展示的范围。对于弹窗，默认为整站所有页面进行展示，但您也可以选择在特定的一些页面进行展示。您可以通过包含、不包含、头匹配、尾匹配、完全匹配、正则表达式几种方式来匹配您想要展示的页面。

![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/page/1-2.png)

您可以针对特定的用户来触达弹窗以提供最佳的体验。您可以根据以下几个角度来进行用户的筛选：

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

### **发布弹窗** <a href="#fa-bu-tan-chuang" id="fa-bu-tan-chuang"></a>

![](https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/page/1-5.png)

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

### 如何查看体验报告 <a href="#ru-he-cha-kan-ti-yan-bao-gao" id="ru-he-cha-kan-ti-yan-bao-gao"></a>

<figure><img src="https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/3-1.png" alt=""><figcaption></figcaption></figure>

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

**基于细分查看弹窗表现**

<figure><img src="https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/page/2-2.png" alt=""><figcaption></figcaption></figure>

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

**热图查看弹窗触达用户的行为**

<figure><img src="https://help-ptengine-com-vitepress.oss-cn-guangzhou.aliyuncs.com/doc/Experience/popup/3-3.png" alt=""><figcaption></figcaption></figure>

通过热图，您还可以进一步查看被弹窗触达的用户在当前页面，或弹窗下游页面的行为表现。
