Firebase Dynamic Links 從後台建立縮網址

Firebase Dynamic Links 從後台建立縮網址

Firebase Dynamic Links 縮網址服務

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

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

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

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

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

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

但Augustus使用後,也覺得有以下缺點:

  • 資料太慢才會出現在後台中,如果只是延個一天就算了,實際上要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是不一定要執行的,因為Augustus一開始沒埋,後台還是可以收到資料。

這邊先提供Augustus從後台建立的縮網址:

https://letswritetw.page.link/FB

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


1 Firebase上設置啟用Dynamic Links

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

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

進到firebase的dynamic links
進到Firebase的Dynamic Links

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

選擇網域(點擊看原圖)
選擇網域(點擊看原圖)

如果是用Google提供的話,網域會是這樣:

XXXXX.page.link

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

填寫網域

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

網域通過驗證
網域通過驗證

按下完成,就會再回到Dynamic Links的後台:

Dynamic Links的後台
Dynamic Links的後台

設定短網址的連結

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

設立縮網址的名稱
設立縮網址的名稱

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

手動修改短網址名稱
手動修改短網址名稱

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

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

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

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

示範填上分佈圖的連結
示範填上分佈圖的連結

設立手機App的連結行為

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

在 iOS/Android 應用程式中開啟深層連結網址
在 iOS/Android 應用程式中開啟深層連結網址
在 iOS/Android 應用程式中開啟深層連結網址
在 iOS/Android 應用程式中開啟深層連結網址

填寫社交標記

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

填社群用的meta
填社群用的meta

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

示範填上分佈圖的社群標記
示範填上分佈圖的社群標記

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

分享到Facebook上
分享到Facebook上
分享到LINE上
分享到LINE上

填寫UTM

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

填寫UTM
填寫UTM

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

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

這邊拿分佈圖當示範:

填寫UTM示範
填寫UTM示範

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

成功建立,連結出現在列表
成功建立,連結出現在列表

2 設立轉址白名單

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

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

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

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

點擊右上方的點點點icon
點擊右上方的點點點icon

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

點擊選單中的「將網址模式加入許可清單」
點擊選單中的「將網址模式加入許可清單」

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

新增白名單的燈箱
新增白名單的燈箱

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

加入白名單
加入白名單

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

嘗試編輯連結時發生錯誤
嘗試編輯連結時發生錯誤

3 在頁面中埋入Dynamic Links SDK

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

有埋Dynamic Links SDK可以另外看到的數據
有埋Dynamic Links SDK可以另外看到的數據
有埋Dynamic Links SDK可以另外看到的數據
有埋Dynamic Links SDK可以另外看到的數據

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

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

點擊專案設定
點擊專案設定

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

Dynamic Links SDK的程式碼
Dynamic Links SDK的程式碼

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

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


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

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

點下右邊的點點點
點下右邊的點點點

會出現一個選單,點擊「連結預覽(偵錯)」:

點擊連結預覽(偵錯)
點擊連結預覽(偵錯)

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

縮網址轉址部份的樹狀圖
縮網址轉址部份的樹狀圖

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

有錯誤訊息的狀況
有錯誤訊息的狀況

5 看分析數據

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

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

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

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

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

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

可以看到圖表(點擊看原圖)
可以看到圖表(點擊看原圖)

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


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

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

Summary
Firebase Dynamic Links 從後台建立縮網址
Article Name
Firebase Dynamic Links 從後台建立縮網址
Description
本篇大綱:Firebase Dynamic Links 縮網址服務。從後台建立Google網域的縮網址。建立縮網址3+2步驟。1 Firebase上設置啟用Dynamic Links。2 設立轉址白名單。3 在頁面中埋入Dynamic Links SDK。4 檢查有沒有成功建立動態網址。5 看分析數據
Augustus
Let's Write
Let's Write
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言