文章目錄
這一篇介紹如何用用Google Tag Manager裡的元素可見度做事件追蹤。
認識元素可見度
元素可見度可以對指定元素在網路瀏覽器的檢視點中變得「可見」時就觸發，如某個圖片（元素）展示時就觸發。
示例演示
比如我現在想跟蹤部落格上文章列表個文章的展示做追蹤：
查看頁面程式
將滑鼠移動需要跟蹤位置，然後查看頁面元素：
這一步主要是看有沒有唯一的ID屬性用於元素可見度的定位，如果沒有，那麼可以用CSS選取器。
看紅框里的程式，沒有ID屬性，所以需要用CSS選取器。
設定觸發條件
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「元素可見度」，命名為“文章展示”，然後做如下設定：
選擇方式有兩種：
- 「ID」：根據元素的 ID 屬性值選取單一元素。
- 「CSS 選取器」：根據指定的 CSS 選取器模式選取一或多個元素。
鑒於這裡沒有ID屬性，所以這裡選擇CSS選取器，如果你不知道CSS選取器如何寫，可以用在查看頁面程式的時候點擊右鍵，然後點擊「Copy」——「Copy selector」：
啟動詞觸發條件的時機，其實就是觸發頻率，有三種類型：
- 每個網頁一次：觸發條件對各個網頁只會觸發一次。
- 每個元素一次：觸發條件對各個網頁上的各個選定元素只會啟動一次。
- 每次元素在畫面上顯示時：每次有相符元素變得「可見」，觸發條件就會自動或透過使用者互動啟動。
這裡我們選擇“每個元素一次”，只觸發一次。
進階選項裡有三個：
- 最低可見百分比：多大比例的面積可見時才會觸發事件。
- 設定畫面持續時間下限：可見多久時才會觸發。
- 觀察 DOM 改變情形：勾選這個方塊，即可讓觸發條件追蹤隨著 DOM 改變情形而顯示的相符元素。
這裡一般不去修改它。
設定代碼
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“表GA4-Event Tracking-Article Impression”，做如下設定：
元素可見度啟用後，會有一些內置變數可以用，你可以將它設定為事件參數。
GTM 中預覽調試
接下來就是調試了，在GTM中點擊右上角的“預覽”進入調試狀態，如果你還不知道怎麼調試，請看：新版Google Tag Manager 預覽模式指南——Tag Assistant
調試頁面打開後，返回到Tag Assistant頁面，在事件列表裡找到Element Visibility，這個就是元素可見度觸發條件，點擊它：
可以看到Tag Fired裡，我們設定的代碼是成功觸發。
