GTM 變數介紹：自動事件變數(Auto Event Variable)，該如何應用？
GTM 提供了許多變數，我們在先前的文章中已經介紹過一些，如 網址變數（URL Variables）、 第一方 Cookie 變數（1st Cookie Variable）和 資料層變數（Data Layer Variable） 。這些變數可以幫助我們獲取網站的網址、Cookie 和資料層中的信息，它們在使用 GTM 進行網站追蹤設定時非常實用。
那如果這些地方都找不到我們所需的資料該怎麼辦呢？例如，網址尾端沒有參數，或者沒有工程師的幫助將資料推送到 Cookie 或資料層，我們還有什麼其他方法呢？
此時就是 「自動事件變數（Auto Event Variable）」以及 「Dom 元素（Dom Element）」變數登場的時候了，而這篇文章會先介紹 「自動事件變數」，並且告訴你可以如何應用在網站追蹤以及如何設定這個變數，如果只是要看設定方式，請直接跳到 這邊 。
在這種情況下，「自動事件變數（Auto Event Variable）」和「DOM 元素（DOM Element）」變數就派上用場了。本文將首先介紹「自動事件變數」，包括它在網站追蹤中的應用以及設定方法。如果你只對設定過程感興趣，可以直接跳轉到 設定的段落 。
我們繼續看下去。
認識網頁的 HTML 與元素(Element)
在深入介紹這個變數之前，讓我們先瞭解一下，那些顯示在我們螢幕上的網頁是如何被創建和呈現的。
- 當使用者點擊連結或輸入網址時，瀏覽器會與網站的伺服器建立連線。
- 瀏覽器向伺服器發出請求，要求顯示特定的網頁。
- 伺服器便利用 HTML、CSS 和 JS 等技術生成網頁，並將其發送到瀏覽器。
- 瀏覽器收到來自伺服器的回應後，便開始解析並渲染這些數據。
- 最終呈現出我們所看到的頁面。
儘管我們看到的只是網頁快速地顯示在眼前，但實際上，這背後進行了許多步驟（正如前文所概述）。當瀏覽器接收到來自伺服器的回應後，它會依據 HTML 定義的結構，配合網站的 CSS 樣式和 JavaScript 技術，將這些代碼轉化為最終呈現給使用者的網站外觀。這一過程包括了頁面的加載、解析和渲染，最終展現出我們所見的網頁內容。
<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">這是一條超連結</a> 。這樣設定後，當使用者點擊該連結時，網址會在新標籤頁中打開。
假如我們想要改變文字的顏色，讓它顯示為紅色，那麼我們就需要在 <p></p> 標籤中加入顏色的屬性。例如，將其寫成 <p style="color: #FF0000">這是一段紅色文字</p>，這樣在網頁上這段文字就會以紅色顯示。這裡加入的 style 就是標籤的「 屬性 」。
這方面還有許多內容可以介紹，目前我們只是簡單講解一下基本概念。當然，一個網頁的生成過程遠比這複雜，但先了解這些基本概念對於使用「 自動事件變數」進行網站追蹤會有所幫助，因為我們將利用「 自動事件變數」來捕捉「 標籤（Tag）」內的「 屬性（Attribute） 」值。
什麼是「自動事件變數」？
「自動事件變數」可以協助我們取得使用者與網站互動時，該 HTML 元素中的屬性（attribute）值，像是使用者點擊或是表單提交的時候，我們可以使用 「自動事件變數」取得相對應資料，例如： 「被點擊的元素文字（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 也是屬性，但在這個情境中我們不會使用它們。)
幸運的是，有了這些屬性，就可以被用來設定「 自動事件變數 」，這對我們來說是一大幫助。
設定「自動事件變數」
下拉選單中選擇 「元素屬性」 > 填入屬性名稱 「data-tour」 ， > 命名後儲存。
檢查變數運作是否正常
完成變數設定之後，先透過 預覽模式檢查一遍，確保變數抓到我們預期的值。 記得要去點擊該連結，因為要抓到「自動事件變數」設定的值，使用者必須要跟該元素產生互動，才可以抓到該「元素屬性」的值。
這點就跟 「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 內建事件追蹤一頁式網站？ ）
同樣的， 內建變數「New History Fragment 」也可以獲得一樣的結果。
紀錄舊網址片段
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/#pant s （當然，可能還有其他有趣的使用方法，如果你有所了解，歡迎留言分享告訴我們。）
對於單頁式網站的追蹤，實際上還有其他方法可以獲得更完整的 URL 資訊。如果你對這方面感興趣，可以參考這篇文章： 如何用 GTM「記錄變更」& GA4 內建事件追蹤一頁式網站？
了解 GTM 的各項功能對我們來說是非常重要的，因為每個網站的結構都有所不同，並不是所有的追蹤方法都適用於每一個情況。掌握更多的工具意味著我們可以更靈活地解決各種問題。雖然我們可能已經操作過許多網站，但也不能保證一定能夠用同一種 GTM 招式解決所有追蹤問題，這正是學習 GTM 的魅力所在，永遠不知道後面還有什麼等著你。
扯遠了，回到「 自動事件變數 」的話題，如果未來我們遇到任何特殊的案例，也會在這篇文章中進行更新。
