促进 PWA 安装的模式

Mustafa Kurtuldu
Mustafa Kurtuldu
Penny McLachlan
Penny McLachlan

安装渐进式 Web 应用 (PWA) 有助于用户更轻松地找到和使用您的应用。即使在浏览器中进行宣传,有些用户也不知道自己可以安装 PWA,因此提供可用于宣传和启用 PWA 的安装应用内体验会很有帮助。

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

本文并非详尽无遗,而是为推广 PWA 安装的不同方式提供了一个起点。无论您使用哪种图案,它们都会触发相同的代码来触发安装流程,如如何提供自己的应用内安装体验中所述。

最佳做法

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

  • 将推广活动安排在用户体验历程之外。例如,在 PWA 登录页面中,将号召性用语放在登录表单和提交按钮下方。破坏性地使用促销活动模式会降低 PWA 的可用性,并对互动指标产生负面影响。
  • 提供关闭或拒绝促销的功能。如果用户选择不显示,请记住用户的偏好设置,仅在用户与您的内容的关系发生变化(例如用户登录或完成购买交易)时重新提示。
  • 在 PWA 的不同部分组合使用这些方法,但要注意不要过度宣传安装,以免给用户造成困扰。
  • 仅在 beforeinstallprompt 事件触发之后显示促销活动。

自动浏览器推广

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

显示可见安装指示器的万能搜索框的屏幕截图。
浏览器提供的安装促销活动(桌面设备)。
浏览器提供的安装促销活动的屏幕截图。
浏览器提供的安装促销活动(移动设备)。

Chrome for Android 会向用户显示一个迷你信息栏,但您可以通过对 beforeinstallprompt 事件调用 preventDefault() 来阻止此操作。如果您未调用 preventDefault(),系统会在用户首次访问您的网站并在 Android 设备上满足可安装性条件时显示横幅,然后大约 90 天后再次显示。

界面促销模式

界面宣传模式几乎可用于任何类型的 PWA,并显示在网站导航和横幅等位置。与任何其他类型的促销模式一样,了解用户的上下文非常重要,以尽可能减少对用户转化历程的干扰。

网站如果能慎重考虑触发促销界面的时间,就能获得更多安装量,并避免干扰对安装不感兴趣的用户的体验历程。

简单的安装按钮

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

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

这是位于您网站标题中的安装按钮。其他标题内容通常包括网站品牌元素,例如徽标和三线状菜单。标头可以是 position:fixed,也可以不是,具体取决于您网站的功能和用户需求。

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

通过网站标头宣传 PWA 安装是让最忠实的客户更轻松地重返您的体验的绝佳方式,但需要谨慎使用。PWA 标头中的像素非常宝贵,因此请确保安装号召性用语的尺寸适当,比其他可能的标头内容更重要,并且不会造成干扰。

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

请确保您:

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

导航菜单是宣传应用安装的绝佳位置,因为打开菜单的用户表示他们对您的体验感兴趣。

请确保您:

  • 避免干扰重要的导航内容。将 PWA 安装宣传广告放在其他菜单项下方。
  • 提供简短且相关的推介材料,说明为什么用户会从安装 PWA 中受益。

着陆页

着陆页的用途是宣传您的产品和服务,因此在宣传安装 PWA 的好处时,不妨大力宣传。

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

首先,说明网站的价值主张,然后让访问者知道安装后能获得什么。

请确保您:

  • 突出显示对访问者最重要的功能,并强调可能将他们引导至着陆页的关键字。
  • 在明确说明应用的价值主张后,再让安装促销活动和号召性用语引人注目。毕竟,这是您的着陆页。
  • 考虑在用户花费最多时间的应用部分添加安装促销活动。

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

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

请确保您:

  • 等到用户对您的网站表现出兴趣后再展示横幅广告。如果用户关闭您的横幅,请勿再次显示,除非用户触发了表明与您的内容互动度更高的转化事件,例如在电子商务网站上购买商品或注册账号。
  • 在横幅中简要说明安装 PWA 的好处。例如,您可以通过提及 PWA 在用户设备上几乎不占用存储空间,或者它会在无需商店重定向的情况下即时安装,来区分 PWA 的安装与 iOS/Android 应用的安装。

临时界面

临时界面(例如Snackbar 设计模式)会通知用户,并让用户轻松完成操作(在本例中为安装应用)。如果使用得当,此类界面模式不会中断用户流程,并且通常会在用户忽略后自动关闭。

将自定义安装横幅作为动作条显示。
一个可关闭的信息提示栏,表示 PWA 可供安装。

在用户与应用互动几次后显示动作条。如果动作条在页面加载时显示或显示在上下文之外,用户可能会很容易错过,或者导致认知过载。在这种情况下,用户只会关闭所看到的所有内容。请注意,您网站的新用户可能还没有准备好安装您的 PWA。因此,最好等到您获得来自用户的强烈兴趣信号(例如,重复访问、用户登录或类似的转化事件)后再使用此模式。

将自定义安装横幅作为动作条显示。
一个可关闭的信息提示栏,指示 PWA 可供安装。

请确保您:

  • 显示侧边栏的时间应在 4 到 7 秒之间,以便用户有足够的时间查看并对其做出回应,同时不会造成干扰。
  • 避免在其他临时界面(例如横幅等)上显示此类消息。
  • 请等到您获得来自用户的强烈兴趣信号(例如,重复访问、用户登录或类似的转化事件)后,再使用此模式。

转换后

在用户转化事件(例如在电子商务网站上完成购买交易)后立即展示您的 PWA 是宣传其安装的绝佳机会。用户显然与您的内容互动,而转化通常表明用户会再次与您的服务互动。

转化后的安装促销活动。
用户完成购买后的安装促销活动。

预订或结账流程

在顺序历程期间或之后显示安装促销活动,例如在预订或结账流程之后。如果您是在用户完成历程后展示促销活动,那么通常可以让促销活动在用户完成历程后更醒目。

用户完成历程后的安装促销活动。
用户体验历程结束后的安装促销活动。

请确保您:

  • 添加相关的号召性用语。哪些用户会从安装您的应用中受益?为什么?这与他们目前所在的历程有何关系?
  • 如果您的品牌为已安装应用的用户提供专属优惠,请提及这些优惠。
  • 请勿在转化历程中的后续步骤中展示促销信息,否则可能会对转化历程完成率产生负面影响。在上述电子商务示例中,请注意结账的关键号召性用语是如何显示在应用安装促销活动上方的。

注册、登录或退出流程

这种促销活动是历程促销模式的特殊情况,其中促销卡片可以更醒目。

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

这些网页通常只会被感兴趣的用户查看,他们已经了解了您的 PWA 的价值主张。而且,这些页面上通常没有太多其他实用内容。因此,只要号召性用语不会妨碍用户,使用较大的号召性用语会减少干扰。

请确保您:

  • 避免在注册表单中干扰用户的体验历程。如果该流程涉及多个步骤,您可能需要等到用户完成整个历程。
  • 宣传与已注册用户最相关的功能。
  • 考虑在应用的已登录区域内添加额外的安装促销活动。

内嵌促销模式

内嵌宣传技术可将推广活动与网站内容交织在一起。这通常比在界面中进行宣传更为微妙,但也有利弊。您希望促销活动足够醒目,以便感兴趣的用户注意到,但也不能过于醒目,以免影响用户体验质量。

信息流广告

动态内安装宣传信息会显示在 PWA 中的新闻报道或其他信息卡片列表之间。

内容 Feed 中的安装促销活动。
内容 Feed 中的安装促销活动。

您的目标是向用户说明如何更方便地访问他们正在欣赏的内容。重点宣传对用户有帮助的功能。

请确保您:

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