宣傳 PWA 安裝模式

穆塔法庫圖杜
Mustafa Kurtuldu
潘尼麥拉克蘭
Penny McLachlan

安裝漸進式網頁應用程式 (PWA) 可幫助使用者更輕鬆地尋找及使用。即使升級至瀏覽器,部分使用者並不知道可以安裝 PWA,因此提供應用程式內體驗,有助於宣傳及啟用 PWA 的安裝。

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

本文內容並非詳盡無遺,但提供了各種方法來宣傳 PWA 的安裝方式。無論使用哪種模式、或模式,它們都會導向觸發安裝流程的程式碼,詳情請參閱「如何提供自己的應用程式內安裝體驗」一文。

最佳做法

無論網站採用哪種宣傳模式,這些最佳做法都適用。

  • 請將促銷活動顯示在使用者歷程以外的位置。舉例來說,在 PWA 登入頁面中,請將行動號召放在登入表單下方,然後提交按鈕。幹擾宣傳模式會降低 PWA 的可用性,進而對參與度指標造成負面影響。
  • 包括關閉或拒絕促銷活動的功能。記住使用者的偏好設定,前提是他們必須執行這項操作,並且只有在使用者與內容的關係出現變化時 (例如登入或完成購物) 時,才會再次顯示提示。
  • 結合運用 PWA 不同部分的技巧,但請留意不要對安裝宣傳內容造成衝擊或讓使用者感到不悅。
  • 只有在 beforeinstallprompt 事件觸發「之後」,才會顯示促銷活動。

自動瀏覽器促銷

滿足特定條件時,大部分瀏覽器都會自動告知使用者您的漸進式網頁應用程式可以安裝。舉例來說,電腦版 Chrome 會在網址列中顯示安裝按鈕。

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

Chrome for Android 會向使用者顯示迷你資訊列,但您可以在 beforeinstallprompt 事件上呼叫 preventDefault() 來防止這種情況。如果您不呼叫 preventDefault(),橫幅廣告會在使用者第一次造訪網站並符合 Android 的安裝性條件時顯示,並在大約 90 天後再次顯示。

使用者介面宣傳模式

使用者介面宣傳模式適用於幾乎所有類型的 PWA,並會顯示在網站導覽和橫幅廣告等位置。就像任何其他宣傳模式一樣,您必須瞭解使用者的背景,才能盡量避免干擾使用者歷程。

這類網站必須謹慎考慮,觸發宣傳 UI 的 UI 可以獲得大量安裝,並避免干擾無意安裝的使用者歷程。

簡易安裝按鈕

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

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

這是網站標頭中的安裝按鈕。其他標題內容通常包含網站品牌宣傳元素,例如標誌和漢堡選單。標題可能是 position:fixed,或不是取決於網站的功能和使用者需求。

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

如果使用得當,在網站標頭中鼓勵 PWA 安裝作業,是協助最忠實客戶回歸體驗的好方法。PWA 標頭中的像素極其珍貴,因此請確保安裝行動號召的大小適當、重要性高於其他可能的標頭內容,且不造成乾擾。

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

請您務必:

  • 除非已觸發 beforeinstallprompt,否則不要顯示安裝按鈕。
  • 評估已安裝應用程式用途的價值,並為使用者評估價值。建議您選擇選擇性指定目標,只向可能受益的使用者顯示促銷活動。
  • 有效率地使用寶貴的標頭空間。請考量在標頭中提供使用者的其他實用做法,然後衡量安裝促銷的優先順序,與其他選項相比。
導覽選單中的自訂安裝按鈕
在滑出的導覽選單中加入安裝按鈕/宣傳內容。

導覽選單是宣傳應用程式安裝程序的絕佳位置,因為使用者開啟選單即代表對您的體驗進行互動。

請您務必:

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

到達網頁

到達網頁的目的是宣傳您的產品和服務,因此很適合用來宣傳安裝 PWA 的好處。

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

首先,請說明網站的價值主張,再讓訪客瞭解安裝後可獲得什麼好處。

請您務必:

  • 吸引對訪客最重要的功能,並強調可將他們帶往到達網頁的關鍵字。
  • 為安裝和行動號召設定引人注目,但別忘了先清楚表達價值主張。畢竟,這就是您的到達網頁
  • 建議您在使用者花最多時間的應用程式中,加入安裝促銷活動。

大多數使用者都曾在行動裝置體驗中看過橫幅廣告,並熟悉橫幅廣告的互動方式。橫幅廣告可能會幹擾使用者,因此請謹慎使用。

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

請您務必:

  • 請等到使用者表現出對您的網站有興趣後,再顯示橫幅廣告。如果使用者關閉您的橫幅,除非使用者觸發了與您內容更深入的互動 (例如電子商務網站或註冊帳戶),否則請勿再顯示該橫幅廣告。
  • 請簡短說明在橫幅中安裝 PWA 的價值。舉例來說,您可以提及 PWA 與使用者裝置上的安裝量幾乎沒有差異,或是應用程式會在沒有商店重新導向的情況下立即安裝,藉此區分從 iOS/Android 應用程式安裝和安裝檔。

臨時使用者介面

臨時使用者介面 (例如 Snackbar 設計模式) 會通知使用者並允許他們輕鬆完成動作,在本例中為安裝應用程式。正確使用時,這類 UI 模式就不會幹擾使用者流程,而且通常會在使用者忽略後自動關閉。

以 Snackbar 形式自訂安裝橫幅。
一個可關閉的 Snackbar,表示 PWA 可安裝。

在與應用程式進行幾次互動後顯示 Snackbar。如果它在網頁載入時或與內容無關,就很容易遭到遺漏,或導致認知超載。發生這種情況時,使用者只會關閉看到的所有內容。提醒您,網站新使用者可能尚未準備好安裝 PWA。因此,建議您等到使用者有強烈的興趣信號後再使用這個模式,例如回訪、使用者登入或類似的轉換事件。

以 Snackbar 形式自訂安裝橫幅。
一個可關閉的 Snackbar,表示 PWA 可安裝。

請您務必:

  • 顯示介於 4 到 7 秒之間的 Snackbar,讓使用者有足夠時間查看並做出回應,且不會幹擾到過程。
  • 避免在橫幅等其他暫時性的使用者介面上顯示該素材資源。
  • 建議您等到使用者有強烈的興趣信號後再使用這個模式,像是重複造訪、使用者登入或類似的轉換事件。

轉換後

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

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

預訂或結帳流程

在依序歷程期間或之後 (例如預訂或結帳流程後) 顯示安裝促銷活動。如果您在使用者完成旅程後才顯示促銷活動,通常可以在消費者完成歷程後更醒目。

使用者歷程後發生的安裝促銷活動。
使用者歷程後的安裝促銷活動。

請您務必:

  • 加入相關的行動號召。哪些使用者需要安裝應用程式,好處多多?為什麼?與目前所走的歷程有何關聯?
  • 如果您的品牌提供應用程式使用者專屬優惠,您可以提及他們。
  • 不要在旅程中完成後續步驟,以免對旅程完成率造成負面影響。在上述電子商務範例中,請注意要結帳的主要行動號召,位於應用程式安裝促銷活動上方。

註冊、登入或登出流程

這項促銷活動是消費歷程的特殊情況,其中的宣傳資訊卡會更顯眼。

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

這些網頁通常只有參與度高的使用者會瀏覽,也就是已建立 PWA 價值主張。這些頁面通常也沒有太多其他實用內容因此,如果行動號召不夠顯眼,就比較不會造成乾擾。

請您務必:

  • 請避免在註冊表單中乾擾使用者歷程。如果是多步驟程序,則可能需要等到使用者完成歷程後再進行。
  • 宣傳最符合註冊使用者需求的功能。
  • 請考慮在應用程式的已登入區域加入額外的安裝促銷活動。

內嵌宣傳模式

內嵌宣傳技術會將宣傳活動與網站內容交錯。這通常比使用者介面中的促銷活動更小,但會有所優缺點。建議您在宣傳活動中脫穎而出,吸引感興趣的使用者註意,但又不致於會影響使用者體驗品質。

動態內廣告

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

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

您的目標是讓使用者瞭解如何更輕鬆地存取自己喜歡的內容。著重於宣傳對使用者有幫助的功能

請您務必:

  • 請限制促銷活動的顯示頻率,以免使用者感到困擾。
  • 允許使用者關閉促銷活動。
  • 請注意使用者的關閉選項。