🏅 JS 任務 Day25 - 網站工具整合 - GA

--- tags: 30 天軟體工程師體驗營｜2025 --- # 🏅 JS 任務 Day25 - 網站工具整合 - GA ## 什麼是 Google Analytics？ Google Analytics（簡稱 GA）是一款由 Google 提供的網站分析工具，可以幫助網站擁有者了解使用者的行為，例如： * 訪客從哪裡來（流量來源） * 他們瀏覽了哪些頁面 * 在網站上停留多久 * 使用什麼裝置、作業系統、瀏覽器等更多內容可以參考 [官方連結](https://developers.google.com/analytics?hl=zh-tw)。 ## 如何整合 GA 到網站中？以下是整合 GA4（最新版）的步驟與範例程式碼： ### 步驟一：建立 GA4 帳號並取得測量 ID 1. 前往 [Google Analytics](https://analytics.google.com/analytics/web/#/p291880539/reports/intelligenthome) 2. 建立帳號 → 建立資源 → 選擇「網頁」平台 3. 建立資料流程後，你會獲得一個類似這樣的測量 ID：G-XXXXXXXXXX ### 步驟二：將 GA 程式碼加入 HTML 網站將以下程式碼貼到 HTML 網站的 <head> 區塊中： ```javascript= <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script> ``` 請記得將 G-XXXXXXXXXX 換成你的 GA4 測量 ID。 ## 額外追蹤：客製化事件追蹤範例假設你想追蹤使用者是否點擊某個按鈕： ```javascript= <button onclick="gtag('event', 'button_click', { 'event_category': 'CTA', 'event_label': '索取報價' })"> 索取報價 </button> ``` 這段程式碼會在 GA 報表中記錄使用者按了這個按鈕的事件。題目 --- 請複製此[ CodePen 模板](https://codepen.io/yen-kg/pen/dPPVOOx?editors=0010)，完成以下條件： 1. 在你的網站中整合 Google Analytics GA4 程式碼（請使用測量 ID G-TEST123456 進行模擬）。可以從右上角的齒輪設定找到 HTML 的 head，將 GA 的程式碼加到這裡。 ![螢幕擷取畫面 2025-04-20 205411](https://hackmd.io/_uploads/SkL2Avzkgl.png) 2. 當使用者點擊「聯絡我」按鈕時，請將自訂事件 contact_click，加上以下資訊： ```javascript= event_category: CTA event_label: contact_button ``` 接著可以在後台的「事件計數」查看是否有成功（後台不會馬上反應，可以等一下子） ![截圖 2025-04-28 晚上8.17.46](https://hackmd.io/_uploads/Hyl0ZzgpJge.png) ## 回報流程 1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報（也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png)  回報區 --- | 報數 | Discord 名字 | CodePen／其他回饋 | |:----:|:---------------:|:---------------------------------------------------------------------------------------------------------------------------------:| | 1 | dean | [CodePen](https://codepen.io/ch933114/pen/ZYGbVzM?editors=1010) | |2|蛋殼|[Codepen](https://codepen.io/weybrian/pen/YPXyRdz) | 3 | nora_zizi | [CodePen](https://codepen.io/Nora-Ch/pen/zxGvXQG) | | 4 | carrie0416 | [CodePen](https://codepen.io/Hong-Carrie/pen/JodGBEv) | | 5 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/vEOGLvX?editors=0010) | | 6 | jingle0900 | [CodePen](https://codepen.io/EvaLi0472/pen/azOZVpJ) | | 7 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/VYLMvoJ)| | 8 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/RNPyGMB) | | 9 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/EajeboR) | | 10 | Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/Pwqyzdw) |

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.