GTM 提供了許多變數，我們在先前的文章中已經介紹過一些，如網址變數（URL Variables）、第一方 Cookie 變數（1st Cookie Variable）和資料層變數（Data Layer Variable）。這些變數可以幫助我們獲取網站的網址、Cookie 和資料層中的信息，它們在使用 GTM 進行網站追蹤設定時非常實用。
那如果這些地方都找不到我們所需的資料該怎麼辦呢？例如，網址尾端沒有參數，或者沒有工程師的幫助將資料推送到 Cookie 或資料層，我們還有什麼其他方法呢？
在這種情況下，「自動事件變數（Auto Event Variable）」和「 DOM 元素（DOM Element）」變數就派上用場了。本文將首先介紹「自動事件變數」，包括它在網站追蹤中的應用以及設定方法。如果你只對設定過程感興趣，可以直接跳轉到設定的段落。
我們繼續看下去。
本篇重點
認識網頁的 HTML 與元素(Element)
在深入介紹這個變數之前，讓我們先瞭解一下，那些顯示在我們螢幕上的網頁是如何被創建和呈現的。
- 當使用者點擊連結或輸入網址時，瀏覽器會與網站的伺服器建立連線。
- 瀏覽器向伺服器發出請求，要求顯示特定的網頁。
- 伺服器便利用 HTML、CSS 和 JS 等技術生成網頁，並將其發送到瀏覽器。
- 瀏覽器收到來自伺服器的回應後，便開始解析並渲染這些數據。
- 最終呈現出我們所看到的頁面。
儘管我們看到的只是網頁快速地顯示在眼前，但實際上，這背後進行了許多步驟（正如前文所概述）。當瀏覽器接收到來自伺服器的回應後，它會依據 HTML 定義的結構，配合網站的 CSS 樣式和 JavaScript 技術，將這些代碼轉化為最終呈現給使用者的網站外觀。這一過程包括了頁面的加載、解析和渲染，最終展現出我們所見的網頁內容。
HTML 的結構是由許多「網站元素（element）」組成的，這些元素則是通過 HTML 中的「標籤（Tag）」來定義。這些標籤是構成網站的基礎，它們定義了網站上各種不同的內容和結構，讓我們來看幾個常見的「標籤（Tag）」示例，以便更好地理解它們在網站設計中的作用。
<div>: 這個標籤主要用來把網頁劃分成數個部分或區塊，常被稱為「容器」，用於組織網頁的版面配置。
<p>: 此標籤用來定義文章的一個段落，是呈現文字內容的基本單位。
<h2>: 這是用來定義文章或段落中的副標題，屬於標題層次中的第二級，用來強調次要的標題或小節標題。
<article>: 這個標籤包圍的內容代表一篇獨立的文章，通常用於涵蓋獨立完整的內容，如部落格文章或新聞報道。
除了上面的例子之外，HTML 中還有一些其他常見的元素，像是建立超連結的 <a></a>、插入圖片的 <img></img>、用於表單的 <form></form>，還有創建列表的 <ul></ul> 和 <li></li> 等。
在這些標籤裡頭，我們還可以加上「屬性（attribute）」來提供額外的訊息。舉例來說，如果我們在網頁原始碼裡建了一個 <a></a> 標籤的元素，且標籤內容只寫成 <a>這是一條超連結</a>，那麼在網頁上呈現的就僅會是一段無法點擊的文字：「這是一條超連結」。
要讓超連結能夠正常運作，我們需要在 <a> 標籤中加入 href 屬性，例如寫成 <a href="www.abc.com">這是一條超連結</a>。這樣，瀏覽器就知道這條連結應該將使用者引導至哪個網址，而 href 在這裡就是標籤的「屬性（attribute）」。
如果想要進一步設定，讓這條連結被點擊時在新的標籤頁打開，可以在 <a> 標籤中加入 target="_blank"，寫成 <a href="www.abc.com" target="_blank" rel="noopenner">這是一條超連結</a>。這樣設定後，當使用者點擊該連結時，網址會在新標籤頁中打開。
假如我們想要改變文字的顏色，讓它顯示為紅色，那麼我們就需要在 <p></p> 標籤中加入顏色的屬性。例如，將其寫成 <p style="color: #FF0000">這是一段紅色文字</p>，這樣在網頁上這段文字就會以紅色顯示。這裡加入的 style 就是標籤的「屬性」。
這方面還有許多內容可以介紹，目前我們只是簡單講解一下基本概念。當然，一個網頁的生成過程遠比這複雜，但先了解這些基本概念對於使用「自動事件變數」進行網站追蹤會有所幫助，因為我們將利用「自動事件變數」來捕捉「標籤（Tag）」內的「屬性（Attribute）」值。
ㅤ
什麼是「自動事件變數」？
「自動事件變數」可以協助我們取得使用者與網站互動時，該 HTML 元素中的屬性（attribute）值（注意：只有使用者與網站互動時才可以抓得到，如果要直接抓取頁面上的資訊，請使用「DOM 元素」變數 ）。
像是使用者點擊或是表單提交的時候，我們可以使用「自動事件變數」取得相對應資料，例如：「被點擊的元素文字（Click Text）」或是「表單文字（Form Text）」這些值。
上述舉的這幾個例子，可以在 GTM 的內建變數中找到。這是 GTM 本身有提供給使用者的變數，關於這部分的介紹，可以參考之前的文章：GTM 變數：傳遞資訊 ，會有更多細部的解釋，並告訴你如何呼叫出內建變數以及讀取這些變數。
ㅤ
就如同其它變數一樣，我們可以將「自動事件變數」的值與 GA4 事件綁定作為該事件的參數，一起傳送到 GA4 中。
例如：
當使用者點擊特定連結時，將「點擊的文字以及網址」隨著點擊事件一起傳送到 GA4，我們就可以在報表中看到這個點擊事件是來自網站上的哪個位置，並引導使用者去了哪裡（下圖）。
ㅤ
也可以將其當作觸發條件，例如：當 Click Text = xxxxx 時，觸發特定事件。關於連結點擊事件的設定，可以參考之前寫過的文章：如何用 GTM 建立 GA4「連結點擊」事件？ 幫助你更了解上述說的情況。
ㅤ
凡事總有例外
上一段的範例中，我們用「點擊文字」以及「點擊網址」來判斷使用者點擊的項目是什麼，但是萬一今天「點擊文字」都長得一樣，「點擊網址」也沒有正確命名，無法幫助你判斷的時候，該怎麼辦？
下圖的範例中可以看到，三個點擊連結的文字都是一樣的，如果我們用內建的「Click Text」 變數，無法得知使用者是點擊了哪一套旅遊行程。
此時我們便可以來檢查一下這個網頁，是否有「元素屬性」的值可以使用，我們再利用「自動事件變數」去抓取。
ㅤ
如何設定自動事件變數？
目前情況是這樣：
假設我們想要知道在某個頁面上，使用者對哪個旅遊行程最感興趣。但由於所有點擊的文字都一樣，我們無法分辨使用者實際點擊的是哪一個連結，這樣一來，傳統的 Click Text 變數就無法滿足我們的需求。
因此，我們需要尋找其他的解決方法，而「自動事件變數」可能就是這個問題的解方。
ㅤ
「檢查」網頁
於該連結上面「點選右鍵」> 選擇「檢查」
我們可以看到，在元素 <a></a> 裡面，除了有熟悉的網址以及連結文字以外，還多了兩個與旅遊行程相關的「屬性(attribute)」，分別是 data-tour 以及 data-days。(雖然 download 和 href 也是屬性，但在這個情境中我們不會使用它們。)
幸運的是，有了這些屬性，就可以被用來設定「自動事件變數」，這對我們來說是一大幫助。
ㅤ
設定「自動事件變數」
GTM 左側面板選擇「變數」> 「新增」> 變數類型選擇「自動事件變數」
ㅤ
下拉選單中選擇「元素屬性」 > 填入屬性名稱「data-tour」，名稱要完全一樣 > 命名後儲存。
ㅤ
設定完屬性 data-tour 之後，用同樣的方式設定 data-days，我們就會得到兩個「自動事件變數」，分別是「AEV-data_tour」以及「AEV-data_days」。
ㅤ
檢查變數運作是否正常
完成變數設定之後，先透過預覽模式檢查一遍，確保變數抓到我們預期的值。記得要去點擊該連結，因為要抓到「自動事件變數」設定的值，使用者必須要跟該元素產生互動，才可以抓到該「元素屬性」的值。
這點就跟「DOM 元素」變數有很大的不同，「DOM 元素」變數只要頁面上的 DOM（Document Object Model） 準備好了，使用者不需要與網頁互動，就可以抓到相對應的值了。
可以透過預覽模式左邊面板看到，當點擊了網頁上的連結之後，GTM 預設事件 Link Click 的變數頁籤出現了剛剛設定的「AEV-data_days」以及「AEV-data_tour」自動事件變數，後面也帶出了相對應的值，代表設定正確
接下來就可以與 GA4 事件綁定，將這兩個變數的值送到 GA4 中。
ㅤ
設定 GA4 事件代碼
GTM 左側面板選擇「代碼」> 「新增」> 選擇「Google Analytic(分析)」> 「Google Analytic(分析)：GA4 事件」
將前面設定的「自動事件變數」放到事件參數「值」的欄位中，可以透過手動輸入也可以用旁邊的「＋」號選取（下圖），事件名稱與事件參數都可以自行命名，於報告中好讀好懂即可。
這邊我們將事件名稱命名為 Click_download。
觸發條件設定為當點擊的連結文字（Click Text）等於 下載行程介紹 時，觸發此 GA4 事件代碼。
（如果你的元素當中有其它屬性可以取用作為觸發條件，例如 Class 或是 ID，也可以使用它們，關於元素類型的解釋請看文章最後一段。）
ㅤ
到這邊就完成了我們需要的連結點擊追蹤事件，並且透過「自動事件變數」知道使用者所點擊下載的是哪個行程的連結，設定完成之後，一樣透過 GTM 預覽模式以及 GA4 Debug View 來確認代碼是否正常運作以及 GA4 是否有接收到正確參數。
ㅤ
如果還不清楚如何使用 GTM 預覽模式的朋友，可以參考這篇文章：如何用 GTM 「預覽模式」檢查代碼有無設定成功？
如果是不知道 GA4 的 Debug View 在哪裡的朋友，可以參考這篇文章：認識 Google Analytic 4 後台介面，完整的後台介紹可以帶你找到 Debug View 的位置。
ㅤ
「自動事件變數」類型介紹
如果你只想了解設定「自動事件變數」的具體步驟，其實閱讀到這邊就足夠了。
接下來我們將介紹在設定「自動事件變數」的過程中，會看到下拉選單內還存在著好多種不同的元素類型，我們會一一解釋它們各自代表的含義以及可能的使用場景。
ㅤ
元素（Element）
這會回傳使用者當下與網站互動時的「元素」，例如：回傳使用者點擊時的「元素」。
這個「元素」回傳的值跟內建變數 Click Element 還有 Form Element 其實是一樣的，你如果建立一個「元素」類型的「自動事件變數」，透過預覽模式可以看到其回傳的值跟 Click Element 或是 Form Element 會是相同的。。
ㅤ
元素類型（Element Type）
回傳使用者點擊標籤的值，假設使用者點擊的是連結，就會回傳 <A>，如果點擊的是一張圖片，就會回傳 <IMG>。
ㅤ
元素屬性（Element Attribute）
用於捕捉元素的任何 HTML 屬性的值。例如，可以捕捉 <a href="example.com"> 鏈接中的 href 屬性值 example.com 。
整篇教學所使用的都是「元素屬性」，應該不用再多做說明。
ㅤ
元素類別（Element Classes）
會回傳該 Element 的 Class 的值，常常用在設定觸發條件使用，例如：當點擊的連結 Class=xxxx 時，啟動特定事件代碼。聽起來是不是覺得很耳熟？
沒錯，這個跟內建的變數「 Click Class 」 以及「 Form Class 」 效果一樣，會回傳相同的值，例如，<div class="ct-container"> 中的 ct-container。
ㅤ
元素 ID（Element ID）
捕捉觸發事件的元素的 ID 屬性。例如，<button id="submit-button"> 中的 submit-button，跟 element class 一樣，也常常用在觸發條件的設定：當元素 ID =xxxx 時，啟動觸發條件，
再耳熟一次，這個跟內建變數 Click ID 以及 Form ID 也可以達到一樣的結果。
ㅤ
元素目標（Element Target）
這跟內建變數 Click Target 以及 Form Target 也是一樣的效果，會回傳該元素 target 屬性的值，例如連結中的屬性 target=”_blank”，代表該連結會另開視窗。
ㅤ
元素文字（Element Text）
舉一反三，你應該也會知道這是什麼了？
沒錯，跟內建變數 Click Text 以及 Form Text 是一樣的效果，會回傳該元素內的文字，也會很常運用在觸發條件設定或是放在事件代碼中的「值」欄位中，了解使用者是點擊到哪個按鈕或是連結。
ㅤ
元素網址（Element URL）
會回傳元素 href 屬性或是 action 屬性後面的網址連結，通常是與 <a> 標籤相關的鏈接，等同於 Click URL 以及 Form URL。
ㅤ
紀錄新網址片段
什麼是片段？
網址最後以 # 字號帶出的部分就是片段，最常出現在一頁式網站，例如 ：www.abc.com/sales#shoes，#shoes 的部分就是片段，當瀏覽器紀錄事件變更時，此「自動事件變數」類型便會紀錄下該片段。
（關於一頁式網站的運作以及追蹤方式，可以參考文章：如何用 GTM「記錄變更」& GA4 內建事件追蹤一頁式網站？）
當使用者來到一頁式網頁 www.abc.com/sales，使用者點擊了一個按鈕，畫面滑移到鞋子販售的區塊，網址變成 www.abc.com/sales#shoes，此時「紀錄新網址片段（History New URL Fragment ）」的值會是 #shoes。
同樣的，內建變數「New History Fragment」也可以獲得一樣的結果。
ㅤ
紀錄舊網址片段
延續上一段的範例，如果使用者造訪了 www.abc.com/sales#shoes 之後點選其它連結來到了 www.abc.com/sales#pants，「紀錄舊網址片段（History Old URL Fragment）」的值就會是 #shoes，而「紀錄新網址片段（History New URL Fragment ）」的值會是 #pants。
GTM 內建變數「 Old History Fragment 」也會獲得一樣的結果。
ㅤ
紀錄新狀態
當使用 pushState 的方式為網頁添加歷史紀錄時，「紀錄新狀態（History New State）」就會紀錄新頁面的值，內建變數 New History State 也會得到同樣的結果。
ㅤ
紀錄舊狀態
有新就有舊，當新的 pushState 進來之後，「紀錄舊狀態（History Old State）」就會儲存上一個狀態，內建變數 Old History State 也會得到同樣的結果。
ㅤ
紀錄變更來源
網頁紀錄變更的方式有很多，例如當網址最後的 # 改變時，從 www.abc.com/sales#shoes 來到 www.abc.com/sales#pants ，此時的「紀錄變更來源（History Change Source）」就會被記錄為 hashchange，代表這次紀錄變更事件是因為網址的 # 號改變。
還有一個會用到「紀錄變更來源」的案例，有些一頁式網站在使用者與其互動時，例如：使用者點擊了某個連結或按鈕，但網址沒有改變，頁面沒有重新載入，也沒有「#」出現在網址尾端，但畫面卻改變了。
此時如果去看「紀錄變更來源」的值，會發現是 pushState，我們就會用這個改變的值來作為觸發條件，例如：當 History Change Source = pushState 時，觸發某代碼。
（關於這部分的操作方式，會再寫一篇文章來解釋。）
同樣的，內建變數「History Source」也會回傳一樣的值。
ㅤ
總結一下
到目前為止，我們已經簡要介紹了 HTML 的基本結構，包括元素（element）、標籤（tag）和屬性（attribute）是什麼，以及為什麼在學習使用「自動事件變數」之前，需要先了解這些概念。
然後，我們逐步引導大家了解如何設定「自動事件變數」，以及它在哪些情境下可以被應用。最後，我們闡釋了在「自動事件變數」下拉選單中各種不同的「元素類型」代表的意思，以及它們可以被運用在哪些場合。
在談到元素類型時，「元素屬性」無疑是最常被使用到的選項，主要是因為在大多數情況下，我們需要的變數都可以透過 GTM 的內建變數獲得。
至於像「紀錄新網址片段」這樣的元素類型，它們主要用於追蹤使用者在單頁式網站的瀏覽路徑，比如從 www.abc.com/#shoes 到 www.abc.com/#pants（當然，可能還有其他有趣的使用方法，如果你有所了解，歡迎留言分享告訴我們。）
對於單頁式網站的追蹤，實際上還有其他方法可以獲得更完整的 URL 資訊。如果你對這方面感興趣，可以參考這篇文章：如何用 GTM「記錄變更」& GA4 內建事件追蹤一頁式網站？
了解 GTM 的各項功能對我們來說是非常重要的，因為每個網站的結構都有所不同，並不是所有的追蹤方法都適用於每一個情況。掌握更多的工具意味著我們可以更靈活地解決各種問題。雖然我們可能已經操作過許多網站，但也不能保證一定能夠用同一種 GTM 招式解決所有追蹤問題，這正是學習 GTM 的魅力所在，永遠不知道後面還有什麼等著你。
扯遠了，回到「自動事件變數」的話題，如果未來我們遇到任何特殊的案例，也會在這篇文章中進行更新。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）