# 创建弹窗

进入**用户运营**模块，在顶部导航栏选择**运营**。

当前支持配置以下应用的弹窗：

{% tabs %}
{% tab title="网站" %}

### 新建弹窗

&#x20;单击界面左上角的**新建**，选择**弹窗**，再选择**网站**。

### 用户选择

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyX5k7n475T9-6u7_8q%2F-LyYUx84ZpFyFfIDc-56%2Fweb1.png?alt=media\&token=a3df50a8-e121-4ddd-a360-f8a3766cfdff)

选择要发送弹窗的目标用户。可使用创建好的用户分群。

{% hint style="success" %}
**用户分群**

* 直接选择之前创建过的分群（创建好的用户分群每天凌晨会按照条件跑一遍分群数据），这种方式会有T+1的延时）用户次日访问App时会判断该用户是否在某个分群中，满足条件弹出。
* 但如果选择四种预定义分群：全部登录用户，全部访问用户，新登录用户，新访问用户，在弹窗SDK中是实时判断的。比如选择新登录用户，那么每个打开App的用户，弹窗 SDK 都会实时判断该用户是否为新登陆的用户。
  {% endhint %}

### 触发设置

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyX5k7n475T9-6u7_8q%2F-LyYV0HP6VOA6zhpPhHV%2Fweb2.png?alt=media\&token=93859932-2315-4e8e-a1b0-030bb04bdb51)

| 参数   | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 触发页面 | <p>是指，当用户到达哪个/些页面的时候，弹出弹窗。添加多个条件时，意味着用户只要到达其中任意一个页面，都会弹出弹窗。</p><p>比如，</p><ul><li>支持<strong>特定页面</strong>：你想在用户到达 [www.growingio.com](http://www.growingio.com) 页面时发送弹窗，就可以将这个页面 [www.growingio.com](http://www.growingio.com) 输入进去。</li><li>支持<strong>页面组通配符</strong>：如果你想在用户到达 [www.growingio.com](http://www.growingio.com) 域名下所有页面时发送弹窗，可以输入 [www.growingio.com\*。暂不支持](http://www.growingio.com*。暂不支持) \*.growingio.com与的形式。</li><li>支持<strong>url参数通配符</strong>：比如www\.growingio.com?key1=a\&key2=\*匹配所有参数带key1=a与key2的情况。或www\.growingio.com?key1=\*匹配所有参数带key1的情况。</li><li>暂不支持 *.growingio.com，[www.growingio.com?key=a](http://www.growingio.com?key=a)*&#x4E0E;www\.growingio.com?\*的写法。</li><li>支持<strong>多个页面组合</strong>：你想在用户到达 [www.growingio.com/1](http://www.growingio.com/1) 和 [www.growingio.com/2](http://www.growingio.com/2) 时触发，可以通过<strong>增加URL</strong>按钮输入两个URL。</li><li>暂不支持匹配#后面的hash值</li></ul> |
| 触发时机 | <p></p><p>就是用户会在什么时间看到这个弹窗？</p><p>默认触发时机为「<strong>页面打开</strong>」时，也可以选择其他事件作为触发时机。</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| 延迟设置 | 设置弹窗在满足触发条件后的延迟弹出时间。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| 触发次数 | <p>弹窗的触发频率可以设置为只触发 1 次，或是多次。</p><p>如果设置多次触发，需要定义触发次数上限，以及每次的间隔时间。</p><p>只要用户没有点击查看弹窗或者关闭弹窗，且触发次数没有达到上限就会再次触发。</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

埋点事件如何创建请参见：数据定义 > [埋点事件及事件级变量](https://docs.growingio.com/v3/introduction/data-definition/ustom-event/event)。

### 弹窗样式

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyX5k7n475T9-6u7_8q%2F-LyYV94c6PWUSFtBTiCy%2Fweb3.png?alt=media\&token=359b1424-303b-490f-af75-fbf4f6d37aef)

| 参数   | 说明                                                                                                                       |
| ---- | ------------------------------------------------------------------------------------------------------------------------ |
| 图片上传 | 上传您要在Web页面弹窗展示的图片，大小不得超过500KB。上传您可以在图片上传区域选填标题和部分文本内容及修改按钮文本。上传的图片会根据弹窗位置进行高度自适应。                                        |
| 弹窗位置 | <p>屏幕居中：宽度500px，位置为屏幕中间的弹窗，将会中止用户当前的操作，适用于比较重的提示。</p><p>屏幕左小角/屏幕右下角：宽度344px，适用于轻轻的提醒，用户仍然可以继续操作，当用户翻页刷新或对弹窗进行操作。</p>     |
| 转跳配置 | <p>转跳按钮：</p><ul><li>转跳按钮：设置转跳链接，用户单击按钮时会进行转跳。</li><li>复制按钮：设置文本内容，用户单击按钮时会复制文档。</li></ul><p>图片转跳：设置转跳链接，用户单击图片时进行转跳。</p> |

### 测试和上线

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyX5k7n475T9-6u7_8q%2F-LyYVFhHNQJzjE70rsZv%2Fweb4.png?alt=media\&token=cedc8c0f-ca4e-4c63-a873-dba9cbdb0fd5)

配置完以上步骤后，单击保存即可进行测试和上线。

| 参数           | 说明                          |
| ------------ | --------------------------- |
| 测试效果         | 单击测试效果右侧的查看，会转跳到弹窗页面展示弹窗效果。 |
| 上线时间配置       | <p></p><p>您可以配置弹窗上下线时间。</p> |
| {% endtab %} |                             |

{% tab title="移动应用" %}
{% hint style="info" %}
本页内容不包含添加分群/控制组对比、添加素材对比、添加活动对比的配置，相关配置请参考[A/B测试](https://growingio.gitbook.io/mp/product-manual/popup/ab-experiment)。
{% endhint %}

### 新建弹窗

单击界面左上角的**新建**，选择**弹窗**，再选择**移动应用**。

### 用户选择

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LxzED8cIh22cNiQlPoq%2F-LxzEdxPNZp9sXvk8emB%2F%E5%88%86%E7%BE%A4%E5%8F%8A%E5%B1%9E%E6%80%A7x2.png?alt=media\&token=0c481c78-1071-4800-a6d8-0e57a1ecf138)

选择要发送弹窗的目标用户。可使用创建好的**用户分群**来筛选用户。您可以在分群的基础上添加用户属性，属性为 SDK 实时判断。

{% hint style="success" %}
**用户分群**

* 直接选择之前创建过的分群（创建好的用户分群每天凌晨会按照条件跑一遍分群数据，这种方式会有T+1的延时）用户次日访问App时会判断该用户是否在某个分群中，满足条件弹出。
* 但如果选择四种预定义分群：全部登录用户，全部访问用户，新登录用户，新访问用户，在弹窗 SDK 中是实时判断的。比如选择新登录用户，那么每个打开App的用户，弹窗 SDK 都会实时判断该用户是否为新登录的用户。
  {% endhint %}

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LxzED8cIh22cNiQlPoq%2F-LxzGAsWCiEfiwLLsxM4%2F%E6%88%96%E4%B8%94%E4%BA%8B%E4%BB%B6.png?alt=media\&token=bad8b70d-b798-412f-a64d-39a2d261d1cb)

并且属性条件支持且、或等复杂的逻辑连接。

### **产品选择**

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LxzED8cIh22cNiQlPoq%2F-LxzKIXDQauonJDRzlK2%2F%E4%BA%A7%E5%93%81%E9%80%89%E6%8B%A9.png?alt=media\&token=8724e0fe-7483-4d17-be50-8b09d9f91514)

您可以最多选择一个 Android 端和一个 iOS 端 App。

### 触发&素材

* **触发时机**

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LxzED8cIh22cNiQlPoq%2F-LxzMtMd4bJa_mIMGusF%2F%E8%A7%A6%E5%8F%91%E6%97%B6%E6%9C%BA.png?alt=media\&token=3513e835-f4dc-49c9-ba3e-97f342e06ac8)

就是用户会在什么时间看到这个弹窗？默认触发时机为「**打开App时**」，也可以选择其他事件作为触发时机。

并且，我们能够实现精准的控制某个事件发生第 N 次后再触发弹窗。如：支付成功 5 次以上、收藏商品超过 3 次等。

{% hint style="info" %}
如果运营人员选择了 「**打开App时**」 弹出。 需要注意：如果您的 App 包含闪屏页面，那么代码层面需要做特殊处理。因为 SDK 并不能判断闪屏什么时候结束。 为了避免在闪屏页面出现弹窗，有两种处理方法：

处理方法1：

* 在需要弹出的页面埋点，运营人员在下拉框中选择相应的埋点事件作为触发时机。这种方法可以精准的控制弹出时机。

处理方法2：

* 在 App onCreate 的时候设置关闭弹窗。使用 GrowingTouch.startWithConfig(this, new GTouchConfig() .setEventPopupEnable(false)&#x20;
* 然后再在首页MainActivity中调用 enableEventPopupAndGenerateAppOpenEvent 或者setEventPopupEnable(true)
  {% endhint %}

埋点事件如何创建请参见：数据定义 > [埋点事件及事件级变量](https://docs.growingio.com/v3/introduction/data-definition/ustom-event/event)。

* **触发次数**

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LxzED8cIh22cNiQlPoq%2F-LxzNxzHffzWfngYgVt4%2F%E8%A7%A6%E5%8F%91%E6%AC%A1%E6%95%B0.png?alt=media\&token=ea26d3c5-bb6c-43bb-afb0-8b652cd85312)

弹窗的触发频率可以设置为只触发 1 次，或是多次。

如果设置多次触发，需要定义触发次数上限，以及每次的间隔时间。

{% hint style="info" %}
**触发说明**

只要用户没有点击查看弹窗或者关闭弹窗，且触发次数没有达到上限就会再次触发。
{% endhint %}

* **图片素材**

上传不超过500KB大小的背景图片素材，如果有需要可以使用 [tinypng](https://tinypng.com/) 等在线网站进行压缩，或者让设计师直接做出这个大小的图片。

{% hint style="success" %}
素材建议大小：

iPhone8 的屏幕宽度是375px。所以弹窗素材宽度在300px至330px左右，高度250px至600px左右，都是合适大小。GIO 弹窗不会拉伸用户上传的图片，会保证原始比例。为保证清晰度，请导出@2x或@3x的图片。
{% endhint %}

GIO 弹窗支持带有透明度的 PNG 格式图片，所以可以做任何形状，不一定要拘泥于矩形。

实践经验表明，弹窗做的越好看，愿意点击的用户越多哦！

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LqtkXYV2ww5lQwQ8VTS%2F-LqtnNUlesKwZiafcN55%2Ftips.png?alt=media\&token=e7c2af3b-1340-48a7-a057-f570cd4e5815)

* **转跳页面**

用户点击弹窗后，跳转到哪个页面呢？

| 类型      | 说明                                                                                                             |
| ------- | -------------------------------------------------------------------------------------------------------------- |
| App原生页  | <p></p><p>原生页面跳转链接是的格式为 <code>classname?key1=value1\&key2=value2</code>，请与开发同学确认（前面不需要加协议名，GIO会默认加上自己的协议头）</p> |
| H5页面    | 加上 http\:// 或 https\:// 开头                                                                                     |
| 自定义协议   | 任何您自己的协议头都可以（推荐这种方式，更灵活）                                                                                       |
| 推送权限设置页 | 弹窗支持跳转到系统设置页, 使用上选择访问用户分群，属性推送设置关，即可默认选择推送权限设置页，（SDK需要同时集成弹窗和推送）                                               |
| 不填写     | 则默认作为展示用，点击后关闭弹窗                                                                                               |

**推送权限设置页面**（SDK需要同时集成弹窗和推送）

如果想让您的用户打开手机的推送权限设置页面，您可以选择上线一条「推送权限设置页」弹窗，注意需要先在分群里选择访问用户属性：「推送权限设置」=「关」。![](https://gblobscdn.gitbook.com/assets%2F-Lpwgem-x8KzhBglybzw%2F-M2gqjMXDBle1spfUDLE%2F-M2h-e5i7Dinv1tcM1aI%2Fimage.png?alt=media\&token=32ece065-ce58-4c49-a5d7-a444e3089e15)![](https://gblobscdn.gitbook.com/assets%2F-Lpwgem-x8KzhBglybzw%2F-M8P_OqigWHMQPLuv1Df%2F-M8P_mvLj5L687JBLXgq%2Fimage.png?alt=media\&token=996765a8-6c16-41ee-bb8d-8bc6d1fa8d2c)

### 测试和上线

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-Lx-wX7IW3GZHTBC0EXK%2F-Lx0dVCofKvdFGfYBWQA%2Fimage.png?alt=media\&token=606cfce3-4b2a-4aef-bfd8-3f3fc41eac50)

配置完上述步骤后，单击保存即可进行测试和上线。

**扫码测试**：选择需要测试的 App ，使用包含有 **安装了弹窗 SDK 的 App** 的设备进行扫码唤醒 App ，进行测试。为了更方便的供测试者查看弹窗效果，不管扫码的设备是否在分群中，都会在相应的时机弹出弹窗。

**上线时间配置：**&#x60A8;可以配置弹窗上下线时间。
{% endtab %}

{% tab title="小程序" %}

### 新建弹窗

单击界面左上角的**新建**，选择**弹窗**，再选择**小程序**。

### 用户&产品选择

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyYVReJdgrtXjIsrDG_%2F-LyYYc6n8BIKMvFVPc94%2F%E5%B0%8F%E7%A8%8B%E5%BA%8F1.png?alt=media\&token=054fc26b-f00f-4716-97d3-7cad93e7119d)

选择要发送弹窗的目标用户。可使用创建好的用户分群。

* **用户分群**

直接选择之前创建过的分群（创建好的用户分群每天凌晨会按照条件跑一遍分群数据），这种方式会有T+1的延 时）用户次日访问App时会判断该用户是否在某个分群中，满足条件弹出。

但如果选择四种预定义分群：全部登录用户，全部访问用户，新登录用户，新访问用户，在触达中是实时判断的。比如选择新登录用户，那么每个打开App的用户，触达 SDK 都会实时判断该用户是否为新登陆的用户。

* **产品选择**

您可以最多选择一个 微信小程序。

### 触发和素材

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyYYvZYgX_nHkK1YPpr%2F-LyYZ-0H2CQp1KgHfHUo%2F%E5%B0%8F%E7%A8%8B%E5%BA%8F2.png?alt=media\&token=2f1f693b-8147-496c-bfc0-0899689bce3c)

* **触发时机**

就是用户会在什么时间看到这个弹窗？

默认触发时机为「**打开App时**」(小程序每个页面的访问，都算一次打开APP)，也可以选择其他事件作为触发时机。

埋点事件如何创建请参见：数据定义 > [埋点事件及事件级变量](https://docs.growingio.com/v3/introduction/data-definition/ustom-event/event)。

* **触发次数**

弹窗的触发频率可以设置为只触发 1 次，或是多次。

如果设置多次触发，需要定义触发次数上限，以及每次的间隔时间。

{% hint style="info" %}
**触发说明**

只要用户没有点击查看弹窗或者关闭弹窗，且触发次数没有达到上限就会再次触发。
{% endhint %}

* **图片素材**

上传不超过500KB大小的背景图片素材（允许包含透明度）

{% hint style="success" %}
图片处理建议

如果有需要可以使用 [tinypng](https://tinypng.com/) 等在线网站进行压缩，或者让设计师直接做出这个大小的图片。
{% endhint %}

* **点击转跳页面**

设置点击该弹窗会转跳的页面，可以为空。

### 测试和上线

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyYYvZYgX_nHkK1YPpr%2F-LyYZZK0u2OtetMSoG9C%2F%E5%B0%8F%E7%A8%8B%E5%BA%8F3.png?alt=media\&token=119e1428-c85e-4777-86d6-9e73e039ae7f)

配置以上步骤后，单击保存即可进行测试和上线。

**扫码测试**：选择需要测试的 App ，使用包含有 **安装了弹窗 SDK 的 App** 的设备进行扫码唤醒 App ，进行测试。为了更方便的供测试者查看弹窗效果，不管扫码的设备是否在分群中，都会在相应的时机弹出弹窗。

**设备ID预览**:  支持访问用户ID和登陆用户ID预览弹窗，忽略分群，触发事件就可以弹窗

**上线时间配置：**&#x60A8;可以配置弹窗上下线时间。
{% endtab %}

{% tab title="H5应用" %}

### 新建弹窗

单击界面左上角的**新建**，选择**弹窗**，再选择**H5应用**。

### 用户选择

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyYa_vN60Mn8jh0eQrT%2F-LyYcAXqGjhiHb8ofAKK%2Fweb1.png?alt=media\&token=fe8ed473-635f-491f-9d88-791741c7f742)

选择要发送弹窗的目标用户。可使用创建好的用户分群。

* **用户分群**

直接选择之前创建过的分群（创建好的用户分群每天凌晨会按照条件跑一遍分群数据），这种方式会有T+1的延 时）用户次日访问App时会判断该用户是否在某个分群中，满足条件弹出。

但如果选择四种预定义分群：全部登录用户，全部访问用户，新登录用户，新访问用户，在触达中是实时判断的。比如选择新登录用户，那么每个打开App的用户，触达 SDK 都会实时判断该用户是否为新登陆的用户。

### 触发&素材

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyYa_vN60Mn8jh0eQrT%2F-LyYcF2yrrY32y6CrFg0%2FH51.png?alt=media\&token=9224d3ca-1d68-452d-a155-e44636c07016)

| 参数     | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 触发页面   | <p>是指，当用户到达哪个/些页面的时候，弹出弹窗。添加多个条件时，意味着用户只要到达其中任意一个页面，都会弹出弹窗。</p><p>比如，</p><ul><li>支持<strong>特定页面</strong>：你想在用户到达 [www.growingio.com](http://www.growingio.com) 页面时发送弹窗，就可以将这个页面 [www.growingio.com](http://www.growingio.com) 输入进去。</li><li>支持<strong>页面组通配符</strong>：如果你想在用户到达 [www.growingio.com](http://www.growingio.com) 域名下所有页面时发送弹窗，可以输入 [www.growingio.com\*。](http://www.growingio.com*。)</li><li>支持<strong>多个页面组合</strong>：你想在用户到达 [www.growingio.com/1](http://www.growingio.com/1) 和 [www.growingio.com/2](http://www.growingio.com/2) 时触发，可以通过<strong>增加URL</strong>按钮输入两个URL。</li></ul> |
| 触发时机   | <p></p><p>就是用户会在什么时间看到这个弹窗？</p><p>默认触发时机为「<strong>页面打开</strong>」时，也可以选择其他事件作为触发时机。</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| 延迟设置   | 设置弹窗在满足触发条件后的延迟弹出时间。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| 触发次数   | <p>弹窗的触发频率可以设置为只触发 1 次，或是多次。</p><p>如果设置多次触发，需要定义触发次数上限，以及每次的间隔时间。</p><p>只要用户没有点击查看弹窗或者关闭弹窗，且触发次数没有达到上限就会再次触发。</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| 素材选择   | <p></p><p>上传不超过500KB大小的背景图片素材（允许包含透明度）。</p><p>如果有需要可以使用 <a href="https://tinypng.com/">tinypng</a> 等在线网站进行压缩，或者让设计师直接做出这个大小的图片。</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| 点击转跳页面 | <p></p><p>设置点击该弹窗会转跳的页面，可以为空。</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |

### 测试和上线

![](https://348272635-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lpwgem-x8KzhBglybzw%2F-LyYa_vN60Mn8jh0eQrT%2F-LyYcLYiXA2RCZ2chr_U%2FH52.png?alt=media\&token=7f5437c5-a60b-41e0-ace9-388e4ab529da)

配置完以上步骤后，单击保存即可进行测试和上线。

**扫码测试**：选择需要测试的 App ，使用包含有 **安装了弹窗 SDK 的 App** 的设备进行扫码唤醒 App ，进行测试。为了更方便的供测试者查看弹窗效果，不管扫码的设备是否在分群中，都会在相应的时机弹出弹窗。

**上线时间配置：**&#x60A8;可以配置弹窗上下线时间。
{% endtab %}
{% endtabs %}

##
