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
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

Bot LINE

LINE Bot:用 Google Apps Script 建立簡易網站監測機器人

Analytics Google

用 GA Spreadsheet Add-on 製作網站訪客人數功能

Google Others

Google Top Heavy 演算法

Front-End

JavaScript 載入方式 defer、async

Forms Google

Google 表單,提交後系統自動寄送回覆通知 email

Vue

Vue Transitions 製作簡單的 Carousel / Slider / 輪播功能

Google Maps

Google Maps API 學習筆記 – 6:畫新冠肺炎分佈圖

Vue

Vue.js Transition 中用多個 v-if、v-show

API

Imgur API:upload, load 上傳、讀取 心得筆記

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
2 Comments
最舊
最新
Inline Feedbacks
看所有留言
summer
summer
2 年 之前

這個好好用!!企劃人忍不住做了一張圖永存桌面~comment image