GTM教學｜AutoEvent追蹤使用者點選的圖片

AutoEvent裡面「ElementAttribute」用來追蹤元素屬性，像是圖片的ALT、其他按鈕的屬性 ，只要有辦法更改到html，基本上就有辦法用AutoEvent抓取資料。

使用情境像是，例如官網有很多張Banner，你可能會想想知道哪一張Banner被點擊最多次，以利下次活動優化，這個變數這時候就可以派上用場。也適用在「APP手遊」、「多文件下載」等網頁，做出事件區分，以利數據人員後續優化。

今天介紹的「自動事件變數」，裡面的變數類型很多，但有一些GTM已經有其他的內建變數可以取代。我就只挑比較特別的「元素屬性」來做介紹。

本篇較為進階，如果你是初學者，建議可以先從前面的內容慢慢看回來。本篇的教學也可以透過CSS選取器進行實務的操作，如果你想要知道怎麼用CSS Selector的， 可以看這一篇「GTM基礎教學-CSS SELECTOR抓取表格值」

新增GTM變數

開啟GTM，前往GTM的左側選單，點選變數，並新增一個「自動事件變數」。

選擇元素屬性

點選元素屬性後，在下方輸入alt。 (對應Html中的屬性，詳見範例說明)

其他延伸應用，如果有其他屬性，也可以在這邊輸入，例如「CAR="123”」CAR為KEY值，因此屬性名稱就填入CAR即可。

預覽測試

填入完成後，即可預覽測試，查看 GTM是否有抓到對應的Value，圖片中顯示的”kiwi”值 ，代表已經成功讀取。自動事件可以 追蹤到Html中的屬性值，後續再把屬性值回拋給GA4 ，也可以變成GA4的電子商務資料回傳。如果你也想知道GA4的電子商務資料追蹤，可以看「 GA4電子商務資料追蹤埋設大全1 - VALUE值抓取。 」

自動事件的類型介紹

以下是其他GTM - AutoEvent的變數類型補充。有一些GTM內建就已經有包含，所以我會額外附註「可替代」。個人最推薦的就是使用元素屬性!

• 元素(Element) => (可替代) 點擊元素Click Element
• 元素類型(ElementType) => 對應Html標籤
• 元素屬性(Element Attribute)=> 對應Html標籤屬性
• 元素ID(Element ID)=>(可替代) 點擊ID Click ID
• 元素目標(Element Target)=> 對應網頁開啟目標
• 元素文字(Element Text)=> (可替代) 點擊文字Click Text
• 元素網址(Element Url)=> (可替代) 點擊網址Click Url

GTM的元素屬性，不需要學會之前講的CSS選擇器，只需要懂基本的KEY,VALUE就好，所以如果你是剛接觸GTM的新手，不妨可以了解一下這個變數的強大！