Google Analytics 事件追蹤設定 - Let's Write

Google Analytics 事件追蹤，就是我們常聽到的GA 事件。

簡單來說就是紀錄使用者在頁面上做了哪些事？常見的有紀錄某個按鈕的點擊量、頁面捲動的深度、 ... 跳至主要內容 GoogleAnalytics事件追蹤設定 2022-07-062019-08-14/August 本篇大綱 什麼是GoogleAnalytics事件追蹤會埋GAEvent的好處GA事件的3+1個要素事件類別category事件動作action事件標籤label事件值value事件會影響跳出率埋事件追蹤程式碼gacodegtagcode案例示範 Englishversion:GoogleAnalyticsEventtrackingsettingup 什麼是GoogleAnalytics事件追蹤 GoogleAnalytics事件追蹤，就是我們常聽到的GA事件。

簡單來說就是紀錄使用者在頁面上做了哪些事？常見的有紀錄某個按鈕的點擊量、頁面捲動的深度、影片多少人看完、報名表單多少人進行到哪一步……等等，通常活動頁、電商網站最常被行銷或企劃人員要求要埋GA事件。

會埋GAEvent的好處 埋GA事件是進階使用GA的基本功，當你會埋GA事件後，另外2個功能也就跟著會了，因為這2個功能也是從事件裡去整理資料並呈現。

這2個功能就是： 自訂維度電商報表 自訂維度的使用在「GA自訂維度的應用分類之下的文章成效」這篇有寫。

電商報表的話以後有時間再寫。

埋GA事件是主動跟GA溝通的方式，如果平常有在用GA，就一定要會。

本篇是GA3的寫法，如果用了GA3的朋友想轉移到GA4，可看這篇： GA4事件：GA3事件轉移，及如何查看完整事件報表 這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 GA事件的3+1個要素 GA事件有3個必要的值，跟1個選填的值，如果你是行銷/企劃想讓工程師埋事件，或是工程師要幫頁面埋事件，3個必要的值就一定要給，分別是： 事件類別category事件動作action事件標籤label 另外一個選填的是： 事件值value 類別、動作、標籤要給什麼值？完全要看網站維運者想怎麼看GA的事件報表，沒有一定說有固定的規則在。

以下的事件報表範列、截圖，都是來自於Google提供的示範帳戶。

示範帳戶很有趣，即便你沒有自己的網站可以讓你實際看GA的數據，但用這個示範帳戶，就可以有大量的數據去使用。

這些數據的資料還都是真實的，是它們電商網站GoogleMerchandiseStore的資料，有些很少有實際數據的報表，像GoogleAds，也可以從示範帳戶中看到。

建議剛開始學GA的大大們可以加入示範帳戶。

事件類別category 進到GA後，點「行為」->「事件」->「總覽」，就可以看見事件報表： GA事件報表，截圖來源：GoogleDemoAccount 報表預設顯示的數據就是事件類別，事件類別就是一個匯總，是事件的總合，因此不能亂取。

就很像我們一般在存資料時的資料夾名稱，我們會亂取嗎？不太會，因為亂取以後就很難找到要的資料。

這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝 實務上，假設今天要埋事件的是一個活動頁，頁數少、走期短，那事件類別就可以取這個活動的名稱，像是：2019spring_event、201908member_event。

這樣看報表時，就可以直接點進這頁的事件報表看裡面的數據。

如果是針對整個網站的話，就要比較費工了，因為整個站可以有很多種分類，比方從導覽列分、頁面分、廣告分、產品分……這就是網站維運者跟行銷們要去思考的。

事件動作action 動作從名稱上聽就知道，它是紀錄這個事件的行為，從示範帳戶的報表上可以看到： 示範帳戶事件動作報表 比較多在紀錄的是Click事件，另外像加入/移除購物車、促銷的點擊也有，這兩個就是電商報表用的，事件報表一併整理出來。

事件，是使用者在頁面上做了某件事後，頁面主動發送給GA的，因此是利用程式碼去發送。

所以事件動作跟JavaScript的事件有很大的關係。

JavaScript的事件有蠻多種的，可以參考來設成GA事件，如： click：點擊focus/blur：進入/離開表單的某個欄位change：表單某個欄位值有變動key*：使用者按了鍵盤某個按鍵mouse*：使用者用滑鼠滑到了某個區域resize：視窗大小有變動scroll：捲動視窗submit：提交某個表單 這個就是列出個大概，拿來當事件動作的參考，實際的使用要跟工程師們討論，看在什麼動作之下埋入什麼事件。

事件標籤label 這個GA文件上是歸為建議要填的選填項目，在實際應用時，建議一定要填。

看一下GA事件報表就可以知道為什麼一定要填： 示範帳戶事件標籤報表 事件類別、事件動作是大分類，標籤就是小分類。

就很像你埋了以下事件： 事件類別：寶可夢事件動作：捕捉 然後呢？如果行銷人員問你這一千次的捕捉，哪一隻被捉的比較多，是皮卡丘還是伊布？你就會答不出來，因為沒有紀錄到細項。

事件標籤label就是讓你紀錄每個事件的細項用。

這邊補充說明一下，在報表裡，「標籤」是寫「活動標籤」，而本文寫成「事件標籤」是為了好理解。

如果照寫成活動標籤，覺得會容易誤會是活動報表還什麼的，會覺得跟事件無關。

記得平常看報表時還是要找「活動標籤」。

如果看一下官方文件給的例子，就會更清楚事件標籤的必填性： 類別：「影片」，動作：「播放」，標籤：「亂世佳人」類別：「影片」，動作：「播放」，標籤：「頑童流浪記」 所以剛寶可夢的例子，埋的事件就可以寫成： 類別：「寶可夢」，動作：「捕捉」，標籤：「皮卡丘」類別：「寶可夢」，動作：「捕捉」，標籤：「伊布」 這樣之後看報表時就分得出事件之下，哪一隻的互動比較多了。

事件值value 這個是非必填的項目，而且能接受的值是數字，也不接受負數。

照官方給的範例，比方有人看影片按下暫停時，可以把暫停的秒數設成值。

或者使用者把商品加入購物車時，可以把商品的金額設成值。

事件會影響跳出率 在進到下一段埋事件的程式碼之前，要先說事件會影響跳出率這段，因為這會牽涉到埋碼的參數。

跳出率指的是，使用者進到第一個頁面，沒做任何的互動就離開，這就算在跳出率中。

而GA事件會算進互動裡，也就是說，即便使用者進到這個頁面，雖然沒進到其他頁面，但有做了點擊、捲動等設定的事件，就算是有互動，因此就不會算在跳出率裡。

官方文件也說： 假設您有某個內含影片播放器的網頁跳出率一直偏高，且您未在該網頁中導入「事件」評估。

如果您之後為該播放器設定「事件」評估，可能會發現該網頁的跳出率下降，這是因為Analytics(分析)會記錄使用者與播放器的互動。

請務必注意，凡是在網頁載入時自動執行的「事件」評估，都會導致網頁的跳出率為零。

導入方面的注意事項對跳出率的影響 這段意思就是說，如果使用者進到第一個頁面，頁面就設定了執行某個事件，例如就執行「捲動深度是0」的事件，或是「某個廣告曝光+1」的事件，那就算使用者沒進到其他頁面就關掉視窗，也不會算進跳出率裡，這頁的跳出率會是0，因為使用者有執行事件了。

如果要設定事件不會影響跳出率，就是即便執行事件了，也不算進互動裡，那就要把這個事件的「非互動事件」設為true，這樣就算使用者一進來觸發了事件，而且沒進到其他頁就關掉視窗，一樣會算在跳出率中。

設定非互動事件的方式將一起跟埋code寫進下一段。

埋事件追蹤程式碼 埋事件追蹤程式碼有2種方式： 直接寫程式碼用GoogleTagManager（代碼管理工具）來建立事件 由於Augustsu是前端工程師，直接寫程式是最快的，就不用在GTM上點來點去，因此本篇就提供寫程式碼的方式。

用GTM的附上官方說明，請看這：GoogleAnalytics(分析)事件 寫程式碼的部份有2種，主要看埋的GA追蹤碼是哪一種：ga、gtag。

這從追縱碼上可以看到，像gtag的話就會在程式碼裡看見gtag： gtag追蹤碼 現在GA預設提供的追蹤碼都是gtag了，本篇ga、gtag兩個都會寫。

gacode ga使用事件的程式碼如下： ga('send','event',{ eventCategory:'事件類別', eventAction:'事件動作', eventLabel:'事件標籤', eventValue:'事件值' }); 也可以簡寫成： ga('send','event','事件類別','事件動作','事件標籤','事件值'); 如果要設定成非互動事件，就是這樣： ga('send','event','事件類別','事件動作','事件標籤','事件值',{ nonInteraction:true }); *事件值非必填，可以不寫。

gtagcode gtag使用事件的程式碼如下： gtag('event','事件動作',{ 'event_category':'事件類別', 'event_label':'事件標籤', 'value':'事件值' }); 如果要設定成非互動事件，是這樣： gtag('event','事件動作',{ 'event_category':'事件類別', 'event_label':'事件標籤', 'non_interaction':true }); 另外，gtag有提供一些預設事件，預設事件表可以看說明文件： DefaultGoogleAnalyticsEvents *事件值非必填，可以不寫。

案例示範 這邊提供一個案例，假設有一個提供檔案下載的頁面，下載按鈕的id是btn-download，想要知道有多少人點擊了下載按鈕，可以這樣寫： varbtnDownload=document.getElementById('btn-download'); btnDownload.addEventListener('click',function(){ gtag('event','download_click',{ 'event_category':'download', 'event_label':'最強攻略下載' }); },false); 這個是基本的使用方式。

如果想知道的是廣告的點擊，GA有一個可以換算CTR的，這是電商報表的其中一個功能，使用方式請參考這篇： GA報表：電子商務內部宣傳報表 最後附上官方說明文件的連結：「事件」簡介 收藏此筆記：FacebookTwitterTelegramPocket電子郵件列印 看過本篇的人也看過： SummaryArticleNameGoogleAnalytics事件追蹤設定Description本篇大綱：什麼是GoogleAnalytics事件追蹤、會埋GA事件的好處、GA事件的3+1個要素、事件類別category、事件動作action、事件標籤label、事件值value、事件會影響跳出率、埋事件追蹤程式碼、ga、gtag、案例示範Augustus Augustus Let'sWrite Let'sWrite https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg 以下是留言，但關於留言的部份必需先讓你們知道： 本站的文章都是August因為覺得有趣，才會實作並整理成筆記文而後進行發表。

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

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

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

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

搜尋: Translate 简体中文繁體中文English日本語 最新文章 OSM+Leaflet學習筆記3：定位、全螢幕、小地圖、列印、客製選單 Javascript，XML轉JSON OSM+Leaflet學習筆記2：移動中心點、抓目前地點 OSM+Leaflet學習筆記1：建地圖、marker、事件、換圖層 製作一個Hugo+TailwindCSS初始檔 CLI學習筆記 表單驗證：中文姓名、身分證、手機條碼、生日、信箱、手機、選擇縣市 用原生JavaScript做一個簡單的抽獎功能頁面 大家都在看WebSocket基本介紹及使用筆記用MicrosoftClarity網站分析工具，觀察使用者行為如何用GoogleSheets/Excel當作資料庫Vue.js3CompositionAPI基本學習筆記-1：Ref、Props、watch、生命週期Google表單，輸入ID後自動帶入其它欄位資料LIFFv2基本使用筆記及範例GoogleMapsAPI學習筆記-1：地圖、標記、客製樣式用reCAPTCHAv3來做非機器人驗證 請作者一杯咖啡？ 寫文章需要咖啡提神，回答問題需要時間及心力。

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

中杯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）