宣傳 PWA 安裝模式

Mustafa Kurtuldu
Mustafa Kurtuldu
Penny McLachlan
Penny McLachlan

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

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

本文並未詳述所有內容,但提供了各種促進 PWA 安裝率的方法。無論您使用的模式或模式為何,都會連到相同的程式碼來觸發安裝流程,詳情請參閱「如何自行提供應用程式內安裝體驗」一文。

最佳做法

無論您在網站上使用哪種宣傳模式,都適用以下最佳做法。

  • 請勿在使用者歷程的流程中顯示促銷活動。舉例來說,在 PWA 登入頁面中,請將行動號召放在登入表單和提交按鈕下方。使用干擾性的促銷模式會降低 PWA 的可用性,並對參與度指標造成負面影響。
  • 提供關閉或拒絕促銷優惠的選項。請記住,使用者這麼做有其偏好,且只在使用者與內容之間發生變化 (例如登入或完成購買交易) 時,才再次看到提示。
  • 請在 PWA 的不同部分結合多種技巧,但請注意不要過度宣傳安裝功能,以免使用者感到厭煩。
  • 只在 beforeinstallprompt 事件觸發「之後」顯示促銷活動。

自動宣傳瀏覽器

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

全方位工具列的螢幕截圖,其中顯示安裝指標。
瀏覽器提供的安裝促銷活動 (電腦版)。
瀏覽器提供的安裝宣傳活動螢幕截圖。
瀏覽器提供的安裝促銷活動 (行動裝置)。

Chrome 適用於 Android 的應用程式會向使用者顯示迷你資訊列,但您可以在 beforeinstallprompt 事件上呼叫 preventDefault(),避免發生這種情況。如果您沒有呼叫 preventDefault(),系統會在使用者首次造訪您的網站且符合 Android 安裝可行性條件時顯示橫幅,並在大約 90 天後再次顯示。

使用者介面宣傳模式

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

明智地決定促銷 UI 的觸發時機,可讓網站獲得更多安裝次數,並避免干擾不想安裝的使用者旅程。

簡易安裝按鈕

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

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

這是網站頁首中的安裝按鈕。其他標頭內容通常包含網站品牌標誌,例如標誌和漢堡選單。標頭是否為 position:fixed 取決於網站功能和使用者需求。

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

如果使用得當,從網站標頭宣傳 PWA 安裝,就能有效吸引忠實客戶回訪體驗。PWA 標頭中的像素非常寶貴,因此請確保安裝的行動號召按鈕大小適中,且比其他可能的標頭內容更重要,且不具侵入性。

標頭中的自訂安裝按鈕
自訂安裝按鈕位於標題中

請您務必:

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

導覽選單是宣傳應用程式安裝的絕佳位置,因為開啟選單的使用者表示他們對您的體驗感興趣。

請您務必:

  • 避免中斷重要的導覽內容。將 PWA 安裝促銷資訊放在其他選單項目下方。
  • 提供簡短且相關的宣傳內容,說明使用者安裝 PWA 的優點。

到達網頁

到達網頁的目的在於宣傳您的產品和服務,因此在宣傳安裝 PWA 的優點時,這裡是適合大力宣傳的適當位置。

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

首先說明網站的價值主張,然後讓訪客知道安裝後可獲得哪些好處。

請您務必:

  • 強調訪客最在意的功能,並強調可能吸引他們前往到達網頁的關鍵字。
  • 在清楚呈現價值主張後,請製作醒目的安裝宣傳活動和行動號召。畢竟這是你的到達網頁。
  • 請考慮在使用者花費最多時間的應用程式部分,加入安裝宣傳活動。

大多數使用者在行動體驗中都曾看過安裝橫幅,也熟悉橫幅提供的互動功能。橫幅廣告可能會干擾使用者,因此應謹慎使用。

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

請您務必:

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

暫時性 UI

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

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

在與應用程式進行幾次互動後,顯示小工具列。如果小工具列出現在頁面載入時,或與內容不符,使用者很容易錯過,或導致認知負荷過重。發生這種情況時,使用者只會關閉所有看到的內容。請注意,網站的新使用者可能還不願意安裝 PWA。因此,建議您等到使用者傳送強烈的興趣信號 (例如重複造訪、使用者登入或類似的轉換事件) 後,再使用這項模式。

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

請您務必:

  • 顯示 Snackbar 的時間介於 4 到 7 秒之間,讓使用者有足夠的時間查看及回應 Snackbar,並且讓內容看起來不會幹擾使用者。
  • 避免在其他暫時性 UI (例如橫幅) 上方顯示。
  • 請等到使用者傳送出強烈的興趣信號 (例如重複造訪、使用者登入或類似的轉換事件) 後,再使用這項模式。

轉換後

使用者完成轉換事件後 (例如在電子商務網站上購物),是推廣 PWA 安裝的絕佳時機。使用者顯然會與您的內容互動,且轉換通常表示使用者會再次使用您的服務。

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

預訂或結帳流程

在訂房或結帳流程結束後,在序列歷程期間或結束後顯示安裝促銷活動。如果您是在使用者完成歷程後顯示宣傳活動,通常可以讓宣傳活動更醒目,因為使用者已完成歷程。

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

請您務必:

  • 加入相關的行動號召。哪些使用者會從安裝應用程式中獲益?原因為何?與他們目前的旅程有何關聯?
  • 如果您的品牌為已安裝應用程式的使用者提供獨特優惠,請提及這些優惠。
  • 請勿在旅程中將宣傳活動置於下一個步驟之前,否則可能會影響旅程完成率。請注意,在上述電子商務範例中,結帳的主要行動號召力位於應用程式安裝促銷活動上方。

註冊、登入或登出流程

這項促銷活動是旅程促銷模式的特殊情況,可讓促銷資訊卡更醒目。

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

這些頁面通常只會由已互動的使用者瀏覽,且已建立 PWA 的價值主張。而且這些頁面通常沒有太多其他實用的內容。因此,只要不妨礙使用者體驗,較大的行動號召就不會造成太多干擾。

請您務必:

  • 避免在註冊表單中中斷使用者流程。如果是多步驟流程,建議您等到使用者完成流程後再進行。
  • 宣傳與已註冊使用者最相關的功能。
  • 建議您在應用程式的登入區域中,新增其他安裝促銷活動。

內嵌宣傳模式

內嵌宣傳技巧可將宣傳內容與網站內容交織在一起。這通常比在使用者介面中宣傳更為微妙,但兩者各有優缺。您希望促銷活動足夠醒目,讓有興趣的使用者注意到,但不要過度醒目,以免影響使用者體驗品質。

動態內廣告

動態內安裝促銷活動會在 PWA 的新聞文章或其他資訊卡清單之間顯示。

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

您的目標是向使用者展示如何更方便地存取他們喜愛的內容。著重於宣傳有助於使用者的功能。

請您務必:

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