Shadow DOM- GTM觸發條件常失敗

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

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

章節內容

1 Shadow DOM 影子DOM
2 總結
3 更多文章

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的路走了。