Google Analytics 4（以下簡稱 GA4）是 Google 提供的網站數據分析工具，功能是收集品牌銷售數據並提供分析報表，是品牌經營必備資源。其中，SHOPLINE 與 GA4 為原生整合，並完成標準電商事件串連，只要將 GA4 串接完成，便可自動追蹤標準電商事件；若品牌期望追蹤更多「自定義事件」，搜集特定互動行為，則可透過 Google Tag Manager（以下簡稱為 GTM）埋設事件，並將此與 GA4 串接，GA4 就會開始收集你自訂的事件數據。本篇將完整介紹 GTM 常見應用案例給品牌做參考。
在開始之前特別說明，本篇文章僅作「範本參考」，「自定義事件」需在品牌的網站上埋設額外代碼，建議品牌主動驗證不同頁面運作是否正常。若設置了額外的自定義事件影響網站前台運作，SHOPLINE 團隊僅提供必要的諮詢。
文章目錄
Google Analytics 4（GA4）基本應用介紹
關於 SHOPLINE 與 GA4 串接，可以優先參考 《Google Analytics 4（GA4）追蹤碼設定》。
GA4 可以幫助品牌分析以下四大面向：
GA4 是 Google 提供的網站數據分析工具，能收集網站的各式數據並提供分析報表，並以「事件」作為分析核心。GA4 可以如偵探一般幫助品牌分析以下四大面向：
- 追蹤「使用者足跡」：進入品牌網站前，是誰推薦了顧客？（如：使用哪個關鍵字搜尋、哪個 FB 廣告）。
- 解密「身份特徵」：顧客的用戶輪廓（如：手機裝置、在哪個國家、年齡、性別）。
- 還原「現場行為」：將網店行為串成故事讓品牌更加了解顧客心理（如：顧客在網店做了什麼、點了哪顆按鈕）。
- 破解「成交關鍵」：分析使用者的購物行為是怎麼發生的，幫助品牌將此成功複製給更多顧客（如：看了哪些內容後成交）。
而 SHOPLINE 已原生整合 GA4 的標準電商事件，將 GA4 與 SHOPLINE 串接後，系統即自動開始收集關鍵的銷售流程數據。
自動追蹤事件包含（但不限於）：
| 事件名稱 | 事件代碼 |
|---|---|
| 瀏覽商品 | view_item |
| 加入購物車 | add_to_cart |
| 加入願望清單 | add_to_wishlist |
| 完成購買 | purchase |
繼續閱讀文章
Google Tag Manager（GTM）基本應用介紹
GTM 是一個標籤管理系統，讓品牌可以在不修改網站程式碼的情況下，設定和管理各種追蹤代碼。
在電商情境中，常用於追蹤 GA4 無法自動收集的特定用戶互動。將設定好的代碼與 GA4 串接後，GA4 就會開始收集這些您自訂的事件數據。
GTM 可以幫助品牌追蹤以下常見場景：
- 追蹤行銷活動 Banner 的點擊成效。
- 衡量社群媒體按鈕的點擊表現。
- 掌握目錄標題或特定網頁區塊的互動情況。
GTM 的使用方式可以想像為自動化設定，透過設定規則來自動執行任務。簡單說就是以「下指令」的方式來操作。主要包含三個核心元素：
| 元素 | 定義 | 範例 |
|---|---|---|
| 觸發條件（Trigger） | 「何時」該傳送事件 | 當點擊首頁 Banner 時 |
| 代碼（Tag） | 滿足觸發條件後，執行「什麼任務」 | 當達到觸發條件時，將事件傳送給 GA4 |
| 變數（Variable） | 傳送事件需要包含的「細節」 | 點擊 Banner 的 url 為何 |
從全球與台灣 AI 零售應用概況開始，結合流量獲取與企業 AI 轉型的深度洞察，帶領讀者快速瞭解零售 AI 的發展趨勢！
Google Tag Manager 串接設定
瞭解了基本定義後，該如何建立 GTM 帳號並與 SHOPLINE 串接呢？
品牌可以參考以下簡述步驟，或參考本篇詳細教學《Google 代碼管理工具 (GTM) 安裝方式》。
步驟 1：進入 GTM 後台
步驟 2：建立帳戶
- 填寫帳號名稱、國家。
- 填寫容器名稱（填入品牌的網站網址 www.{handle}.shoplineapp.com）。
- 選擇平台（選擇網路），並同意服務條款。
步驟 3：串接 SHOPLINE
將 GTM ID（格式為 GTM-XXXXXXXX）複製後填入 SHOPLINE 後台。
SHOPLINE 後台設定路徑為：「網店行銷及追蹤」→「追蹤設定」→「Google Tag Manager」。
Google Tag Manager 常見應用案例
完成上述設定、串接後，便可以開始利用 GTM 為品牌的網站設計「自動規則指令」。以下將介紹兩種常見的電商應用案例，供 SHOPLINE 品牌作為參照範例。
範例一、首頁 Banner 點擊事件埋設
若你希望針對首頁所製作的 Banner 進行「點擊事件」追蹤，以瞭解有多少用戶點擊了 Banner 作為活動成效或站內互動參考。可依照以下步驟設定觸發條件：
步驟 1：新增觸發條件
在 GTM 後台，點擊左邊選單「觸發條件」，並點擊「新增」。
步驟 2：為「觸發條件」命名
品牌可以依據自身需求，為觸發條件獨立命名（建議以底線方式命名，如 banner_click）
步驟 3：選擇「觸發類型」
點擊「編輯」的圖示後，選擇觸發條件類型：「點擊 – 僅連結」
步驟 4：選擇「部分的連結點擊」
步驟 5：查找 Banner 的程式碼位置
請依照以下方式進行：
- 在商店首頁中點擊「滑鼠右鍵」，選擇「檢查」。
- 接著會跳出程式碼，請查找 Banner 的程式碼，找到 <a class=”gallery__link” href=”{商家 Banner 點擊導轉的 URL }” target=”_self” >，從此段程式碼可得知，若要設定觸發條件，則需要找到這張圖片的「class」，為「gallery_link」。
步驟 6：設定「觸發條件」
- 在底下條件設定部分，選擇 {{Click Classes}}。
- 選擇「包含」。
- 輸入「gallery__link」。
- 點擊右上角藍色按鈕「儲存」。
步驟 7：新增代碼
- 在 GTM 後台，點擊左邊選單「代碼」，並點擊「新增」。
- 命名代碼名稱（如 banner_click）。
- 點擊「編輯」圖示，選擇 Google Analytics → Google Analytics：GA4 事件。
- 接下來需要填入 GA4 評估 ID：請前往 GA4 後台，在上方搜尋框輸入「評估 ID」，就可複製 ID，再進行填入。
- 設定事件名稱：輸入「banner_click」（建議以英文底線命名法，與觸發條件名稱一致）。
注意：「事件名稱」請以英文底線命名法，且與先前的觸發條件名稱一致，避免在 GA4 報表上不易閱讀。
- 設定事件參數與觸發條件：點擊「新增參數」，於參數名稱輸入「banner_url」，值選擇「{{Click URL}}」。再點擊下方「觸發條件」，選擇先前設定的「banner_click」並儲存。
步驟 8：預覽並發佈 Banner 點擊事件
可依照以下步驟預覽並發佈：
- 【步驟 1】：點擊 GTM 右上角的「預覽」按鈕。
- 【步驟 2】：在彈出的視窗中輸入網店 URL，點擊「連結」。
- 【步驟 3】：系統會另開分頁顯示網店首頁，右下角會顯示「Tag Assistant 已連線」。
- 【步驟 4】：在商店頁面點擊 Banner。
- 【步驟 5】：回到 GTM 預覽頁面，檢查「已觸發的代碼」區塊是否顯示「banner_click」。
提示：點擊事件後可在預覽頁面查看詳細資訊，包含事件名稱、評估 ID、觸發條件等。
- 【步驟 6】：確認事件觸發成功後，回到 GTM 首頁點擊「提交」。
- 【步驟 7】：在提交變更彈窗中輸入「版本名稱」及「版本說明」，點擊「發布」便完成。
完成以上步驟後，可於 GA4 （路徑為左側工具欄 → 報表 → 查看使用者參與度和留存率 → 事件）中搜尋剛剛設定的事件「banner_click」，便能看到此自訂義事件的計數。
範例二、頁尾社群 icon 點擊事件埋設
若品牌希望針對頁尾所的「社群 icon」進行「點擊事件」追蹤，可依照以下步驟設定觸發條件。
新增事件如「範例一」中的步驟1～4 設定皆一致，接下來將從「步驟 5：查找程式碼位置」開始說明。
步驟 5：查找程式碼位置
點擊頁尾的社群 icon 並按下滑鼠左鍵 → 檢查，查找到該區域的程式碼為「footer-social-icon-wrapper」，下方有三項社群連結（FB、IG、LINE)
找到該段落後，再來品牌需要理解頁尾社群 Icon 的程式碼採用層級架構邏輯（以爸爸、小孩舉例）：
- 外層容器（爸爸）：<div class=”footer-social-icon-wrapper”>
- 實際點擊的連結（小孩）：<a href=”…”>（FB、IG、LINE 的連結都在裡面）
情境說明：
FB 按鈕（小孩）放在社群區塊（爸爸）裡面，但當顧客點擊時，滑鼠是直接點在「FB 按鈕（小孩）」身上。
GTM 的運作邏輯：
GTM 判定你點到的是「小孩 <a>」，而不是「爸爸 div」。
解決方法：
下一個複合指令，告訴 GTM：「請幫我抓出爸爸（.footer…）肚子裡的小孩（a）。」
提示：指令翻譯：「.footer-social-icon-wrapper a」其中「.」代表找到這個名稱的區塊（爸爸），「空格」代表「裡面的」，「a」代表「連結」（小孩）。
步驟 6：設定「觸發條件」
請依照以下步驟設定觸發條件：
- 在 GTM 後台新增觸發條件，命名為「footer_social_click」。
- 選擇觸發條件類型：「點擊 – 僅連結」。
- 選擇「部分的連結點擊」。
- 設定觸發條件：
- 選擇「{{Click Element}}」。
- 選擇「符合 CSS 選取器」。
- 輸入「.footer-social-icon-wrapper a」。
重要提醒：在程式碼上顯示的為「footer-social-icon-wrapper」，需在前面加上「.」，並在後方加上空格和「a」。
步驟 7：新增代碼
請依照以下步驟設定代碼：
- 在 GTM 後台新增代碼，命名為「footer_social_click」。
- 代碼類型選擇「Google Analytics：GA4 事件」。
- 填入 GA4 評估 ID。
- 事件名稱填入「footer_social_click」。
- 設定事件參數：
- 參數名稱輸入「social_url」。
- 值選擇「{{Click URL}}」。
- 觸發條件選擇上一步驟設定的「footer_social_click」。
- 點擊儲存。
步驟 8：預覽並發布
依照以下步驟查看數據：
- 前往 GA4 後台。
- 點擊左側選單：報表 → 查看使用者參與度和留存率 → 事件。
- 在搜尋欄搜尋「footer_social_click」。
- 點擊事件名稱，查看自訂參數「social_url」，可得知顧客是點擊哪個社群平台。
常見問題
Q：商店更換前台主題 (Theme) 時，是否需要重新埋設？
建議商家切換主題（Theme）時，請先確認埋設時參照的前台 html 代碼是否有改變，若無改變，已埋設好的事件不需額外重新埋設。
Q：品牌如果有開 Layout Engine 會要怎麼做設定？
每個有開啟 Layout Engine 的商家客製化的區域都不一樣，例如商家可能自行設計 Footer 的樣式，而導致 html 結構不一致。因此無法給出統一 Layout Engine 參數的設定，但依然可以依據此教學文件的埋設脈絡，實際確認前台 html 代碼並進行埋設。
Q：設定完代碼後，為什麼 GA4 報表裡面看不到數據？
GA4 的標準報表通常需要 24～48 小時才會更新數據
Q：我在「預覽（Preview）」模式測試都成功，為什麼消費者點擊卻沒抓到？
最常見的原因是忘記「提交（Submit）」。確認測試無誤後，一定要點擊右上角的藍色「提交」並「發布」 ，這些設定才會正式對所有消費者生效。
SHOPLINE 電商教室編輯，對 SHOPLINE 的用戶有種使命感，希望能幫助所有店家一起成長，在零售領域裡發光發亮
