漸進式網頁應用程式如何推動業務成長

Sébastien Fourault
Sébastien Fourault

許多公司都將漸進式網頁應用程式納入路線圖,以便將網站改造成新世代版本,並因應使用者的新期望。和許多技術一樣,PWA 也會引發問題:客戶是否需要這項技術?這項技術能為我的業務帶來多少成長?技術上可行嗎?

找出相關人員。
找出利害關係人。

為了擬定數位策略,通常會涉及多位利害關係人:產品經理和行銷長是每項功能的共同擁有者,技術長會評估技術的可行性和可靠性,使用者體驗研究人員則會驗證功能是否能解決實際客戶問題。

本文旨在協助您回答這三個問題,並規劃 PWA 專案。您將從顧客需求著手,將這些需求轉化為 PWA 功能,並著重於評估各項功能對業務的影響。

PWAs 可滿足客戶需求

在 Google 打造產品時,我們會遵循「以使用者為重心,其他一切都會水到渠成」這項規則。以使用者為優先:我的客戶有哪些需求? PWA 如何滿足這些需求?

找出客戶的需求。
找出客戶需求。

進行使用者研究時,我們發現了一些有趣的模式:

  • 使用者不喜歡行動裝置上的延遲和不穩定情形。行動裝置延遲的壓力程度,可比擬為觀看恐怖電影
  • 五成的智慧型手機使用者表示,他們不想下載應用程式,因此在瀏覽或購物時,更傾向於使用公司的行動版網站。
  • 使用者解除安裝應用程式的主要原因之一,是因為儲存空間不足。(已安裝的 PWA 通常會佔用不到 1 MB 的空間)。
  • 智慧型手機使用者更有可能使用提供相關產品推薦內容的行動版網站進行購物,且有 85% 的智慧型手機使用者表示行動通知很實用

根據這些觀察結果,我們發現消費者偏好快速、可安裝、可靠且引人入勝的體驗 (F.I.R.E.)。

PWA 可善用新式網頁功能

PWA 提供一套最佳做法和現代網頁 API,旨在讓您的網站快速、可安裝、可靠且引人入勝,滿足客戶需求。

舉例來說,使用服務工作者來快取資源並執行預測快取,可讓網站速度加快,並提高可靠性。將網站設為可安裝的網站,可讓客戶輕鬆從主畫面或應用程式啟動器直接存取網站。網頁推播通知等 API 可讓您更輕鬆地透過個人化內容重新吸引使用者,進而培養忠誠度。

透過網頁功能改善使用者體驗。
透過網頁功能改善使用者體驗。

瞭解對業務的影響

視活動而定,業務成功的定義可能有很多種:

  • 使用者在您的服務上停留的時間變長
  • 待開發客戶的跳出率降低
  • 轉換率提升
  • 吸引更多回訪者

大多數 PWA 專案的行動裝置轉換率都會提高。您可以參閱眾多行動應用程式架構個案研究,進一步瞭解相關資訊。視目標而定,您可能會想優先處理對業務較有意義的 PWA 部分,這完全沒問題。您可以挑選 PWA 功能並分別啟動。

讓我們來評估這些出色的 F.I.R.E. 功能對業務的影響。

網站速度對業務的影響

根據 Deloitte Digital 近期的研究,網頁速度對業務指標有重大影響。

您可以採取許多做法來改善網站速度,進而改善所有使用者的關鍵使用者歷程。如果不知道從何處著手,請參閱「快速」一節,並使用Lighthouse,為需要修正的項目排定優先順序。

進行速度最佳化時,請開始使用適當的工具和指標頻繁評估網站速度,以便監控進度。舉例來說,您可以使用 Lighthouse 評估指標、修正明確的目標 (例如取得 「良好」Core Web Vitals 分數),並將效能預算納入建構程序。您可以透過每日評估和「速度價值」方法,找出速度變化所帶來的影響,並計算出您的工作產生多少額外收益。

評估速度的價值,並與轉換建立關聯。
評估速度的價值,並與轉換建立關聯。

eBay 在 2019 年將速度列為公司目標。他們採用了效能預算、關鍵路徑最佳化和預測預先擷取等技術。他們得出結論,搜尋網頁載入時間每加快 100 毫秒,加入購物車的商品數量就會增加 0.5%。

載入時間每加快 100 毫秒,eBay 的「加入購物車」商品數量就會增加 0.5%。
載入時間每加快 100 毫秒,eBay 的「加入購物車」商品數量就會增加 0.5%。

可安裝網站對業務的影響

為什麼要使用者安裝 PWA?方便使用者輕鬆返回您的網站。安裝 Android 應用程式至少需要三個步驟 (重新導向至 Play 商店、下載應用程式、啟動應用程式),但只要按一下滑鼠,即可順利完成 PWA 安裝作業,不會讓使用者離開目前的轉換漏斗。

安裝體驗應流暢無阻。
安裝體驗應流暢無礙。

安裝應用程式後,使用者只要點按主畫面上的圖示,即可啟動應用程式,在切換應用程式時,也可以在應用程式匣中看到該應用程式,或透過應用程式搜尋結果找到該應用程式。我們稱之為動態的「探索-啟動-切換」功能,而讓 PWA 可供安裝是解鎖存取權的關鍵。

除了可透過裝置上熟悉的探索和啟動途徑存取,PWA 的啟動方式也與特定平台應用程式完全相同:提供獨立體驗,不受瀏覽器影響。此外,它還可從 OS 層級裝置服務 (例如應用程式切換器和設定) 中受益。

安裝 PWA 的使用者通常是參與度最高的使用者,他們的參與度指標比一般訪客更佳,包括重複造訪次數更多、網站停留時間更長,以及轉換率更高,通常與行動裝置上特定平台應用程式使用者的參與度相同。

如要讓 PWA 可供安裝,必須符合基本條件。符合這些條件後,您就可以在電腦和行動裝置 (包括 iOS) 的使用者體驗中宣傳安裝程序

漸進式網頁應用程式可在任何地方安裝。
PWA 可安裝於任何地方。

開始宣傳 PWA 安裝作業後,請評估有多少使用者安裝 PWA,以及他們如何使用 PWA。

如要盡可能提高使用者安裝網站的數量,建議您測試不同的宣傳訊息 (例如「一秒安裝」或「新增快捷方式來追蹤訂單」) 和不同刊登位置 (例如頁首橫幅、動態消息內),並嘗試在安裝漏斗的不同步驟 (例如造訪第二個網頁或完成預訂後) 提出這類訊息。

如要瞭解使用者離開的階段,以及如何改善留存率,您可以透過四種方式評估安裝漏斗:

  • 符合安裝資格的使用者人數
  • 點按安裝提示的使用者人數
  • 接受和拒絕安裝提示的使用者人數
  • 成功安裝的使用者人數

您可以向所有使用者推廣 PWA 安裝作業,也可以採取更謹慎的做法,先針對一小部分使用者進行實驗。

幾天或幾週後,您應該會有足夠的資料來評估對商家的影響。安裝捷徑的使用者會做出哪些行為?他們是否會更積極參與,轉換次數是否會增加?

如要區隔安裝 PWA 的使用者,請追蹤 appinstalled 事件,並使用 JavaScript 檢查使用者是否處於獨立模式,這表示使用者正在使用已安裝的 PWA。然後將這些做為 Analytics 追蹤的變數或維度。

評估安裝價值。
評估安裝價值。

Weekendesque 的案例研究很有趣;為了提高使用者安裝 PWA 的機會,他們在使用者造訪的第二個網頁上宣傳安裝功能。從主畫面啟動 PWA 的使用者,透過 PWA 預訂住宿的可能性是一般使用者的兩倍以上!

安裝使用者的轉換率高出 2.5 倍。
已安裝的使用者轉換率高出 2.5 倍。

安裝應用程式是鼓勵使用者回訪網站,並提高客戶忠誠度的好方法。您也可以為付費使用者提供個人化體驗。

即使您有特定平台的應用程式,使用者可能還是不想或不需要安裝。這些半互動使用者可能會認為 PWA 適合他們,因為 PWA 通常被視為較輕,且安裝時的摩擦力較低。

PWA 可觸及半參與度使用者。
PWA 可觸及半活躍使用者。

可靠網站對業務的影響

Chrome Dino 遊戲是使用者離線時提供的遊戲,每月有超過 2,700 萬次的遊玩次數。這項令人驚豔的數據顯示,網路可靠度是 PWA 使用者的重要機會,尤其是在網路不穩定或行動數據費用昂貴的市場,例如印度、巴西、墨西哥或印尼。

無論使用者是否已連上網際網路,只要啟動從應用程式商店安裝的應用程式,他們都會預期應用程式會開啟。漸進式網頁應用程式也應如此。

至少應提供簡單的離線頁面,告知使用者在沒有網路連線的情況下無法使用應用程式。接著,您可以考慮提供離線時實用的功能,進一步提升使用體驗。舉例來說,您可以提供票券或登機證、離線的願望清單、客服中心聯絡資訊、使用者最近查看的文章或食譜等內容。

即使離線也能提供協助。
即使處於離線狀態,也能提供協助。

導入可靠的使用者體驗後,您可能會想評估這項功能的表現:有多少使用者離線?他們位於哪些地理區域?網路恢復後,他們是否會繼續停留在網站上?Analytics 可以告訴您使用者通常會在何時離線和上線。這項指標可顯示網路恢復後,有多少使用者繼續瀏覽貴商家網站。

Trivago 發現,回訪並繼續瀏覽的使用者人數增加了 67%。
在 Trivago 的觀察中,回訪網站繼續瀏覽的使用者人數增加了 67%。

Trivago 案例研究說明這項功能對業務目標的影響。在工作階段因離線而中斷的使用者中 (約占三成),有 67% 的使用者在重新連上網路後,會繼續瀏覽網站。

吸引人目光的網站對企業的影響

使用者可以選擇接收網頁推播通知,以便在需要或感興趣的網站上收到最新消息,您也可以透過客製化且相關的內容,有效地與使用者互動。

不過請注意,如果在使用者首次造訪時要求他們訂閱網頁通知,但未說明相關好處,使用者可能會認為這是垃圾內容,進而對您的體驗造成負面影響。請務必遵循最佳做法,在提示通知時提供相關用途,例如火車延誤、價格追蹤、缺貨產品等,以利使用者接受通知。

從技術層面來說,由於服務工作者會在背景執行網頁上的推播通知,因此這類通知通常是由專門用於管理廣告活動的系統 (例如 Firebase) 傳送。這項功能可為行動裝置 (Android) 和電腦使用者帶來極大的商業價值。這有助於提高重複造訪次數,進而提高銷售量和轉換次數。

如要評估推播廣告活動的成效,您需要評估整個漏斗,包括:

  • 符合推播通知資格的使用者人數
  • 點按自訂通知 UI 提示的使用者人數
  • 授予推播通知權限的使用者人數
  • 收到推播通知的使用者人數
  • 與通知互動的使用者人數
  • 來自通知的使用者轉換和參與度
評估網頁推播通知的價值。
評估網路推播通知的價值。

網路推播通知有許多優異的案例研究,例如 Carrefour 透過重新吸引棄購的使用者,將轉換率提高 4.5 倍

PWA 中的「P」:逐步推出各項功能

PWA 是現代網站,結合了網際網路的廣大觸及範圍,以及使用者在 Android、iOS 或電腦應用程式中所期待的所有友善功能。這些 API 採用一系列最佳做法和新式網路 API,可根據您的業務特性和優先順序獨立實作。

漸進式啟動漸進式網頁應用程式。
逐步推出 PWA。

為加快網站的現代化進程,並將其轉換為真正的 PWA,我們建議您採取敏捷做法,逐步推出各項功能。首先,請與使用者共同研究哪些功能可為他們帶來最大價值,然後與設計人員和開發人員合作,最後別忘了精確評估 PWA 產生的額外收益。