促进 PWA 安装的模式

穆斯塔法·库图尔杜
Mutafa Kurtuldu
彭妮·麦克拉克伦
Penny McLachlan

安装渐进式 Web 应用 (PWA) 可让您的用户更轻松地查找和使用。即使通过推广浏览器,有些用户也没有意识到自己可以安装 PWA,因此提供应用内体验可以用来宣传和启用 PWA 的安装会很有帮助。

PWA 中简单安装按钮的屏幕截图。
PWA 中提供的简单安装按钮。

本文并非详尽无遗,但为您提供了一些着手点,介绍了推广 PWA 的不同方式。无论您使用哪种模式,哪种模式都会导致相同的代码触发安装流程,如如何提供您自己的应用内安装体验中所述。

最佳实践

无论您在网站上使用何种促销模式,一些最佳实践都适用。

  • 将促销活动保持在用户体验历程之外。例如,在 PWA 登录页面中,将号召性用语放在登录表单和提交按钮下方。中断使用推广模式会降低 PWA 的易用性,并对您的互动指标产生负面影响。
  • 包含关闭或拒绝促销活动的功能。记住用户的偏好,在他们执行此操作时,仅在用户与内容的关系发生变化(例如,他们登录或完成购买)时才重新提示。
  • 请在 PWA 的不同部分结合使用这些技术,但要注意不要因为提升安装次数而让用户感到无所适从或反感。
  • 仅在触发 beforeinstallprompt 事件之后显示促销信息。

浏览器自动推广

当满足特定条件时,大多数浏览器会自动向用户表明您的渐进式 Web 应用可安装。例如,桌面版 Chrome 会在多功能框中显示安装按钮。

多功能框的屏幕截图,其中显示了可见的安装指示器。
浏览器提供的安装促销(桌面)。
浏览器提供的安装促销的屏幕截图。
浏览器提供的安装促销(移动设备)。

Android 版 Chrome 会向用户显示迷你信息栏,但可以通过对 beforeinstallprompt 事件调用 preventDefault() 来防止发生这种情况。如果您不调用 preventDefault(),横幅将在用户首次访问您的网站且符合 Android 上的可安装性标准时展示,然后在大约 90 天后再次显示。

界面宣传模式

界面推广模式几乎可用于任何类型的 PWA,并出现在网站导航和横幅等位置。与任何其他类型的促销模式一样,请务必了解用户的情境,以尽量减少对用户转化历程的干扰。

谨慎考虑何时触发推广界面的网站可以提高安装量,并避免干扰对安装不感兴趣的用户的历程。

简单的安装按钮

最简单的用户体验是在网页内容中的适当位置添加“安装”或“获取应用”按钮。确保该按钮不会阻碍其他重要功能,并会妨碍用户使用您的应用。

自定义安装按钮。
简单的安装按钮。

此安装按钮是网站标题的一部分。其他标头内容通常包括网站品牌信息,例如徽标和汉堡式菜单。标题可能position:fixed也可能没有,具体取决于网站的功能和用户需求。

标题中的自定义安装按钮。
标头中的自定义安装按钮。

如果使用得当,通过网站页眉推广 PWA 安装,可让您最忠实的客户更轻松地再次获得您的体验。PWA 标头中的像素非常珍贵,因此请确保您的安装号召性用语大小合适、比其他可能的标头内容更重要且不会造成干扰。

标题中的自定义安装按钮
页眉中的自定义安装按钮

请确保您:

  • 除非触发了 beforeinstallprompt,否则不会显示安装按钮。
  • 评估您已安装的用例对用户的价值。不妨考虑选择性定位,仅向有可能从中受益的用户展示您的促销活动。
  • 高效利用宝贵的标题空间。请考虑在标头中为用户提供其他有用的内容,并权衡安装促销活动相对于其他选项的优先级。
导航菜单中的自定义安装按钮
在滑出式导航菜单中添加安装按钮/促销信息。

导航菜单是吸引用户安装您的应用的理想位置,因为打开菜单的用户会表现出与您的互动情况。

请确保您:

  • 避免干扰重要的导航内容。将 PWA 安装宣传内容放在其他菜单项下方。
  • 提供简短且相关的推介,向用户说明安装 PWA 的好处。

着陆页

着陆页旨在宣传您的产品和服务,因此您可以在这个时候大力宣传安装 PWA 的好处。

在着陆页上显示自定义安装提示。
着陆页上的自定义安装提示。

首先,说明您网站的价值主张,然后告诉访问者安装后可以得到什么。

请确保您:

  • 吸引对访问者最重要的功能,并强调可能会将他们引导至您的着陆页的关键字。
  • 让您的安装宣传和号召性用语引人注目,但前提是要先阐明价值主张。毕竟,这是您的着陆页。
  • 考虑在应用中用户花时间最多的部分添加安装促销活动。

大多数用户都曾在移动体验中遇到过安装横幅广告,并且熟悉横幅广告提供的互动方式。应谨慎使用横幅广告,因为它们可能会干扰用户。

页面顶部的自定义安装横幅。
页面顶部的可关闭横幅。

请确保您:

  • 等到用户表现出对您的网站感兴趣之后,再展示横幅广告。如果用户关闭了您的横幅,请不要再次展示,除非用户触发的转化事件表明用户与您的内容有较高级别的互动(例如,在电子商务网站上购物或注册帐号)。
  • 简要说明在横幅中安装 PWA 的价值。例如,要区分 PWA 与 iOS/Android 应用的安装,您可以提及 PWA 几乎不使用用户设备上的存储空间,或者该应用无需商店重定向即可立即安装。

临时界面

临时界面(例如 Snackbar 设计模式)会通知用户,并允许用户轻松完成某项操作(在本例中,即安装应用)。如果使用得当,此类界面模式不会干扰用户流,并且通常会在被用户忽略时自动关闭。

将安装横幅自定义为信息提示控件。
一个可关闭的信息提示控件,用于表明 PWA 可安装。

在用户与应用进行几次互动后显示信息提示控件。如果在网页加载时显示信息提示控件,或信息不在上下文中显示,则很容易被忽略,或导致认知过载。在这种情况下,用户会直接关闭自己看到的所有内容。请注意,您网站的新用户可能还没有准备好安装您的 PWA。因此,最好等到用户表现出强烈的兴趣信号后再使用此模式,例如重复访问、用户登录或类似转化事件。

将安装横幅自定义为信息提示控件。
一个可关闭的信息提示控件,用于表明 PWA 可安装。

请确保您:

  • 在 4 到 7 秒内显示信息提示控件,让用户有足够的时间查看并做出回应,而不会妨碍用户操作。
  • 避免在横幅等其他临时界面上展示广告。
  • 等到用户表现出强烈的兴趣信号后再使用此模式,例如重复访问、用户登录或类似转化事件。

转换后

用户转化事件发生后立即(例如用户在电子商务网站上购物后),这是宣传安装 PWA 的绝佳机会。用户正与您的内容明确互动,而转化通常表明用户会再次与您的服务互动。

转化后发生的安装推广。
用户完成购买后进行的安装促销活动。

预订或结账历程

在顺序历程(例如预订或结账流程)期间或之后显示安装促销活动。如果您在用户完成整个转化历程后展示促销活动,通常可在用户转化历程结束后使其更加显眼。

用户体验历程结束后的安装推广。
用户体验历程之后的安装推广。

请确保您:

  • 添加相关的号召性用语。哪些用户会从安装您的应用中受益?为什么?这与他们当前的历程有何关系?
  • 如果您的品牌针对已安装应用的用户提供了独家优惠,请提及这些优惠。
  • 避免宣传内容阻碍您的历程中的后续步骤,否则可能会对历程完成率产生负面影响。请注意,在上面的电子商务示例中,结账时的关键号召性用语显示在应用安装推广活动上方。

注册、登录或退出流程

此促销是历程促销模式的特例,使用这种促销卡片时,促销卡片可以更加显眼。

注册页面上的自定义安装按钮。
注册页面上的自定义安装按钮。

通常只有感兴趣的用户才会浏览这些网页,而此类用户的价值主张已确立了 PWA 的价值主张。此外,这些网页上通常也 不会放置太多其他实用内容因此,只要不妨碍用户操作,大型号召性用语的干扰性就会小一些。

请确保您:

  • 避免干扰用户填写注册表单的过程。对于涉及多个步骤的流程,您可能需要等到用户完成整个转化历程。
  • 宣传与已注册用户最为相关的功能。
  • 考虑在应用的登录区域内额外增加一次安装促销活动。

内嵌促销模式

内嵌宣传技术将宣传内容与网站内容交织在一起。这通常比界面中的“宣传”更细微,因为后者需要进行权衡。您的宣传活动应足够引人注目,让感兴趣的用户会注意到,但又不能过于影响用户体验的质量。

信息流广告

信息流安装促销信息会显示在 PWA 中的新闻报道或其他信息卡列表之间。

内容 Feed 中的安装宣传广告。
内容 Feed 中的安装促销活动。

您的目标是向用户展示如何更方便地访问他们喜欢的内容。您应重点宣传对用户有用的特性和功能。

请确保您:

  • 限制促销活动的频率,以免干扰用户。
  • 让用户能够关闭促销活动。
  • 记住用户选择关闭。