Google Tag Manager 教學 (VII) – DOM 元素應用

【Google Tag Manager】中文導覽 (VII) – 透過 DOM Element 傳送網頁元素變數

打給賀,本篇是 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 元素變數應用」教學就到這邊結束啦!
其他中文導覽系列的連結,都幫大家整理在底下囉,歡迎自由取用;
喜歡別忘了幫我在底下留言表達簡短小小心得、並分享給你更多需要的同事朋友!

  1. 【Google Tag Manager】中文導覽 (I) – 基本設定篇
  2. 【Google Tag Manager】中文導覽 (II) – 事件追蹤架構、瀏覽&點擊追蹤
  3. 【Google Tag Manager】中文導覽 (III) – 頁面滾動深度追蹤
  4. 【Google Tag Manager】中文導覽 (IV) – Youtube 影片觀看追蹤
  5. 【Google Tag Manager】中文導覽 (V) – 表單提交追蹤
  6. 【Google Tag Manager】中文導覽 (VI) – 廣告追蹤代碼管理
  7. 【Google Tag Manager】中文導覽 (VII) – 透過 DOM Element 傳送網頁元素變數

工具百百種,沒時間自己慢慢研究…?

推薦你填寫本站的 諮詢傳聲筒 ,我將為你 客製 Google Tag Manager 教學;其他行銷分析工具資料科學建模流程 等需求,也歡迎填表我們來討論!

Leave a Reply