iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Mobile Development

關於 Flutter 開發的一些設計雜談系列 第 25

Day 25 - 追蹤使用者行為

  • 分享至 

  • xImage
  •  

常常我們在開發完功能之後,UX 設計師可能會想知道使用者如何使用這些功能,並建立漏斗來觀察每一個步驟的使用量。一種常見的方式在各個頁面中埋下分析追蹤碼,由此就可以追蹤使用者在每個頁面的使用晴望。為了完成這個功能,Flutter 開發者們常常會需要在各個頁面開啟時,埋下紀錄 Firebase Event 以紀錄使用者打開了這個頁面。

舉個例子

假設我們有一個頁面,我們可能會把追蹤碼埋在這個頁面的 initState 中。

it_img_25_1.png
https://dartpad.dev/?id=fff2ddf023791abf37fb2ac34fb6cd04

但是當我們頁面一多時,就會發現需要每一頁都要埋,著實有些麻煩。當我們想修改頁面的顯示或者 Event 紀錄方式時,都會修改到這個類別,也暗示這個類別違反了單一職責。頁面工作應該是負責顯示使用者需要的資料,而不是紀錄 Event。

使用 FirebaseAnalyticsObserver

所幸,Firebase Analytics 套件提供了一個稱為 FirebaseAnalyticsObserver 元件,使用這個元件,當頁面切換 Route 路徑變化時,元件就會幫我們紀錄事件。

it_img_25_2.png
https://dartpad.dev/?id=256f40433e970c7edfc77ff6b14c8a24

如此一來,我們就不需要辛苦的在每個一個頁面的 initState 紀錄事件,能把紀錄事件的職責交給 FirebaseAnalyticsObserver 元件,每個頁面的的職責也回歸單一。當我們想要排除一些頁面的事件紀錄時,也可以使用 routeFilter 來解決。

it_img_25_3.png
https://dartpad.dev/?id=2c4e2f3a65da38a8be7856fc501ccb1f

但是使用什麼服務來紀錄事件有許多選擇,甚至是自己實作。在這些情況下,我們就沒有好用 FirebaseAnalyticsObserver 元件可以使用了。

Route Observer

為了解決這個問題,我們可以仿造 FirebaseAnalyticsObserver 使用 Flutter 提供的 Route Observer,建立一個 EventLoggingRouteObserver 來幫助我們紀錄事件,並把它放進 MaterialApp 中。

![it_img_25_4.png](https://easylive1989.github.io/images/static/images/2022IThome/126%20-%20qWB504j.png
https://dartpad.dev/?id=e31de5f6efcd14138f919972010c5a8a

使用客製的 RouteObserver,還能讓我們有機會針對不同的頁面,增加不同的參數,讓我們能準確紀錄使用者行為。

it_img_25_5.png
https://dartpad.dev/?id=3aad943d59ef905d21ca60184dcc9031

當我們今天不需要紀錄頁面開啟/關閉事件時,我們也可以直接移除掉 RouteObserver 就好,而無需到每個頁面去移除紀錄事件的程式碼,也符合開放封閉的原則。

將事件紀錄封裝

大部分的 Firebase 套件,都使用 Singleton 模式。當我們想使用時,只要使用 FirebaseAnalytics.instance 就能使用方法。

FirebaseAnalytics.instance.logEvent(name: "event_name");

但是如果我們直接程式碼中呼叫 FirebaseAnalytics.instance,會讓使用的類別直接與 FirebaseAnalytics 相依。相信讀者們一定知道這會產生什麼問題,當我們想更換事件紀錄的方式時,就會忙著到所有使用到的類別修改。除此之外,當我們想進行單元測試時,也會因為 FirebaseAnalytics 而無法測試,因為會造成執行測試時,還是嘗試去尋找 Firebase 設定,但單元測試不會有這些東西,所以測試就壞了。

為了解決這些問題,我們可以使用前幾天提到的技巧:依賴注入。我們可以寫一個類別封裝 FirebaseAnalytics 並繼承 Analytics 介面。

it_img_25_6.png

然後把實作放進依賴注入框架中。

it_img_25_7.png

最後使用 Service Locator 取得 Analytics,並使用其紀錄事件。

it_img_25_8.png
https://dartpad.dev/?id=090270a32c7e1175d6e5e94f988c9796

結論

紀錄頁面開啟/關閉的事件是一種常見的事件紀錄,將紀錄事件的程式碼與畫面渲染的程式碼分開,能有效提升程式的可維護性。另外除了上述的事件之外,還有另外一種常見的事件紀錄情境是:當使用者點下某個按鈕時,我們也希望紀錄使用點擊了哪個按鈕,此時如果我們直接使用 FirebaseAnalytics.instance,會讓程式碼逐漸僵化,同時也失去可測試性,此時我們可以使用依賴注入解決,避免軟體漸漸變成硬體。


上一篇
Day 24 - 利用 Interceptor 處理 Token
下一篇
Day 26 - Flutter 例外的流程處理
系列文
關於 Flutter 開發的一些設計雜談30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言