安装渐进式 Web 应用 (PWA) 可让用户更轻松地找到和使用。即使推广了浏览器,一些用户也没有意识到他们可以安装 PWA,因此提供应用内体验有助于推广和支持安装 PWA。
![PWA 中的简单安装按钮的屏幕截图。](https://web.developers.google.cn/static/articles/promote-install/image/screenshot-simple-instal-3b0b6b042e079.png?authuser=5&hl=nb)
本文并非详尽无遗,而是为推广 PWA 安装的不同方式提供了一个起点。无论您使用哪种模式或模式,它们都会生成用于触发安装流程的相同代码(详见如何提供您自己的应用内安装体验)。
最佳实践
无论您在网站上使用哪种促销模式,都请遵循一些最佳做法。
- 将推广活动安排在用户体验历程之外。例如,在 PWA 登录页面中,将号召性用语放在登录表单和提交按钮下方。干扰性使用促销模式会降低 PWA 的易用性,并对互动指标产生负面影响。
- 包含关闭或拒绝促销活动的功能。如果用户执行此操作,请记住用户的偏好,并且仅在用户与您的内容的关系发生变化(例如,用户登录或完成购买)时才重新提示。
- 在 PWA 的不同部分结合使用多种技术,但注意不要让用户因安装推广而感到无所适从或烦恼。
- 仅在
beforeinstallprompt
事件触发之后显示促销活动。
浏览器自动升级
当满足特定条件时,大多数浏览器都会自动向用户表明您的渐进式 Web 应用是可以安装的。例如,桌面版 Chrome 会在多功能框中显示安装按钮。
![包含可见安装指示器的多功能框的屏幕截图。](https://web.developers.google.cn/static/articles/promote-install/image/screenshot-omnibox-a-vi-4d92411b4427d.png?authuser=5&hl=nb)
![浏览器提供的安装推广活动的屏幕截图。](https://web.developers.google.cn/static/articles/promote-install/image/screenshot-browser-provi-bd3e42c38ef14.png?authuser=5&hl=nb)
Android 版 Chrome 会向用户显示迷你信息栏,但可以通过对 beforeinstallprompt
事件调用 preventDefault()
来阻止这种情况。如果您不调用 preventDefault()
,横幅广告将在用户首次访问您的网站且符合 Android 上的可安装性条件时展示,并在大约 90 天后再次展示。
界面宣传模式
界面宣传模式几乎可用于任何类型的 PWA,并显示在网站导航和横幅等位置。与任何其他类型的宣传方式一样,您必须了解用户所处的情境,以最大限度地减少对用户历程的干扰。
那些对何时触发推广界面进行周密考虑的网站实现了更多安装,并避免干扰对安装感兴趣的用户的转化历程。
简单的安装按钮
最简单的用户体验就是在网页内容中的适当位置添加“安装”或“获取应用”按钮。确保该按钮不会阻挡其他重要功能,并且会妨碍用户使用您的应用。
![自定义安装按钮...](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-c31a48092e91c.png?authuser=5&hl=nb)
固定标题
这是一个安装按钮,属于您网站标题的一部分。其他标头内容通常包括网站品牌信息,例如徽标和汉堡式菜单。标头可能为 position:fixed
,也可能没有,具体取决于您网站的功能和用户需求。
![标头中的自定义安装按钮。](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-he-ae67d1ee86ff3.png?authuser=5&hl=nb)
如果使用得当,从网站标头处宣传 PWA 安装是让您最忠实的客户更轻松地回访您的体验的好方法。PWA 标头中的像素非常宝贵,因此请确保安装号召性用语的大小合适,比其他可能的标头内容更重要,并且无干扰。
![页眉中的自定义安装按钮](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-he-37ffcc16ba69b.png?authuser=5&hl=nb)
请确保您:
- 除非触发
beforeinstallprompt
,否则不显示安装按钮。 - 评估已安装的应用场景对用户的价值。请考虑选择性定位,仅向可能从中受益的用户展示您的促销活动。
- 高效利用宝贵的标头空间。考虑在标头中向用户提供哪些其他选项会有帮助,并权衡安装推广相对于其他选项的优先级。
导航菜单
![导航菜单中的自定义安装按钮](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-button-na-58019edc6068c.png?authuser=5&hl=nb)
导航菜单是推广应用安装的理想位置,因为打开菜单的用户会表明您的应用与您的体验进行互动。
请确保您:
- 避免干扰重要的导航内容。将 PWA 安装宣传内容放在其他菜单项下方。
- 提供简短且相关的推介材料,说明为什么用户会从安装 PWA 中受益。
着陆页
着陆页旨在推广您的产品和服务,因此适合在这种平台中大幅放宽安装 PWA 的益处。
![着陆页上的自定义安装提示。](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-prompt-a-5843b12d5bc42.png?authuser=5&hl=nb)
首先,说明网站的价值主张,然后让访问者知道安装后能获得什么。
请确保您:
- 利用对访问者最重要的功能进行吸引,并重点强调那些可能将访问者带到着陆页的关键字。
- 确保安装宣传内容和号召性用语引人注目,但必须先阐明价值主张。毕竟,这是您的着陆页。
- 考虑在您应用中花费最多的那一部分添加安装促销活动。
安装横幅
大多数用户在移动体验中都遇到了安装横幅,并且熟悉横幅提供的互动。应谨慎使用横幅广告,因为它们可能会对用户造成干扰。
![页面顶部的自定义安装横幅。](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-banner-to-3aa411a9214c1.png?authuser=5&hl=nb)
请确保您:
- 等到用户对您的网站表现出兴趣后再展示横幅广告。如果用户关闭了横幅,请不要再次展示该横幅,除非用户触发的转化事件表明用户与您的内容有更高的互动度,例如在电子商务网站上购物或注册帐号。
- 简要说明在横幅中安装 PWA 的价值。例如,要区分安装 PWA 与安装 iOS/Android 应用,您可以提及 PWA 在用户设备上几乎不使用存储空间,或者 PWA 会立即安装,而不会进行商店重定向。
临时界面
临时界面(例如 Snackbar 设计模式)会通知用户,让他们可以轻松完成某项操作(在本例中为安装应用)。如果使用得当,此类界面模式不会干扰用户体验,并且通常会在用户忽略时自动关闭。
![将安装横幅自定义为信息提示控件。](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-banner-sn-fc0c5df5e9391.png?authuser=5&hl=nb)
在与应用进行几次互动后显示信息条。如果信息条在网页加载时显示或与上下文无关,则很容易被忽略,或导致认知过载。在这种情况下,用户只需关闭他们看到的所有内容即可。请注意,访问您网站的新用户可能还没有准备好安装 PWA。因此,最好等到用户发出强烈的兴趣信号(例如重复访问、用户登录或类似转化事件)后再使用此模式。
![将安装横幅自定义为信息提示控件。](https://web.developers.google.cn/static/articles/promote-install/image/custom-install-banner-sn-b294fb32a9249.png?authuser=5&hl=nb)
请确保您:
- 让信息条显示 4 到 7 秒的时间,让用户有足够的时间来查看并做出反应,同时又不会妨碍到信息条。
- 避免展示在其他临时界面(例如横幅等)的上层。
- 等到您从用户获得强烈的兴趣信号之后,再使用此模式,例如重复访问、用户登录或类似转化事件。
转换后
在用户转化事件发生后(例如在电子商务网站上购物后),立即进行推广是推广 PWA 安装的绝佳机会。用户明显在与您的内容互动,而转化通常表示用户将再次与您的服务互动。
![转化后的安装推广活动。](https://web.developers.google.cn/static/articles/promote-install/image/an-install-promotion-con-effd5a7b38e75.png?authuser=5&hl=nb)
预订或结账历程
在依序购买流程(例如预订或结账流程之后)期间或之后展示安装促销活动。如果您在用户完成转化历程后展示促销活动,通常可以在用户转化历程完成后将其突出显示。
![用户体验历程结束后的安装促销活动。](https://web.developers.google.cn/static/articles/promote-install/image/an-install-promotion-a-u-2e0b33d2ff618.png?authuser=5&hl=nb)
请确保您:
- 添加相关的号召性用语。哪些用户将因安装您的应用而受益?为什么?这与他们目前所在的历程有何关系?
- 如果您的品牌面向已安装应用的用户提供独特的优惠,请提及这些优惠。
- 切勿通过推广活动影响体验历程中的后续步骤,否则可能会对历程的完成率产生负面影响。在上面的电子商务示例中,请注意关键的结账号召性用语如何在应用安装促销活动上方显示。
注册、登录或退出流程
此促销活动是历程促销模式的一种特殊情况,在该模式下,促销信息卡片更加显眼。
![注册页面上的自定义安装按钮。](https://web.developers.google.cn/static/articles/promote-install/image/a-custom-install-button-401ffb4e23752.png?authuser=5&hl=nb)
通常,只有参与互动的用户才会查看这些网页,并且 PWA 的价值主张已经确立。而且,这些网页上往往没有太多其他实用内容。因此,只要不妨碍用户,制作较长的号召性用语就不会造成干扰。
请确保您:
- 避免在注册表单中中断用户的操作流程。如果该流程涉及多个步骤,您可能需要等到用户完成整个历程。
- 宣传与已注册用户最相关的功能。
- 考虑在应用的已登录区域再添加一个安装促销活动。
内嵌促销模式
内嵌宣传技术可将推广活动与网站内容交织在一起。这通常比界面中的推广更加细微(但有一些需要权衡)。您的宣传必须足够引人注目,足以吸引感兴趣的用户关注,但又不至于降低用户体验的质量。
信息流广告
信息流安装宣传内容显示在 PWA 中的新闻报道或其他信息卡片列表之间。
![内容 Feed 中的安装促销活动。](https://web.developers.google.cn/static/articles/promote-install/image/an-install-promotion-with-06735d525d2b5.png?authuser=5&hl=nb)
您的目标是向用户说明如何更方便地访问他们正在欣赏的内容。应重点推广对用户有用的特性和功能。
请确保您:
- 限制促销活动的频率,以免给用户带来困扰。
- 让用户能够关闭促销活动。
- 记住用户的关闭选择。