Firebase Dynamic Links 從後台建立縮網址

Firebase Dynamic Links 縮網址服務

2018 年的 4 月以前，Google 縮網址的服務很多人在用，但 August 發現到後期時出現很多釣魚的網址就是用 Google 縮網址，甚至只要看到傳來的連結是縮網址時，就會不太想點，怕是詐騙什麼的。

結果，2018.4 月後 Google 就停止了縮網址的服務，當時就出現了很多文章是在寫有哪些替代工具。

後來有聽說 Google 停了縮網址後，另外在 Firebase 上出了一個也是縮網址的功能，不知道是不是印象有誤，去年有一次原本想來研究一下，那時看還不叫 Dynamic Links，是叫 Short 什麼的，記得看文件是要收費的功能，就放棄了。

這陣子剛好身旁有人提到，就又再看了一下文件，就變成 Dynamic Links，還是免費的，既然是免費的，就可以來玩玩看啦。

Dynamic Links，中文叫動態連結，比以前的縮網址多了幾個便利的功能：

• 可以連到 App上（文件 原文「如果您希望自己的短鏈接在 iOS 和 Android 應用中打開，並且可以在應用安裝之後正常使用」）
• 可以在動態連結生成後，回頭去修改這個連結要轉去的網址
• 除了後台手動建立，也可以用 API 生成
• 防止釣魚，可限定轉址後的網域
• 可以用 Google 提供的網域，也可以用自己的網域

但 August 使用後，也覺得有以下缺點：

• 資料太慢才會出現在後台中，如果只是延個一天就算了，實際上要 3~5 天才看得到數據，這中間也看到點擊數從 25 變到 0，又變到 25 的
• 後台顯示的數據不是完整的，如果想看完整的點擊數據要用 API，但用 API 又會踩到坑（踩坑筆記請見：Firebase Dynamic Links Analytics API 取得短網址分析資料）

基本上如果企劃、行銷們可以接受 3-5 天後才能看見點擊數據，那 Firebase 的動態連結就可以拿來使用。

或者，如果只是想看這個動態連結帶來了多少瀏覽，那也可以選擇使用 Firebase Dynamic Links，因為在設連結時就能加入 utm，可以直接在 GA 上看來源數。

---

從後台建立 Google 網域的縮網址

這個小標題，就是本篇筆記要寫的部份。

Firebase Dynamic Links 建縮網址的方式有二：從 Firebase 後台、從 API。

而縮網域的網域也可二擇一：用 Google 提供的網域、用自己自訂的網域。

本篇會寫的是不會寫程式、不用花錢也能生成動態網址的部份：從 Firebase 後台 + 用 Google 提供的網域，來建立縮網址。

---

建立縮網址 3 + 2 步驟

參考 Firebase 上的 說明文件，要建立 Dynamic Links 的步驟有以下 4 + 1 步：

1. Firebase 上設置啟用 Dynamic Links
2. 設立轉址白名單（選用）
3. 在頁面中埋入 Dynamic Links SDK（選用）
4. 檢查有沒有成功建立動態網址
5. 看分析數據

實際應用後，第三步的埋 SDK 是不一定要執行的，因為 August 一開始沒埋，後台還是可以收到資料。

這邊先提供 August 從後台建立的縮網址：

https://letswritetw.page.link/FB

* 2020.05.11 補充：原本的縮網址是肺炎分佈圖，但頁面 August 下掉了，因此換成本站的 FB 粉絲團。

---

1 Firebase 上設置啟用 Dynamic Links

建立完 Firebase 帳號後，要新增一個專案，或是直接進入以前建立的專案，都行。

進到 Firebase 的後台，左側的選單往下滑，在「拓展」這個大項中有一個「Dynamic Links」，點擊就會看到後台：

點擊「開始使用」後，就要來決定是要用自訂網域，還是用 Google 提供的網域：

如果是用 Google 提供的話，網域會是這樣：

XXXXX.page.link

這邊來為 Let’s Write 建立一個，就填了 letswrite.page.link：

按下繼續後，Firebase 會驗證這個網域是不是有人用了，幾秒後就會出現結果：

按下完成，就會再回到 Dynamic Links 的後台：

設定短網址的連結

按下「新增動態連結」，就會進入新增縮網址的設定，第一步是設這個短網址的名稱：

可以看到，Firebase 會預設先填入一個隨機無義的名稱，也開放手動修改，這邊 August 是為之前做的 新冠肺炎分佈圖 來設短網址，因此就改填 covid：

設定這短網址要連到哪及顯示名稱

下一步就是要設立，這一個縮網址要連到哪個頁面，以及從後台看報表時要叫什麼名字？

這兩欄都是之後還可以再修改的，這邊也是填上分佈圖的連結：

設立手機App的連結行為

接著下面的兩步，就是設立要開啟 iOS、Android 的 App 內網址，因為 August 沒有 App，就都選擇「在 iOS/Android 應用程式中開啟深層連結網址」：

填寫社交標記

下一步就是填社群用的 meta，標題、圖片、描述：

雖然是標選填，但建議還是填寫，畢竟社群的感染力還是在的，這邊一樣拿分佈圖來填：

這邊如果有填寫，之後拿建立出的短網址分享時，就會看見設定，以下截圖分享在 Facebook 上，跟 LINE 上的範例：

填寫 UTM

最後一步是填寫 UTM 的資訊。

UTM 是 GA 拿來分析造訪來源的，一般很常用在 EDM 或 Event Site 上，縮網址這邊也直接提供了一個欄位讓人來填。

這邊一樣是選填，但一樣是建議要填，因為如果要看縮網址的成效資料，直接從 GA 看會比較快，即時報表裡就可以看到當下的來源數，而從 Firebase 看點擊數的話，個人慘痛經驗是要要等三天以上。

這邊拿分佈圖當示範：

以上幾個欄位都填完後，按下建立，我們就成功的建立了一個屬於自己的動態連結。接著畫面會跳回 Firebase Dynamic Links 的首頁，就會看見剛剛新增的連結出現在列表中：

---

2 設立轉址白名單

這步驟非必要，即便沒有執行，短網址還是一樣具有轉址的功能，但官方建議是為了安全性的考量，還是填一下的好。

由於我們這篇是手動在後台建立短網址，因此不太需要擔心有人拿短網址轉去詐騙的頁面。

關於這步驟 August 想了一想，應該主要是拿給用 API 生成短網址的部份。比方說我們建了一個活動，是讓使用者作了某些事後，頁面就會自動生成一組短網址讓使用者分享，為了不讓使用者惡搞亂填一些要轉去的地方，Firebase 就設了一個白名單的功能，讓短網址「只能」轉去我們限定的網域之內。

回到我們短網址的列表，點擊右上方的點點點 icon：

會出現一個選單，點擊選單中的「將網址模式加入許可清單」：

接著會跳出一個燈箱，要我們輸入限定的網域，Firebase建議是填寫規則運算式，如果不熟規則運算式的話，上面也很貼心的提供了一些範例，可以複製貼上做修改：

因為 August 是把地圖的頁面放在 GitHub Pages 上，因此就寫了 GitHub 開頭的網域，填完後按下新增，就設置了一個白名單網域：

那要怎麼測試設定白名單這段有沒有成功呢？因為目前寫到這還沒有實際用過API來建立縮網址，因此就是直接拿後台建立的部份來測，剛剛第一段的其中一步不是要設這備縮網址要連去哪裡嗎？實驗一下如果是連到其他白名單以外的網域，按下建立時就會出現一個錯誤提示，禁止設立：

---

3 在頁面中埋入 Dynamic Links SDK

這步不一定要執行，沒執行的話在 GA、Firebase Dynamic Links 的頁面一樣看得到數據。而有執行的話，就可以在 Firebase 的後台首頁多看到一些數據，像這樣：

看到這些圖表的時候才意識到，原來之前寫的這篇〈啟用 Web + App 報表〉，那個 App 報表就是 Firebase Analytic 啊，Google 把他們旗下的產品都串在一起了。

要埋 Dynamic Links SDK 很簡單，一樣是在 Firebase 的後台，點左上角的齒輪，再點專案設定：

右側的部份會變成設定頁，頁面往下拉，會看見一個「Firebase SDK snippet」的程式碼，就複製這一段程式碼，貼到你要轉址到的那個頁面上就好：

像這篇的縮網址是要轉進地圖頁，那就把這段程式碼複製貼上到地圖頁上。

如果進到這裡沒看到這段程式碼，就代表還沒有建立這個專案用的應用程式，建立一個就行。

---

4 檢查有沒有成功建立動態網址

回到 Firebase Dynamic Links 的頁面，看到我們建立的短網址列表，每個短網址我們滑鼠移過時右邊會出現點點點的 icon，按下去：

會出現一個選單，點擊「連結預覽（偵錯）」：

會進入到這個縮網址轉址部份的樹狀圖：

如果連結設置有誤，這邊會出現錯誤訊息，比方如果我們跳過白名單的部份，就會跳出說沒有建立白名單的訊息，像這樣：

---

5 看分析數據

看分析數據有二種方式，1 Firebase 後台、2 用 API。

不論是用這二種的哪一種，都要等個 2-5 天才能看到，對，August 沒寫錯，你也沒看錯，目前就是要這麼多天，這部份有列在開頭寫的缺點部份了。

當然，也可以用 GA utm 的部份來看，那邊就會比較快。

Firebase 的文件有說明這二種方式可以看到的資料：

用 API 看資料的部份寫在前一篇〈Analytics API 取得分析資料〉中，這邊就不多寫，這邊寫從後台看的部份。

一樣進到 Firebase Dynamic Links 的後台（這篇這句寫到可以用複製貼上的了），看到我們縮網址的列表，滑鼠移過後整個列表會變色，代表我們在哪一個縮網址上，點擊後就可以看到圖表：

從截圖可以看到，寫這篇的日期是 3/1，然後最多就看到 2/25 的資料，2/26-29 這段還是看不到的，要等 3-5 天才能看到資料真的不是亂寫的。

---

以上，就是由 Firebase 後台生成動態網址 Dynamic Links 的筆記。

等研究完用 API 的方式生成後再來寫下一篇。