本簡報以 16:9 橫向為主
請旋轉手機
或改用平板 / 桌機觀看
三小時內，把 dataLayer 這條合約講清楚，
從 push 一個自訂事件到 SPA / AJAX 場景的虛擬頁面追蹤，前端開發同學最強武器。
沒有 dataLayer，每加一個平台就要動一次前端；
有了 dataLayer，一個 push 同時餵 GA4 / Meta / TikTok / Google Ads。
不求精通——求能畫圖、能 push、能 debug。
一個 JavaScript 陣列——
GTM 的血液、前後端追蹤的合約、跨頁傳資料的容器。
GTM 監聽 dataLayer 的新增——每個 push 就像丟一封信到 GTM 信箱。但信箱要先架好，信才寄得到。
window.dataLayer = window.dataLayer || []。dataLayer.push({...}) 商業事件。理解這三個 event = 理解 GTM 觸發時機。不理解就會一直卡在「為什麼我的 Tag 偶爾 Fire 不到」。
把點擊按鈕、送出表單、看完影片——
變成 GTM 能消費的事件。
Contact Form 7 提交成功會觸發 wpcf7mailsent JS 事件——監聽它、push 它、讓 GTM 接住。
window.dataLayer = window.dataLayer || []——避免 TypeError。document.addEventListener('wpcf7mailsent', fn)——表單成功時才 push。dataLayer.push({event:'submit_contact_form', form_id, form_location})。submit_contact_form。{{DLV - form_id}} 引用。submit_contact_form——同一個 push 之後可加 Meta Lead Tag 一起綁，前端 0 改動。原本 SPA 進站只記 1 次 page_view，使用者切到 10 個頁面全漏——實際 PV 被低估 70%。修法只要在路由 hook push {event:'virtual_pageview', page_path}，GTM 用 Custom Event 接 GA4 page_view。
React 用 useEffect([location])、Next.js 用 router.events.on('routeChangeComplete')、Nuxt 同 Vue——關鍵字「framework + virtual pageview GTM」，Stack Overflow 有現成範本。
當網站是 Vue / React SPA 或購物車走 AJAX——
傳統 Page View 會失準。
afterEach / React Router useEffect / Next.js routeChangeComplete 裡 dataLayer.push({event:'virtual_pageview', page_path})。@next/third-parties/google、許多框架有 built-in GA4 plugin——先查現成方案。已有的話只負責「非 page_view 的自訂事件」即可。
jQuery(document).on('added_to_cart', fn) 後在 callback push {event:'add_to_cart',...}。GTM4WP 已內建這塊，不要重做。下週 Module 5 · GA4 Ecommerce 資料結構——
把這週的 push 變成完整訂單。