GTM教學｜GTM觸發條件常失敗

GTM是不是怎麼設定，觸發條件都不會出現，或者是變數都抓取不到正確的？

如果你是常碰代碼處理的數位人員，或是原本就碰程式碼的工程師，可能瀏覽器預設都是沒有打開Shadow Root這個選項；尤其當要設定GTM的條件、抓取DOM元素的時候，就是抓取不到特定的資料。如果你有這個問題， 可以先試著把Shadow Root打開，讓dev tool可以看到更多隱藏的Dom 結構 ，也就是這一集要講的Shadow DOM。

Shadow DOM 影子DOM

如何查看Shadow DOM

在開發人員工具中 (F12)點擊右上點的齒輪，並且找到下方圖片的 Show user agent shadow DOM 。

找到後，預設應該都是關閉的狀態，打勾開啟即可。

甚麼是Shadow DOM

Shadow DOM 常見於應用於前端工程中影子 DOM（Shadow DOM）允許你將一個 DOM 樹附加到一個元素上，並且使該樹的內部對於在頁面中運行的 JavaScript 和 CSS 是隱藏的。

圖片取自MDN，對於資訊工程想要深入了解的，可以 參考MDN解說Shadow DOM 。

Shadow DOM對前端影響

如果你是數位行銷人員，或者是你比較少碰到Shadow DOM 而要進行網站追蹤的工程師。那Shadow DOM 就一定要注意一下，因為它算是獨立的DOM TREE結構，如果一開始設計網站的工程師，沒有將Shadow DOM 帶入特定屬性的話。 那基本上從網頁的該頁面「無法」查詢、Select該元素 。也就是說，你只能換別條Select的路走了。

其他Shadow實例

Shadow 的使用或許你也有用過，光是你在寫HTML的Input元素，光只是寫一行，為甚麼能帶出一整個選擇日期的欄位? 原來也是套用了Shadow DOM。

總結

不管是這一篇的Shadow DOM 或是其他的問題，其實很多網站在埋設的過程中，因為使用的語法不同，導致生成的網頁元素方式也不同，就會造成後續開發追蹤部署的時候，常常拿不到特定的資料，就要一直嘗試才行。也希望這一篇對正在蓋網站數據的你有一些幫助！