GTM 代碼管理工具中有一個觸發條件類型「元素可見度」，當我們今天有需要了解網站中特定的「位置」是否有被使用者看到時，觸發條件「元素可見度」會是一個相當好用的工具，可以幫助我們確實了解使用者是否有看到特定廣告 Banner 、看了多少百分比以及看了多久時間。
一般來說，我們除了會投放外部廣告引導流量進站以外，有些網站上表現不錯的頁面，很有機會也被拿來放置廣告 Banner，例如：合作夥伴的活動廣告，希望來到我們站上的使用者看到之後，會點擊該廣告 Banner 進而到合作夥伴的頁面完成指定動作，像是註冊或是購買產品等行為。
如同之前追蹤外部連結點擊的文章所說，我們可以透過追蹤「點擊」來了解多少人點擊了特定的廣告 Banner，但如果今天想要計算點擊率（點擊數/曝光數）的時候，我們該如何知道該廣告 Banner 產生了多少曝光？
只要透過 GTM 內建的觸發條件類型「元素可見度」，就可以幫助我們獲得所需要曝光次數。
那些需要被捲動才看得到的畫面
假設在我們的旅遊宣傳網頁中，我們放置了一個「立即報名的圖片」穿插在文字之間，這張圖片是座落在文字段落之間，如果想要知道這張圖片被多少人看到的話，我們就可以用「元素可見度」這類型的觸發條件來設定追蹤事件。
追蹤情境：
當該廣告 Banner 顯示在使用者可視螢幕範圍內之後（也就是真的呈現在使用者眼前），發送一個事件給 GA4。
設定「元素可見度」觸發條件
新增觸發條件
GTM 左側面板「觸發條件」頁面 > 「新增」觸發條件 > 選擇觸發條件類型：「元素可見度」
「選取方式」選擇「ID」
在觸發條件類型設定「選取方式」的部分有兩種可以選擇，一種是透過「CSS 選取器」，另一種則是透過「ID」，如果有該圖片有專屬「ID」屬性，「選取方式」盡量選擇「ID」為優先。
（如果你已經確定需要的元素內沒有「ID」屬性且無法請工程師加上去的話，那我們可以運用另一個美妙的功能「CSS 選取器」，請直接跳到這邊。）
這麼做的原因是因為網頁上元素的「ID」屬性通常會是獨一無二的，只會有一個「ID」值，同一個頁面不該有其它的地方使用到重複的「ID」，因此選取「ID」會是較佳的做法，避免抓取到錯誤的元素而觸發了事件代碼。
找出 Banner 的 ID 屬性
在想要追蹤的素材上「按右鍵」 > 選擇「檢查」
（以這邊的例子來看，我們需要在該圖片上點選右鍵）
透過「網頁檢查工具」，可以找到素材的專屬「ID」，通常在上傳圖片的時候可以透過後台系統設定，如果你檢查後發現沒有「ID」可以使用，請與工程師討論並請他們幫忙加上去。
我們在這邊找到的「ID」屬性值為「diving-banner」，接著將其放入觸發條件的「元素 ID」欄位中，如下：
到這邊，我們就完成了以「ID」為「選取方式」的設定，但如果你沒有「ID」可以用呢？
我們繼續看下去。
「選取方式」選擇「CSS 選取器」
如果你沒有「ID」可以用，也沒有工程師協助加入該屬性於特定的元素中，那麼就必須要使用「CSS 選取器」。
至於什麼是「CSS 選取器」，可以參考這篇文章，我們有進一步的解釋：如何使用 GTM 的「CSS 選取器」(CSS Selectors)？
找出網頁上的「CSS 選取器」
在想要追蹤的素材上「按右鍵」 > 選擇「檢查」> 在「網頁檢查工具」中，針對該圖片對應代碼按右鍵 > Copy > Copy selector
找個地方先複製貼上後，你會得到如下方這一串：
diving-banner > a > img
有時候當網頁 HTML 是比較複雜的巢狀結構時，選取器出來的結果可能會是很長一串，像是這樣：
post-14 > div.entry-content > div > div > ul > li.woocommerce-order-overview__total.total > strong > span > bdi
這是因為你需要的元素被包覆在比較多層裡面，就可能出現這樣的情況，整個網站 HTML 結構大概會像是下面這張圖：
因此端看你的網頁結構，在我們上述的範例中僅有這樣短短一段 diving-banner > a > img，非常好，接下來只要將這段放入「元素選擇器」的欄位中即可。
這邊要注意的是，因為 diving-banner 是 ID 屬性，在 CSS 選取器的規則中，必須在前面加上「#」，如果是 Class 屬性，則是加上「.」
到這邊，我們就完成了使用「CSS 選取器」設定的觸發條件，接著再補完觸發條件其它細部的設定就可以了。
完成觸發條件設定
在觸發條件下方的設定中，我們將觸發條件設定為「每個網頁一次」。
這是因為我們不希望當使用者不斷回捲畫面，「再度」經過廣告圖片造成事件重複觸發（當然，後面我們也會設定在此 ID 的停留時間作為觸發條件之一，以避免只是「經過」廣告圖片就造成事件觸發）
設定「最低可見度百分比」
當廣告圖片曝光到多少程度的時候，才可以滿足觸發條件，這邊我們習慣設定到 70%，實際則看專案素材樣式進行調整。
設定「畫面持續下限」
這邊是以毫秒為單位，1 秒鐘 ＝ 1,000 毫秒，如果希望使用者在素材上面停留超過 10 秒鐘才會觸發事件，就設定為 10,000 毫秒。（一樣，依各專案需求自行調整。）
完成之後給予命名，儲存就可以進入下一步，代碼設定。
設定 Banner 曝光事件代碼
GTM 左側面板選擇「代碼」 > 右上角「新增」 > Google Analytics(分析) > Google Analytics(分析) : GA4 事件
設定「事件名稱」，這邊我們設定為「Banner-Imp」 > 選擇剛剛設定的觸發條件 > 將代碼命名後儲存。
（不管是事件名稱或是代碼的命名都沒有限制，重點是好懂好讀就可以，以便閱讀 GA4 或是後續接手管理代碼的人好理解。）
（圖中 GA4 評估 ID 因為是使用「常數」變數，可以參考設定 GA4 評估 ID 的文章，你如果是直接貼上「GA4 評估 ID」也是可以的，不影響本次設定）
搞定，預覽模式測試
在 GTM 預覽模式中我們可以看到設定的代碼已被啟動，就表示有使用者看到指定的廣告圖片並停留超過 10 秒鐘，且圖片有超過 70% 的部分被使用者看到。
進一步我們還可以透過 Click 事件觀察（如果有設定「點擊」事件的話），使用者是否有產生點擊行為，如此一來，我們就可以將點擊次數除以圖片曝光次數計算出點擊率了。
例如：假設「點擊」事件數有 10 個，而上述設定的「曝光」事件數有 100 個，將點擊次數/圖片曝光次數 = 10%，我們就可以得知點擊率為 10% 。
另外，
除了利用「元素可見度」來觸發代碼監看廣告圖片的成效以外，我們也可以使用它來幫助我們追蹤表單提交事件，請參考這篇：用「元素可見度」觸發「表單提交」事件追蹤代碼。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們，感激不盡：）
