宣傳 PWA 安裝模式

Mustafa Kurtuldu
Mustafa Kurtuldu
Penny McLachlan
Penny McLachlan

安裝漸進式網頁應用程式 (PWA) 可以讓使用者更容易找到及使用。即使是瀏覽器宣傳,有些使用者並沒意識到自己可以安裝 PWA,因此建議您提供應用程式內體驗,藉此宣傳及啟用 PWA 的安裝功能。

在 PWA 中簡易安裝按鈕的螢幕截圖。
PWA 內提供的簡易安裝按鈕。

本文並未涵蓋所有情況,而是提供從不同方式推動安裝 PWA 的起點。無論您使用的模式或模式為何,都會產生相同的程式碼來觸發安裝流程,詳情請參閱「如何自行提供應用程式內安裝體驗」。

最佳做法

無論您在網站上使用何種宣傳模式,都有一些最佳做法適用。

  • 不要在使用者歷程中瀏覽促銷活動。舉例來說,在 PWA 登入頁面中,請將行動號召放在登入表單下方並提交按鈕。濫用宣傳模式會降低 PWA 的可用性,並對參與度指標造成負面影響。
  • 包含關閉或拒絕促銷活動的功能。請記住,使用者這麼做有其偏好,且只在使用者與內容之間發生變化 (例如登入或完成購買交易) 時,才再次看到提示。
  • 將這些技術應用於 PWA 的不同部分,但請注意,安裝促銷活動時應避免讓使用者感到不堪負荷或擾人。
  • 只在觸發 beforeinstallprompt 事件「之後」顯示促銷活動。

自動瀏覽器升級

符合特定條件時,大多數瀏覽器會自動向使用者顯示您的漸進式網頁應用程式可安裝。舉例來說,電腦版 Chrome 會在網址列中顯示安裝按鈕。

顯示安裝指標的網址列螢幕截圖。
瀏覽器提供的安裝促銷活動 (電腦)。
瀏覽器提供的安裝促銷活動的螢幕截圖。
瀏覽器提供的安裝促銷活動 (行動裝置)。

Chrome for Android 會向使用者顯示迷你資訊列,但您可以在 beforeinstallprompt 事件上呼叫 preventDefault() 來避免這項功能。如果您未呼叫 preventDefault(),系統就會在使用者首次造訪您的網站時顯示橫幅,並在 Android 上符合安裝條件,大約 90 天後就會再次顯示。

使用者介面宣傳模式

使用者介面宣傳模式幾乎適用於所有類型的 PWA,會顯示在網站導覽和橫幅等位置。與任何其他類型的宣傳模式一樣,瞭解使用者背景是盡量減少使用者歷程的干擾。

謹慎考慮觸發促銷 UI 的網站可帶來大量安裝,同時避免對不感興趣的使用者歷程造成乾擾。

簡易安裝按鈕

最簡單的使用者體驗,就是在網頁內容的適當位置加入「安裝」或「取得應用程式」按鈕。確保按鈕不會封鎖其他重要功能,並會妨礙使用者在應用程式中操作。

自訂安裝按鈕。
簡易安裝按鈕。

這是一個安裝按鈕,屬於網站標頭的一部分。其他標頭內容通常包含標誌和漢堡選單等網站品牌宣傳元素。視網站功能和使用者需求而定,標頭可能為 position:fixed 或不是 position:fixed

標頭中的自訂安裝按鈕。
標頭中的自訂安裝按鈕。

如果使用得當,從網站標頭宣傳 PWA 安裝,就能有效吸引忠實客戶回訪體驗。PWA 標頭中的像素大小很重要,因此請確保安裝行動號召的大小適當,且比其他可能的標頭內容重要,且不造成乾擾。

標頭中的自訂安裝按鈕
標頭中的自訂安裝按鈕

請您務必:

  • 除非 beforeinstallprompt 已觸發,否則不要顯示安裝按鈕。
  • 請評估已安裝的用途為使用者帶來哪些價值。建議您使用選擇性的指定目標,只向可能受益的使用者顯示促銷活動。
  • 有效運用寶貴的標頭空間。請考慮在標頭中提供其他實用資訊,並根據其他選項評估安裝促銷活動的優先順序。
導覽選單中的自訂安裝按鈕
在滑出式導覽選單中新增安裝按鈕/宣傳訊息。

導覽選單很適合用來宣傳應用程式安裝,因為使用者開啟選單,就表示他們願意與您的體驗進行互動。

請您務必:

  • 避免干擾重要的導覽內容。將 PWA 安裝促銷資訊放在其他選單項目下方。
  • 提供簡短的相關提案,說明安裝您的 PWA 對使用者的好處。

到達網頁

到達網頁的用途是宣傳產品和服務,因此適合在宣傳安裝 PWA 的好處時,盡可能擴大規模。

到達網頁上的自訂安裝提示。
到達網頁上的自訂安裝提示。

首先,請說明網站的價值主張,接著讓訪客瞭解安裝帶來什麼好處。

請您務必:

  • 加強吸引訪客最重視的功能,並強調可能將他們帶往到達網頁的關鍵字。
  • 請務必在清楚闡述價值主張前,讓安裝宣傳訊息和行動號召引人注目。畢竟,這是您的到達網頁
  • 請考慮在應用程式使用者花費最多時間的部分加入安裝促銷活動。

大多數使用者都曾在行動裝置體驗中遇到安裝橫幅廣告,且熟悉橫幅的互動操作。請謹慎使用橫幅廣告,以免干擾使用者。

頁面頂端的自訂安裝橫幅。
頁面頂端的可關閉橫幅。

請您務必:

  • 等到使用者對您的網站展現興趣後,再顯示橫幅。如果使用者關閉橫幅,建議不要再次顯示,除非使用者觸發了與內容互動程度較高的轉換事件 (例如,在電子商務網站上購買商品或註冊帳戶)。
  • 簡短說明在橫幅中安裝 PWA 的價值。舉例來說,您可以提及 PWA 與 iOS/Android 應用程式的安裝作業,分別指出它幾乎不會儲存使用者裝置上的儲存空間,或是在商店重新導向的情況下立即安裝。

臨時 UI

暫時 UI (例如 Snackbar 設計模式) 會通知使用者,並讓他們輕鬆完成動作 (在本例中為安裝)。如果使用正確,這些 UI 模式不會中斷使用者流程,而且通常會在使用者忽略時自動關閉。

做為 Snackbar 的自訂安裝橫幅。
可關閉的 Snackbar,指出 PWA 可供安裝。

使用應用程式進行幾次互動後,顯示 Snackbar。如果它出現在頁面載入時或與內容無關,使用者就很容易錯過 Snackbar,或造成認知超載的情況。發生這種情況時,使用者只會關閉所有看到的內容提醒您,網站的新訪客可能無法安裝您的 PWA。因此,建議您等到有使用者強烈的興趣信號,再使用此模式,例如重複造訪、使用者登入或類似的轉換事件。

做為 Snackbar 的自訂安裝橫幅。
可關閉的 Snackbar,指出 PWA 可供安裝。

請您務必:

  • 顯示 Snackbar 的時間介於 4 到 7 秒之間,讓使用者有足夠的時間查看及回應 Snackbar,並且讓內容一目瞭然。
  • 避免在橫幅等臨時 UI 上方顯示這個圖片。
  • 請等到掌握使用者強烈的興趣信號,再使用此模式,例如重複造訪、使用者登入或類似的轉換事件。

轉換後

使用者轉換事件 (例如電子商務網站完成購物) 後,立即是提高 PWA 安裝成效的絕佳機會。使用者明確與您的內容互動,而轉換通常代表使用者會再次與您的服務互動。

轉換後的安裝宣傳。
使用者完成購買後的安裝促銷活動。

預訂或結帳流程

在循序歷程期間或之後 (例如預訂或結帳流程後) 顯示安裝促銷活動。如果您在使用者完成歷程後才顯示促銷活動,可以在整個歷程完成之後讓促銷活動更加顯眼。

在使用者歷程後的安裝宣傳活動。
使用者歷程後的安裝促銷活動。

請您務必:

  • 加入相關的行動號召。哪些使用者安裝您的應用程式會帶來好處?為什麼?這對他們目前經歷的歷程有什麼關聯?
  • 如果您的品牌為已安裝應用程式的使用者提供專屬優惠,請提及他們。
  • 在歷程中請不要進行宣傳,否則可能會導致完成率降低。在上方的電子商務範例中,請注意結帳的關鍵行動號召是否位於應用程式安裝宣傳活動上方。

註冊、登入或登出流程

這項促銷活動是在購物歷程宣傳模式的特殊案例中,將宣傳資訊卡更顯眼。

註冊頁面上的自訂安裝按鈕。
註冊頁面上的自訂安裝按鈕。

這些網頁通常只會有互動過的使用者瀏覽,而這類網頁也已經確立您的 PWA 的價值主張。這些頁面通常不見得 還有太多其他實用內容如此一來,就能減少干擾,只要不會造成乾擾,就能擴大行動號召。

請您務必:

  • 避免影響使用者在註冊表單中的歷程。如果是多個步驟的程序,建議您等到使用者完成整個流程後,再進行這項程序。
  • 宣傳與註冊使用者最相關的功能。
  • 請考慮在應用程式的登入區域加入額外的安裝宣傳活動。

內嵌宣傳模式

內嵌式的宣傳技術會在網站內容中添加促銷活動。這通常比使用者介面中的宣傳內容略微小,因此需要權衡。建議您讓促銷活動脫穎而出,使感興趣的使用者容易注意到,但不得太過頻繁,導致使用者體驗不佳。

動態內廣告

PWA 中的新聞報導或其他資訊卡清單之間會顯示動態內安裝宣傳訊息。

內容動態饋給中的安裝促銷活動。
內容動態饋給中的安裝促銷活動。

目標是讓使用者瞭解如何更輕鬆存取他們喜歡的內容。著重於宣傳對使用者實用的功能

請您務必:

  • 限制促銷活動的頻率,以免造成使用者困擾。
  • 讓使用者能關閉促銷活動。
  • 記住使用者選擇關閉的選項。