JiunYi Yang
打給賀，本篇是 Google Tag Manager 中文導覽的第七篇，我們將介紹 DOM 元素變數 的應用。
如果你想要跳脫內建變數，紀錄頁面上的內容、用戶資訊到 Google Analytics 或其他第三方平台，你會需要這篇。
還找不到學 Google Tag Manager 的重要性？還沒安裝好你的 Google Tag Manager 嗎？
動動手指先看看第一篇 【Google Tag Manager】中文導覽 (I) – 基本設定 教學吧！
本文大綱
本文學習大綱
教學開始 —— DOM 元素變數篇
新增「DOM 元素」變數
在「變數」頁面下，點擊「新增」>>「DOM 元素」
這個變數我們要儲存該頁面的 <title>，並讓它連同事件資料被傳遞到 GA，好讓我們在 GA 分析數據時，可以直接看到是哪一篇文章標題，不用解讀一串被 urlencoded 的中文網址（直觀上像亂碼）。
<title> 元素我們使用 CSS 選擇器 抓取、屬性名稱留空，代表抓取該元素下的文字。
調整代碼設定
剛才的 DOM 元素變數設定完成後，我們到先前使用 {{Page Path}} 變數的代碼，將其改成 {{DOM Element – title}} （使用你剛才對 DOM 元素的命名名稱）
使用預覽工具檢查變數
接著按下「預覽」，我們打開目標網站測試代碼觸發。
觸發「Scroll Depth」事件後，我們檢查「DOM Element – title」的值，恩，是我們想要的文章標題。
確認 Google Analytics 報表資料
接著我們到 GA double check，恩，原本是被 urlencoded 的中文網址，最下面新進來的資料，已經變成該頁面的標題了！
小結
本篇「DOM 元素變數應用」教學就到這邊結束啦！
其他中文導覽系列的連結，都幫大家整理在底下囉，歡迎自由取用；
喜歡別忘了幫我在底下留言表達簡短小小心得、並分享給你更多需要的同事朋友！
- 【Google Tag Manager】中文導覽 (I) – 基本設定篇
- 【Google Tag Manager】中文導覽 (II) – 事件追蹤架構、瀏覽&點擊追蹤
- 【Google Tag Manager】中文導覽 (III) – 頁面滾動深度追蹤
- 【Google Tag Manager】中文導覽 (IV) – Youtube 影片觀看追蹤
- 【Google Tag Manager】中文導覽 (V) – 表單提交追蹤
- 【Google Tag Manager】中文導覽 (VI) – 廣告追蹤代碼管理
- 【Google Tag Manager】中文導覽 (VII) – 透過 DOM Element 傳送網頁元素變數
工具百百種，沒時間自己慢慢研究…？
推薦你填寫本站的 諮詢傳聲筒 ，我將為你 客製 Google Tag Manager 教學；其他行銷分析工具、資料科學建模流程 等需求，也歡迎填表我們來討論！
Yang Abao
martech_jy
