2017年是GTM（Google Tag Manager）大爆發的一年，在過去的一年中有許多高度性能增強的更新。然而歷數這些更新2017年最讓人激動人心的竟然是它！這就是我們今天要介紹的Element Visibility（頁面元素可見性）觸發器。
你或許對我們不久前介紹的GTM中頁面滾動深度監測的原生實現方法還有印象，它可以自有地實現用戶瀏覽頁面深度的統計。在當時介紹時，我們特地沒有涉及Element Visibility，就是為了留到今天來詳細地討論。
Element Visibility能為我們做些什麼？
我們每一個數字分析工作者都渴求了解在這個世界上的某一點，某一塊屏幕面前的受眾是如何與我們的網頁進行互動的。在許多時候我們不禁要問，這個用戶打開了這個網頁是否看到我們為其提供的最重要的訊息？這些重要的訊息可能是一個廣告，一個警告框，一段文字促銷訊息，或者是如一個QR碼那樣的特定的其他形式的內容。這種時候一個pageview的說服力是相當低的，我們需要實實在在地了解這些元素的“可見性”。
於是Element Visibility這個原生觸發器就“千呼萬喚始出來”了。在以往我們只能通過第三方的js庫來衡量某一個DOM元素在Viewpoint中的可見性。因此這實在是“巨大的”革新！
啟用Element Visibility
啟用Element Visibility這個原生觸發器很簡單，在新建觸發器時選擇類型Element Visibility即可，它和我們之前介紹的Scroll Depth同被歸在User Engagement下。選擇後你會看到下面的設置界面，我們一一講解。
Element Visibility提供了兩種元素定位方法，第一種是通過元素的ID，第二種是通過CSS選擇器。
我們先說第一種。每一個HTML的DOM元素都可以有一個ID的屬性。舉個例子，你打開Google的首頁並在按鈕“Google一下”鼠標右鍵“查看元素”（Chrome中： Inspect ），你可以看到這個按鈕的id為“su”。如下圖所示：
你也可以用這個方法來了解你的網頁中的某個元素的ID。如果它沒有id屬性，你可以建議前端工程師加上去或者通過我們下面的第二種方法來實現。
第二種方法是CSS選擇器。如果你是前端工程師，那麼你一定能體會它是一個非常方便的元素定位工具。HubSpot One在2017年曾經介紹過CSS選擇器（CSS Selector）的使用方法和技巧。它實際上是提供了這個元素的路徑。我們再來舉個例子。
在剛才的例子中，我們雙擊id=”su”把這個屬性刪除。然後我們在那行代碼上右鍵點擊，選擇“複製”，“複製選擇器”。
你可以得到下面這個結果。
#s_btn_wr > input
這個CSS選擇器的意思是去找ID為s_btn_wr的元素（就是那個<span> ），然後定位到它包含的input元素。
以上就是兩種定位方法，第一種更直接。第二種可以是你的Plan B。
這里略微展開一下，你的多個元素可以同時具有一個ID，CSS選擇器也可以選擇一個元素集合。因此這兩種方法並不針對唯一元素。假設有兩個id=”su”的元素，你希望僅在第二個元素可見時觸發，那麼你需要用CSS選擇器來嚴格指定元素路徑和子元素序號。多個元素的情況我們下面還會講。
Element Visibility觸發規則
GTM提供了三個觸發選項：
- Once per page
- Once per element
- Every time an element appears on screen
第一種和最後一種很好理解，分別是“每個頁面觸發一次，在首次可見時觸發”和“每個元素每次由不可見變為可見時都觸發一次，可重複”。我們詳細講中間第二種。
- 如果你選用的是ID匹配，那麼只有第一個匹配ID可見時會觸發。這種情況和第一種無區別。 （如果這個元素被移除後再添加則可以再觸發。）
- 如果你選用的是CSS選擇器匹配，那麼每一個可以匹配到的元素都可以觸發一次。
除了這三個觸發選項之外，GTM還提供了兩個高級觸發條件，分別是最小可見面積百分比和可見持續時長（毫秒） 。
我們知道MRC（Media Ratings Council）所製定並被IAB採用的廣告可見展示的標準是50%+可見並停留持續的一秒（ Pixel Requirement: Greater than or equal to 50% of the pixels in the advertisement were on an in-focus browser tab on the viewable space of the browser page, and Time Requirement: The time the pixel requirement is met was greater than or equal to one continuous second, post ad render. ）。對於自定義的其他元素，你可以要求更加嚴格，因為你可能無法獲取渲染時機。
最後我們來講Observe DOM change這個高級選項。在頁面載入時，有些DOM元素可能還不在頁面上，當動態地插入元素時，如果為啟用Observe DOM change這個選項那麼該變化將不能被GTM所感知。你可以請教下身邊的前端大神，這樣的場景十分常見，比如你要添加一個彈出層顯示一些感想或警告的訊息，又比如購物車新添加了一件商品等。此時Observe DOM change這個選項必須勾好。
總結一下
GTM的元素可見性（Element Visibility）觸發器的出現大幅簡化了我們對頁面特定元素可見性的衡量統計。 GTM從此變得更加強大，可以不再依靠第三方來實現這樣核心的需求。
最後藉此文感謝各位讀者不離不棄，祝各位2018事業蒸蒸日上！