GA工具 Google Analytics Debugger 介紹及使用

GA工具 Google Analytics Debugger 介紹及使用

Google Analytics Debugger 解決了什麼問題

這篇要介紹一個在用GA時的好工具:Google Analytics Debugger

他是一個擴充功能,有開源碼,在Chrome、Firefox、Opera的擴充功能上可以找到並免費安裝。

為什麼要推薦這個工具呢?因為跟下一篇要寫的文章有關:

如果頁面有id=”ga”,用gtag埋google analytics會收不到流量

這個工具在debug的過程很有用。

另外還有一個情境,應該是身為前端工程師會遇到的,至少本人就遇過5次。

當你朋友知道你是工程師,還會用GA,有時就會被問到一個問題:

「幫我看一下這個頁面有沒有埋GA?」

好,身為一個工程師,在不知道 Google Analytics Debugger 這個工具以前,大概就是打開頁面的原始碼,然後找GA code。

但這會有一個問題,很多站現在都是用GTM在管理埋code這件事的,如果你只看到頁面上有GTM的code,但沒看到GA code,你要怎麼確定頁面上真的有埋或沒埋?

這就是這個工具第一個好用的地方,它可以告訴你這個頁面有沒有放GA。

甚至,也可以告訴你GA在這頁做了什麼事,只是單純傳page view而己?還是有執行事件?

Google Analytics Debugger這套工具就是幫你解決這個問題。(以下簡稱GA Debugger)

相關文章:Google Analytics 事件追蹤設定

安裝 Google Analytics Debugger

用Chrome打開這頁:

https://chrome.google.com/webstore/detail/google-analytics-debugger/jiokjpcfnipnicblkgdklknjjeohnfln

附上另外2個瀏覽器的連結:FirefoxOpera

會看到頁面上有一個「加到Chrome」的按鈕,按下去就行了,要確認權限也是按新增就行了。

擴充功能 Google Analytics Debugger
擴充功能 Google Analytics Debugger

安裝成功後,在網址列的右邊,就會看到一個很像是狗骨頭的圖案,有看到就是安裝成功:

就真的很像狗骨頭
就真的很像狗骨頭

使用 Google Analytics Debugger

在你想要查有沒有埋GA的頁面上按下滑鼠右鍵,選擇「檢查」,windows系統的話可以直接按下「F12」,就會出現開發人員工具的項目。

註:以下資料截圖都來自於Google Demo Account的 Google Merchandise Store

項目最上面的選單,在最右邊會看到一個「GA Debugger」:

開發人員工具上的GA Debugger
開發人員工具上的GA Debugger

如果沒看到的話,是因為視窗比較小,被藏在「>>」這個選單裡,按下「>>」就可以看到:

開發人員工具,在>>裡的GA Debugger
開發人員工具,在>>裡的GA Debugger

按下去以後,就可以看到 GA Debugger 的使用介面:

GA Debugger使用介面
GA Debugger使用介面

左上角的那個錄製黑點按鈕,按下去讓它變紅色的,就代表GA Debugger開始運作了:

錄製按鈕由黑點變紅點,代表開始運作
錄製按鈕由黑點變紅點,代表開始運作

運作後,只要重新整理頁面一次,頁面有埋GA的話就會看見有數據出現,如果重整一次沒看見東西,那就再重整一次,如果重整了3次以上都沒有東西,就代表這頁沒有埋GA code。

這邊是有數據的截圖:

有數據的狀況
有數據的狀況

上面列的「UA-XXXXXXXXX-X」就是指哪一個GA收到資料,點擊每一個就可以看到送了什麼資料給GA:

GA Debugger上看到的GA數據
GA Debugger上看到的GA數據

一般pageview是最基本會看到的,這套工具還可以看到其他資料,比方事件、頁面加載時間:

可以看見事件、頁面加載時間
可以看見事件、頁面加載時間

根據他們文件上的說明,GA Debugger可以偵測到以下GA功能:

  • Page views
  • Events
  • E-commerce transactions
  • User timings
  • Social interactions
  • Custom variables
  • Custom dimensions
  • Custom metrics
  • Content groups
  • Campaign tracking

一個開源免費的工具可以這麼實用,真心覺得是佛心來的。

這套工具推薦給大家,以後有人在問說「這頁有沒有GA」,就可以很肯定的回答了。


Summary
GA工具 Google Analytics Debugger 介紹及使用
Article Name
GA工具 Google Analytics Debugger 介紹及使用
Description
GA工具 Google Analytics Debugger 介紹及使用 本篇大綱:Google Analytics Debugger 解決了什麼問題、安裝 Google Analytics Debugger、使用 Google Analytics Debugger。
Augustus
Let's Write
Let's Write
Publisher Logo

2 Replies to “GA工具 Google Analytics Debugger 介紹及使用”

  1. 這個好好用!!企劃人忍不住做了一張圖永存桌面~~https://upload.cc/i1/2019/10/02/W3B9w1.png

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *