Flutter 實作 DeepLink 完整指南 ⎮ Part 1: 基本介紹
不可忽視的 Deep Link 體驗
Mobile 中的 Deep Link 為什麼需要?不是把 APP 功能做好、提升性能,UI 美工漂亮就好嗎?當產品的基本要求達到後,再來會想到的就是使用者體驗,和有效地精準行銷。而深度連結就扮演了一個非常重要的角色。
Deep Link 解決了網頁對應用、應用對應用的隔閡,能夠提升用戶體驗,透過追蹤、分析和第三方服務的整合,幫助行銷策略的優化。在競爭激烈的 APP 市場中,用戶參與和轉換率是成功的關鍵,這也是本文想跟大家分享的重點。
想像一個例子,如果今天你跟朋友在 Instagram 討論美食,討論晚餐要吃什麼。這時朋友介紹了一間評價很高的火鍋店,而我們點擊分享連結後,可以直接開啟 Google Map 並顯示該店家的詳細資訊,在不需要任何操作的情況下就能立即了解它。像這樣的絲滑體驗就是一個良好應用的象徵,快速地協助用戶解決問題。
以下整理了幾個擁有 Deep Link 的好處:
加強使用者體驗
Deep Link 可讓使用者直接開啟、導航到應用程式內的指定頁面,快速瞭解目標內容。同時避免了從首頁開始一頁一頁跳轉的過程,從而提高了使用者的便利性和滿意度。
從品牌的角度,希望讓用戶能直接關注重點資訊,透過即時體驗促使用戶進行下一步操作。從使用者角度,能快速瞭解品牌想訴說的訊息,而不需要自行猜測或有多餘的學習成本。例如:使用者的 Email 上有最新的熱賣商品資訊,我們在點擊相關連結之後,手機會幫我們打開 APP,並且跳到商品詳細頁面。
改善行銷和參與度
行銷人員可以在社交平台、文章貼文、廣告或 Email 中添加 Deep Link,讓用戶點擊後直接引導至應用的特定部分。這種直接且針對性的方式可以帶來更高的轉換率,因為用戶被直接帶到他們本身感興趣的內容,而不必再花時間自行摸索。
簡化新用戶入門流程
對於新用戶,Deep Link 可以簡化入門過程,直接引導到應用程式內的特定頁面,例如:註冊頁面、歡迎頁面或是隱藏流程,進而識別某些用戶是透過連結導流並下載的族群。
更好的分析和追蹤
透過 Deep Link 讓開發者和行銷人員能更有效地追蹤用戶參與度。從中得知哪些連結最常被使用,哪些頁面最容易被看到,因此可以針對特定內容進行改善和加強體驗。不管是透過自家的短連結做轉址跳轉,或是第三方服務的整合,都能夠從中記錄一些使用者行為,有效幫助產品。
與其他應用程式整合
深度連結支援自家應用與其他應用程式和服務整合,例如:貼文動態牆的照片分享,可以直接開啟 Instagram 並進行限時動態或貼文的發布。通常公開的服務都會說明 Link 使用方式,包含 Scheme 與參數細節,讓產品的功能跟其他應用結合在一起,提供用戶無縫流暢的體驗。
什麼是 Deep Link?
使用者點選 DeepLink 的主要目的,是想獲得並瀏覽特定的內容,我們使用 URI 作為開啟應用的鑰匙。
- 提供連結讓用戶跟 APP 互動,幫助用戶以最輕鬆的方式到達目的地。也因為方便性,可為應用本身帶來更多流量,進而分析或是引導下一步
- 在 App 還沒啟動的時候,會先開啟
/
首頁,再開啟指定路徑的頁面
連結部分能夠採用任何配置的 URI,通常會分成兩種:第一種為大家很常用的 Web Link,而第二種為自定義的 Custom Link。
連結組成元素
- Scheme → Web: http、https,Custom: line、vibz、dash
- Host → flutter.com、dash.com.tw、yiichenhi.dev
- Port → 8888、1688
- Path → product、post、setting
- Query → username=yii、uid=100
- Fragment → #100、#second、#what-is-deep-link
Scheme://Host:Port/Path?Query#Fragment
Example
// 1.Web Link
https://flutter.com/product/1
// 2.Custom Link
hf:herfit.app/program/66
連結類型
Web Link
利用 Web URI 導航到應用程式中的指定畫面或執行特定功能。
scheme 為 http
和 https
,就跟一般的網址相同。它的好處是當手機裡的應用無法開啟或找不到時,會幫忙開啟對應的網址連結,通常如果有自己或公司的品牌網站,就會順暢的開啟瀏覽器並進行跳轉。
它提供了向 APP 添加 DeepLink 支援的最安全路徑。要求應用能擁有一個網域進行驗證,主要在兩端執行檢查。我們必須在程式碼(Android 上的 AndroidManifest.xml
和 iOS 上的 Associated Domains
)中註冊指定網域,並在伺服器端新增檔案。為了讓應用可以識別網域,並且伺服器端的網域可以驗證應用程式。這種雙向驗證可確保深層連結的完整性和真實性,提供用戶安全的體驗。
Mobile 平台的連結命名:
- Android → App Links
- iOS → Universal Links
<https://your-domain.com>
Custom Link
自定義屬於品牌、產品的 scheme,使用上更靈活與開放。在一些社交產品的瀏覽器上運行時,可以減少障礙,同時也能保留其他應用與自身應用的溝通管道,讓不同應用產生互動。
使用上不需要擁有 Domain 與網頁,更方便和快速。
Mobile 平台的連結命名:
- Android → Deep Links
- iOS → Custom URL scheme
apple://taste.good/profile
實際範例
Conclusion
在本文中我們說明什麼是 Deep Link,提供它的特點與範例。利用 Deep Link 可以讓產品的體驗提升到另一個層級,算是在目前應用藍海中的基本需求。如果你還沒有相關經驗或是想導入它的話,請關注後面的章節,相信能給予不少的幫助。
Other Articles
- Flutter June 2024 💙 Flutter Monthly
- What can I do with “Extension Types” in Dart?
- Flutter May 2024 💙 Flutter Monthly
- Flutter April 2024 💙 Flutter Monthly
- Flutter March 2024 💙 Flutter Monthly
- Flutter February 2024 💙 Flutter Monthly
- Flutter 3.19 & Dart 3.3 改版重點!
- Flutter January 2024 💙 Flutter Monthly
- Use Dart 3 to Improve Development Skills. More Examples and Tips.
- Flutter December 2023 💙 Flutter Monthly
- Flutter November 2023 💙 Flutter Monthly
- Get Familiar with Dart 3, Make your Life Easier!
- Flutter 3.16 & Dart 3.2 重點整理來了!
- Flutter October 2023 💙 Flutter Monthly
- Flutter September 2023 💙 Flutter Monthly
- Flutter August 2023 💙 Flutter Monthly
- Flutter July 2023 💙 Flutter Monthly
- 添加預覽影片到 App Store,提升品牌形象
- Wow! Flutter runs on Apple Vision Pro!
- 提升開發效率的好物,Mason 讓你輕鬆撰寫自定義模板!
- 教你製作強大的 Rive 動畫,完成一隻 Flutter Dash,在 APP 跟它互動!