如何自動化測試 Google Analytics (GA) 的正確性

GA 測試是團隊想要解決的議題

Google Analytics (GA) 是 Google 提供的網站分析工具。透過 GA 能夠方便了解使用者對於網站的瀏覽行為。因此,在 LINE TODAY 服務中,GA 作為分析內容是否符合使用者需求,就扮演重要的分析角色。

對於 LINE TODAY 的團隊而言,GA 數據是一個很重要的指標,且為了確保 GA 數據能夠正確的被傳送到 Google Analytics Server,傳送的資料以往都是利用人工的方式進行檢查。但是 LINE TODAY 的服務設計了許多 GA 客製化指標,其中的數據意義將會根據使用者行為或是讀取頁面等操作有不同的組合,因此在人工測試檢查上非常耗時,而且可能會有遺漏的狀況發生。

為了確保每次 LINE TODAY 釋出新版本前,能夠更快速的驗證 GA 是否被正確地傳送及其正確性,LINE TODAY 的測試團隊開發了監測工具並搭配 Mitmproxy 的使用,不但可以透過全自動化的方式模擬使用者行為來監測 GA 數據是否被正確地傳送,測試人員也可以利用此工具,使用半自動化的方式,在操作的同時,也可以快速地的比對送出 GA 的資料是否符合相對應的規格,來達到快速驗證。

監測工具的架構與應用

目前能夠透過 Proxy 監控的程式非常多,但不同於 Charles 或 Wireshark 等,Mitmproxy 能夠利用自行開發的 addon 來監測想要觀察的資訊。下圖為自動化基礎架構,當中包含了 Mitmproxy 以及自行開發的 addon ,透過該架構, LINE TODAY 團隊可以快速濾出所需的 GA 數據,並且加以驗證。

 

步驟 說明
步驟 1 – 步驟 2 用戶瀏覽 LINE TODAY
步驟 3 用戶端觸發瀏覽網頁事件,發送 LINE TODAY GA pageview 數據
步驟 4 透過Addon Python script,所有 GA 流量將被濾出及紀錄,這些紀錄稍後將作近一步的分析
步驟 5 Mitmproxy 繼續傳遞 GA 數據至 Google Analytics Server

如何透過工具來監測 LINE TODAY 的 GA 數據

半自動化測試

為了能夠及時地驗證 GA 數據傳送的正確性,必須利用 Mitmproxy 搭配自行開發的 addon 來擷取我們所需要的資訊,這樣的好處是測試人員能夠利用工具在視窗上即時執行 GA 的驗證檢查。

在本文中一直提到的 addon 到底是什麼? 於官方文件中所述,addon 除了能夠修改 request 及 response 的 header 及 body,還能夠決定欲返回的HTTP status code。在本篇中,addon 主要的功能是將所有 requests 條件式的過濾後,進一步取出我們需要的資料.請看下方 sample code 的說明:

from mitmproxy import ctx
import mitmproxy.log
import mitmproxy.proxy.protocol
 
class Tracker:
    def __init__(self):
    ..........
    ....
    ......
 
    def request(self, flow):
        logRequest = None
         
        # 1. Which event types do you want to monitor, ex: pageview and event
        self.event_type = ['pageview', 'event']
         
        # 2. Add custom dimensions at here, there are base on your requirement.
        checkCds = ['type', 'dp', 'cd17', 'cd4']
         
        # 3. Parsing logs of sending to Google Analytics server
        for a_key in flow.request.query.keys():
            if ('google-analytics' in flow.request.url):
                val = flow.request.query[a_key]
                if (a_key == 'type' and val in self.event_type):
                    ctx.log.info('Host: ' + flow.request.url)
                    ctx.log.info('%s = %s ' % (a_key, val))
                    logRequest = True
                elif (a_key in checkKeys and logRequest):
                    ctx.log.info('%s = %s ' % (a_key, val))
 
    def done(self):
        """
            Called when the addon shuts down, either by being removed from
            the mitmproxy instance, or when mitmproxy itself shuts down.
        """
 
addons = [
    Tracker()
]

#1 – 使用者可以自行宣告想要擷取的 value 是什麼,例如:我們想要知道 GA 是否有送出 pageview 或是 event 這兩類的 type。

#2 – 當擷取出我們想要的 type 之後,針對 LINE TODAY GA 中欲監測的客製化指標做進行進一步的濾出。

#3 – 根據使用者需要的條件進行過濾,並顯示出至 console 上。

另外,該工具也提供了另一個指令 mitmdump 來進行類似 tcp dump 的功能,搭配使用 addon 來擷取記錄我們所需要的資訊: (Mimtproxy 提供很多 options 可供使用者決定監控行為,詳細可參考官方網站的介紹。)

$ mitmdump -s [Your_Parser_File].py -p 8081 --set flow_detail=0

如下圖所示,透過自行開發的 addon 可以即時監看 real time requests,來確認 GA 是否被正確地傳送並且傳送正確.

# User click movie main page tab, the click event would be triggered.
 
--------------------------------------------------
Event sends to GA
--------------------------------------------------
Host: https://www.google-analytics.com/collect?v=xxxxx&t=event&_s=14&dl=https%3A%2F%2Ftoday.line.me%2FTW&ul=en-us&de=UTF-8&dt=LINE%xxxxx&tid=UA-xxxxxxxxx-1&_gid=&z=xxxxxxxxx
type = event
ea = portal_bar_click
el = bar_movie_click
cd17 = ios
cd4 = TW
..........
....
......
 
 
# The pageview event would be requested after event sent out.
--------------------------------------------------
Pageview sends to GA
--------------------------------------------------
Host: https://www.google-analytics.com/collect?v=1&_v=j68&a=xxxxxxxx&t=pageview&_s=15&dl=https%3A%2F%2Ftoday.line.me%2FTW&dp=TW_portal_%E9%9B%BB%E5%BD%B1&ul=en-us&de=UTF-8&dt=LINE%20TODAY&sd=24-bit&sr=2560x1440&vp=2560x791&je=0&_u=SCCAAEABE~&jid=&gjid=&tid=UAxxxxxxxxx-1&z=xxxxxxxxxxx
type = pageview
dp = TW_portal_movie
cd17 = ios
cd4 = TW
..........
....
......

 

全自動化測試

為了在每次上版前能夠透過測試驗證當次釋出版本 GA 的正確性,我們把 addon 的設計與現在 LINE TODAY 測試團隊所使用的的自動化測試架構 (Robot Framework) 做整合,將整個測試重點放在最貼近使用者的操作流程。在這些流程中,針對 GA 數據的傳送正確性,可在每次自動化測試個過程中得到驗證。

步驟 說明
步驟 1 呼叫一 Process 執行 Mitmdump proxy
步驟 2 呼叫另一 Process 啟動 Selenium Webdriver
步驟 3 透過 Selenium Webdriver 啟動 Web browser
步驟 4 – 步驟5 瀏覽器開啟 LINE TODAY 頁面以觸發瀏覽網頁事件,並且發送相關 GA 數據
步驟 6 藉由 Addon Python script,所有 GA 流量將被濾出及紀錄,這些紀錄稍後將作近一步的分析。測試完成後, Addon Python script 將會蒐集相關 GA 數據並記錄於 GA Log 檔中。
步驟 7 Mitmproxy 繼續傳遞 GA 數據至 Google Analytics Server
步驟 8 比較產生之 GA Log 檔及正確之 GA Log 檔,完全相同即表 GA 於測試中發送正確。

 

Verify GA Pageview Event in PC Web
    Start Mitmdump Proxy Process
    # Here you can put the keywords to nevigate all the pages on your website
    # ..
    # ..
    # ..
    [Teardown]    Run Keywords    Terminate Mitmdump Proxy Process   Compare Two PC PV Files

範例表示透過 Mitmdump 與 Robot Framework 整合的 sample code.我們設計了 proxy process 的 library 搭配 selenium 來達到 proxy setting,這樣的設計是為了確保測試時可以立即將 proxy host 設定到測試機器上。

# Keyword
Start Mitmdump Proxy Process
    ${result} =  Start Process    mitmdump -s YOUR/FILE/PATH/xxx.py -p 8081 --set flow_detail=0 > in.txt    shell=True

當進行自動化網頁測試時,所有的 requests 便會透過 addon 自動擷取並收集,最後進行驗證比對,以確保所有測試的流程所產生出的 GA 數據都被正確的發送。

結論

GA 有助於分析自家產品的使用情況,為了能夠精確的掌握 LINE TODAY 使用者用戶的喜好和行為, GA 的傳送就顯得格外重要。以往在測試過程中,曾發生 GA 遺漏或是送出資料不正確但未察覺。透過 LINE TODAY 開發的 addon,不但可以透過半自動化的方式即時確認 GA 傳送狀況,也可以利用全自動化測試方式,來確認每個受測流程都有正確的傳送出 GA ,而且傳送出的資訊也是正確的。

Reference

  1. Mitmproxy: https://mitmproxy.org/
  2. Robot framework process: http://robotframework.org/robotframework/latest/libraries/Process.html

Related Post