GA 工具Google Analytics Debugger 介紹及使用 - Let's Write

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

這是廣告，點擊一下可以幫本站多個 ... 跳至主要內容 GA工具GoogleAnalyticsDebugger介紹及使用 2021-08-272019-08-17/August 本篇大綱 GoogleAnalyticsDebugger解決了什麼問題安裝GoogleAnalyticsDebugger使用GoogleAnalyticsDebugger GoogleAnalyticsDebugger解決了什麼問題 這篇要介紹一個在用GA時的好工具：GoogleAnalyticsDebugger 他是一個擴充功能，有開源碼，在Chrome、Firefox、Opera的擴充功能上可以找到並免費安裝。

為什麼要推薦這個工具呢？因為跟下一篇要寫的文章有關： 如果頁面有id=”ga”，用gtag埋GoogleAnalytics會收不到流量 這個工具在debug的過程很有用。

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

當你朋友知道你是工程師，還會用GA，有時就會被問到一個問題： 「幫我看一下這個頁面有沒有埋GA？」 好，身為一個工程師，在不知道GoogleAnalyticsDebugger這個工具以前，大概就是打開頁面的原始碼，然後找GAcode。

這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 但這會有一個問題，很多站現在都是用GTM在管理埋code這件事的，如果你只看到頁面上有GTM的code，但沒看到GAcode，你要怎麼確定頁面上真的有埋或沒埋？ 這就是這個工具第一個好用的地方，它可以告訴你這個頁面有沒有放GA。

甚至，也可以告訴你GA在這頁做了什麼事，只是單純傳pageview而己？還是有執行事件？ GoogleAnalyticsDebugger這套工具就是幫你解決這個問題。

（以下簡稱GADebugger） 相關文章：GoogleAnalytics事件追蹤設定 安裝GoogleAnalyticsDebugger 用Chrome打開這頁： https://chrome.google.com/webstore/detail/google-analytics-debugger/jiokjpcfnipnicblkgdklknjjeohnfln 附上另外2個瀏覽器的連結：Firefox、Opera。

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

擴充功能GoogleAnalyticsDebugger 安裝成功後，在網址列的右邊，就會看到一個很像是狗骨頭的圖案，有看到就是安裝成功： 這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 就真的很像狗骨頭 使用GoogleAnalyticsDebugger 在你想要查有沒有埋GA的頁面上按下滑鼠右鍵，選擇「檢查」，Windows系統的話可以直接按下「F12」，就會出現開發人員工具的項目。

註：以下資料截圖都來自於GoogleDemoAccount的GoogleMerchandiseStore。

項目最上面的選單，在最右邊會看到一個「GADebugger」： 開發人員工具上的GADebugger 如果沒看到的話，是因為視窗比較小，被藏在「>>」這個選單裡，按下「>>」就可以看到： 開發人員工具，在>>裡的GADebugger 按下去以後，就可以看到GADebugger的使用介面： GADebugger使用介面 左上角的那個錄製黑點按鈕，按下去讓它變紅色的，就代表GADebugger開始運作了： 錄製按鈕由黑點變紅點，代表開始運作 運作後，只要重新整理頁面一次，頁面有埋GA的話就會看見有數據出現，如果重整一次沒看見東西，那就再重整一次，如果重整了3次以上都沒有東西，就代表這頁沒有埋GAcode。

這邊是有數據的截圖： 有數據的狀況 上面列的「UA-XXXXXXXXX-X」就是指哪一個GA收到資料，點擊每一個就可以看到送了什麼資料給GA： GADebugger上看到的GA數據 一般pageview是最基本會看到的，這套工具還可以看到其他資料，比方事件、頁面加載時間： 可以看見事件、頁面加載時間 根據他們文件上的說明，GADebugger可以偵測到以下GA功能： PageviewsEventsE-commercetransactionsUsertimingsSocialinteractionsCustomvariablesCustomdimensionsCustommetricsContentgroupsCampaigntracking 一個開源免費的工具可以這麼實用，真心覺得是佛心來的。

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

收藏此筆記：FacebookTwitterTelegramPocket電子郵件列印 看過本篇的人也看過： SummaryArticleNameGA工具GoogleAnalyticsDebugger介紹及使用DescriptionGA工具GoogleAnalyticsDebugger介紹及使用本篇大綱：GoogleAnalyticsDebugger解決了什麼問題、安裝GoogleAnalyticsDebugger、使用GoogleAnalyticsDebugger。

Augustus Augustus Let'sWrite Let'sWrite https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg 以下是留言，但關於留言的部份必需先讓你們知道： 本站的文章都是August因為覺得有趣，才會實作並整理成筆記文而後進行發表。

如果留言是希望把Demo改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子， Sorry~除非那修改是August也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。

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

😎 另外，公開信箱是為了讓金流驗證用， 因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。

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

搜尋: Translate 简体中文繁體中文English日本語 最新文章 製作一個Hugo+TailwindCSS初始檔 CLI學習筆記 表單驗證：中文姓名、身分證、手機條碼、生日、信箱、手機、選擇縣市 用原生JavaScript做一個簡單的抽獎功能頁面 Hugo學習筆記 YAML基本使用筆記 Plyr播放器使用筆記：控制項、取值、事件、改樣式、外部平台影片 Video.js使用筆記：中文介面、取值、事件、改樣式 大家都在看Google表單，提交後系統自動寄送回覆通知emailGoogleMapsAPI學習筆記-5：抓目前位置、計算到各點距離表單驗證：中文姓名、身分證、手機條碼、生日、信箱、手機、選擇縣市製作一個Hugo+TailwindCSS初始檔用LINEBotAPI建立[email protected]圖文選單如何用GoogleSheets/Excel當作資料庫GA3、GA4的6個不同之處用reCAPTCHAv2來做非機器人驗證 請作者一杯咖啡？ 寫文章需要咖啡提神，回答問題需要時間及心力。

如果覺得本站文章對工作有幫助、技術有進步，或是問題有得到解答，歡迎請本站喝杯咖啡。

中杯60元、大杯90元，加碼特大杯120元。

你請的每一杯咖啡，對本站來說都是莫大鼓勵:) 請喝咖啡（台灣）Buymeacoffee（Foreign） Y**g 哈*哈**啦 M** L**ce**tT***g H**l*y He**y 小*瓜 ki*******37 A**y S**Y**C** R****_L** I**n M******C**u R***y 曾* M** L**O 放個廣告賺點養主機的$$，謝謝 Let’sWrite來訪人數 位大大相挺，謝謝。

（如何製作來訪人數？） 訂閱新文章通知 直接加入Telegram的頻道，有最新文章時會收到廣播通知： DMCAProtection放個廣告賺點養主機的$$，謝謝 Let'sWrite 前端工程師August的學習筆記—solvingproblems,insimpleways. API Front-End Google Bot Vue PWA WordPress Followus FB Telegram GitHub IG Twitter 網站地圖 隱私權政策 RSS [email protected]（金流驗證用） 請喝咖啡（台灣） Buymeacoffee（Foreign）