前言

像是電商網站或者形象官網，店家通常都會想知道，自己網站的流量狀況如何？使用者多半透過什麼裝置瀏覽？等等，擁有這些數據就能更有方向地對網站進行優化，像是後續的宣傳製作（例如：廣告圖設計、產品篩選）會更精準，也能提升引流與轉換效果。

另一方面，如果發現某個頁面跳出率太高，就可以回頭檢視內容或設計排版是否需要改善，這個時候——行銷好幫手 Google Analytics（GA）就能派上用場啦！本篇會帶大家認識如何在網站設定GA，並透過 GA 觀察使用者數據。

建立 GA 帳戶取得追蹤碼

1. 先建立帳戶，輸入帳戶名稱，並勾選帳戶資料共用設定，建立完在管理介面「Analytics 帳戶」列表會顯示帳戶名稱。
   

2. 接著建立資源，填寫屬性名稱後，會顯示在管理介面「資源和應用程式」列表中，同樣也是為了辨識用途。同時需設定報表所使用的時區與貨幣。
   

3. 選擇商家類別與員工數量。
   

4. 設定業務目標，建議請勾選「瞭解網站和/或應用程式流量」與「查看使用者參與度和留存率」，完成後按「建立」。
   

5. 閱讀服務條款後點擊「我接受」。
   

6. 選擇「網站」，會彈出「設定資料串流」需填寫網站網址、串流名稱，完成後點擊「建立並繼續」。
   

7. 這樣就拿到GA追蹤碼，可以準備嵌入到專案中囉🎉！
   

專案加入nuxt-gtag

1. 由於 Nuxt 是基於 Vue.js 的全端應用框架，專案裡的頁面與結構都是透過 .vue 檔案及內部的模板機制動態產生出來，GA 追蹤碼需要插入在正確的渲染流程中，頁面不是由單純的 .html 建立，所以我們無法直接編輯 .html 檔案來插入 GA 追蹤碼，因此需要使用官方提供的方式進行整合。

2. 所以我們來安裝官方提供的👉Nuxt gtag 模組，開啟專案終端機，輸入以下指令：

npx nuxi@latest module add gtag

3. 安裝完成，開啟 nuxt.config.ts 在modules中加入 nuxt-gtag，並在屬性名稱 gtag 設定追蹤 ID。

export default defineNuxtConfig({
	....
	modules: ['...', 'nuxt-gtag'],
	....
	gtag: {
		id: '<填入id G-XXXXXXXX>'
	}
})

4. 設定完成後，只要造訪網站做一些事件操作，例如：點擊頁面、使用不同裝置訪問等等。過一段時間後再前往 Google Analytics 管理後台查看，若有出現使用者、即時瀏覽、事件紀錄等使用者活動記錄，就代表已成功嵌入 GA 追蹤碼。
   

GA報表事件說明

從報表觀察網站獲取的流量從哪來，可以到側邊選單「報表」→ 找到業務目標分類展開，點擊產生待開發客戶選擇「流量開發」。

在下方報表中，可以得知在8月1日這天總共有7個工作階段（7 次進站），其中有4個來自推薦流量（Referral）＝ 從其他網站點擊連結而來；另外3個來自直接流量（Direct）＝ GA 無法判斷來源，有可能是使用者直接輸入網址、儲存在書籤做點擊等方式進到網站。

這代表「有一半以上的使用者是從外部網站連結進來的，而不是直接打網址。」值得注意的是，雖然 Referral 佔比較高，但 Direct 使用者更積極互動、停留時間更久，因此如果想再進一步提升網站流量，可以考慮研究 Direct 流量的來源。

如果想知道使用者最常從哪個頁面進入，或在哪些頁面停留最久，可以到「到達網頁」報表查看。

如果想查看使用者都用什麼裝置來訪問網站，可以找到使用者分類，展開科技，點擊「總覽」。

報表中可看到用戶使用的作業系統、瀏覽器、裝置等，其中裝置類別會分為：

• mobile：手機
• desktop：桌機／筆電
• tablet：平板

知道這些資訊可以幫助我們做出網站優化判斷，例如：若大多用戶來自手機，做介面設計調整時，可以針對行動版排版與按鈕設計。若平板使用率極低，可考慮降低平板介面的維護成本，將開發重心轉移到使用率更高的裝置。若多數用戶是 iOS 系統，則需留意某些 JS 功能在 Safari 的兼容性問題。

結語

GA 報表中呈現的每一項數據，都是來自用戶實際操作最直接的反饋。這些看似平凡的資料，卻能協助在「排除問題」、「優化體驗」、「節省開發資源」，甚至「精準鎖定行銷方向」。如果看完這篇介紹後，對於 GA 更有興趣，或者想深入了解該如何應用在實際工作場景中，推薦各位可以到 Skillshop 上學習，Google 提供了簡易易懂的中文課程，且課程學習完成後，也能報名考取 Google Analytics (分析) 認證，證照有效期限為一年，可以為自己職涯加分✨！
再來會講解關於 Git 的部份，這對專案開發與其他工程師協作是很重要的，敬請期待🤩。

參考資料與延伸閱讀

⑴ Google Analytics 使用工具來源
⑵ Nuxt gtag 參考來源
⑶ Skillshop