What is Deep linking and App Links
轉載請註明出處：https://medium.com/@devwilly，違者必究
What’s Deep linking ?
在全球資訊網(World Wide Web)的世界中，藉由超連結(Hyperlink)將所有的網站連接在一起，如下圖：點擊A網站中的超連結就能開啟B網站。
若將以上方法放到手機中會遇到問題嗎？答案是會的!! 原因是手機中大部分的操作都是App to App，而我們無法利用超連結來傳遞資訊。
Android、iOS都提供了類似的概念來解決手機導頁的問題，相關內容之後再做介紹。
Android Deep Link：https://developer.android.com/training/app-indexing/deep-linking.html
iOS Universal Links：https://developer.apple.com/ios/universal-links/
對於使用Facebook的台灣人來說，他們使用Facebook的頻率與時間比起其他網路媒體還要多（包含Line），因此大多數人(廠商)都將廣告資源投到Facebook上，因為此種方式能帶來最大效益。
Facebook為了整合跨App資料傳遞的問題，於2015 F8大會中提出了一項新的概念（App Links）且不需經過複雜的設定即可使用它，因為App Links的出現，我相信Facebook接下來的廣告營收又要創新高了XD
What’s App Links ?
App Links is an open cross platform solution for deep linking to content in your mobile app
簡單來說就是Facebook幫大家想了一種能將Deep Linking放到手機上使用的方法，解決了App間資料傳遞的問題，重點是它還支援跨平台服務!!
舉例來說，在Facebook貼了一則廣告連結，而我想讓連結被點擊時能導向預期中的指定頁面（App內），如下圖。
App Links提供讓使用者能快速的上手方法，主要有以下兩種：
- Adding App Links to Your Existing Web Content
- Using Facebook’s Mobile Hosting API for App Links
Using Facebook’s Mobile Hosting API for App Links
若想開啟的App頁面沒有相對應的Website頁面，建議採用此方法且官方提供以下兩種方式讓您快速建立App Links
- 使用website介面
- 使用command curl
website介面：若你沒有註冊成為開發者帳號建議不要使用此選項
command curl：同上，需要有Facebook 開發者帳號才拿的到App access token
這邊稍微介紹一下curl的使用方法，首先必須先拿到Access Token (詳情請自行Google)，下圖中的App Token就是我們要的。
以Android為例，針對Facebook官方文件中幾個欄位進行說明：
- access_token：針對每一個應用程式給一組User Token和App Token
- url：設定一組能和App溝通的文字
- package：想開啟App 的 package name
- should_fallback：基本上這個選項目前已經沒用了(註1)
註1：很久很久以前其實能透過should_fallback來設定連結導向
website或App，若使用者有安裝App，點擊連結就可開啟App內指定頁面，反之則開啟指定的website頁面，但後來App Links將未安裝App的行為改成開啟Google Play or App Store安裝App。
若設定成功App Links會return 一組專屬Id給你，此時將Id配上專屬網域就能使用囉。
https://fb.me/{app links return id}
有人會問，如果想使用自己的專屬網域名稱可以嗎？答案是可以的!! 就像KKBOX就是使用http://kkbox.fm/ 作為自己的專屬的網域名稱。
想擁有屬於自己的專屬網域必需成為Facebook開發者，若已經是開發者直接進入應用程式 控制板並在應用程式網域 填上網域名稱即可!!
最後將連結貼到塗鴉牆上時，Facebook會利用爬蟲抓取可顯示的內容並cache連結資料，若連結內容更新時，已存在塗鴉牆的內容並不會一起更新，除非Facebook重爬或使用Open Graph Debugger來更新cache資料內容。
基本上連結已經可以直接使用，最後我們只需將「連結」與「App」串連起來，就能將流量直接導入App內，讓使用者有更連貫性的操作體驗(不需要跳頁動畫)。
接著只需在AndroidManifest.xml 中設定android:scheme 就能將點擊後的行為交給App來處理，至於攔截後要怎麼處理我就不多做介紹了。
Adding App Links to Your Existing Web Content
若想擁有更彈性的使用方式，那就直接將App Link metadata加入您的website中，接下來將介紹如何將metadata埋入您的網頁中。
首先Facebook爬蟲會從網頁中尋找兩種基本的metadata tag 資訊，
- Open Graph Protocol
- App Links Tags
Open Graph Protocol
Facebook在2010時提出，定義了HTML Meta相關屬性並提供網頁的縮圖、標題、描述等等資訊，Facebook本身也是透過讀取"og” tag資訊將網址中的摘要內容顯示出來。
- og:title：內容標題
- og:image：內容縮圖
- og:description：內容描述
<html>
<head>
...
<meta property=”og:title” content=”I'm Title” />
<meta property=”og:image” content=”http://xxxxxxxxxxx" />
<meta property="og:description" content="I'm description" />
...
</head>
</html>如下圖，若想使用多張圖片作為摘要縮圖，只需使用多個og:image 即可。
另外也可以使用og:image:width 和 og:image:height 來調整縮圖比例，用法也相當簡單，如下圖。
<html>
<head>
...
<meta property=”og:image” content=”http://xxxxxxxxxxx" />
<meta property=”og:image:width” content=”400" />
<meta property=”og:image:height” content=”300" />
...
...
<meta property=”og:image” content=”http://oooooooooooo" />
<meta property=”og:image:width” content=”300" />
<meta property=”og:image:height” content=”200" />
</head>
</html>App Links Tags
定義了手持裝置跨App開啟時的行為模式，讓資料傳輸沒有中斷點，Facebook本身就是透過讀取 “al”tag 資訊將點擊網址後的行為呈現出來。
App Links對於目前主流的手機系統皆有支援，主要的差異是Android系統利用package 來判斷您的裝置中是否安裝此App，而iOS裝置則是使用app_store_id 來判別。
以Android為例，網頁中需要
- al:android:package：想開啟App 的 package name
- al:android:url：設定一組能與App溝通的文字
- al:android:app_name：未安裝時跳出的Dialog提示文字內容
- al:web:should_fallback：等同於上面介紹的should_fallback
<html>
<head>
<meta property=“al:android:package”
content=”your app package name" />
<meta property=”al:android:url”
content=”scheme://path/pageId" />
<meta property=”al:android:app_name”
content=”dialog description” />
<meta property=”al:web:should_fallback”
content=”false” />
</head>
</html>使用者未安裝App時，Facebook會利用al:android:package 將使用者導向Google Play下載您的App。
若使用者已經安裝App，Facebook會利用al:android:url 將使用者導向你預期的頁面中，並將相關資訊一併帶入App內 。
終於來到最後一個步驟了，就是將「連結」與「App」串連起來，這邊就不再贅述，可參考上面curl作法。
Conclusion
跨App間的資料傳輸一直以來都是大家非常頭痛的問題，尤其是Android裝置(碰到才知道痛><)，此時Facebook規格化定義出自家大平台的遊戲規則，依據此規格就能輕鬆做出跨App導頁的效果，雖然Facebook過去的改版讓人又恨又愛，但至少不需要再使用旁門左道的方法就可維持產品的穩定性，不然每次聽到Facebook App又改版了，大家就跟著開始頭痛!!
延伸閱讀：Android App Links
延伸閱讀：Branch Metrics
若你喜歡這篇文章歡迎推薦給你的朋友
若你喜歡我的部落格歡迎追隨我
Reference
轉載請註明出處：https://medium.com/@devwilly，違者必究
