用Google Tag Manager裡的元素可見度做事件追蹤

Google Tag Manager Haran 1年前 (2023-03-17) 996次瀏覽 0條留言

這一篇介紹如何用用Google Tag Manager裡的元素可見度做事件追蹤。

認識元素可見度

元素可見度可以對指定元素在網路瀏覽器的檢視點中變得「可見」時就觸發,如某個圖片(元素)展示時就觸發。

 

示例演示

比如我現在想跟蹤部落格上文章列表個文章的展示做追蹤:

用Google Tag Manager裡的元素可見度做事件追蹤

查看頁面程式

滑鼠移動需要跟蹤位置,然後查看頁面元素:

用Google Tag Manager裡的元素可見度做事件追蹤

這一步主要是看有沒有唯一的ID屬性用於元素可見度的定位,如果沒有,那麼可以用CSS選取器。

看紅框里的程式,沒有ID屬性,所以需要用CSS選取器。

 

設定觸發條件

GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「元素可見度」,命名為“文章展示”,然後做如下設定:

用Google Tag Manager裡的元素可見度做事件追蹤

 

選擇方式有兩種:

  • 「ID」:根據元素的 ID 屬性值選取單一元素。
  • 「CSS 選取器」:根據指定的 CSS 選取器模式選取一或多個元素。

鑒於這裡沒有ID屬性,所以這裡選擇CSS選取器,如果你不知道CSS選取器如何寫,可以用在查看頁面程式的時候點擊右鍵,然後點擊「Copy」——「Copy selector」:

用Google Tag Manager裡的元素可見度做事件追蹤

 

啟動詞觸發條件的時機,其實就是觸發頻率,有三種類型:

  • 每個網頁一次:觸發條件對各個網頁只會觸發一次。
  • 每個元素一次:觸發條件對各個網頁上的各個選定元素只會啟動一次。
  • 每次元素在畫面上顯示時:每次有相符元素變得「可見」,觸發條件就會自動或透過使用者互動啟動。

這裡我們選擇“每個元素一次”,只觸發一次。

 

進階選項裡有三個:

  • 最低可見百分比:多大比例的面積可見時才會觸發事件。
  • 設定畫面持續時間下限:可見多久時才會觸發。
  • 觀察 DOM 改變情形:勾選這個方塊,即可讓觸發條件追蹤隨著 DOM 改變情形而顯示的相符元素。

這裡一般不去修改它。

 

設定代碼

GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics(分析):GA4 事件」,命名為“表GA4-Event Tracking-Article Impression”,做如下設定:

用Google Tag Manager裡的元素可見度做事件追蹤

 

元素可見度啟用後,會有一些內置變數可以用,你可以將它設定為事件參數。

 

GTM 中預覽調試

接下來就是調試了,在GTM中點擊右上角的“預覽”進入調試狀態,如果你還不知道怎麼調試,請看:新版Google Tag Manager 預覽模式指南——Tag Assistant 

調試頁面打開後,返回到Tag Assistant頁面,在事件列表裡找到Element Visibility,這個就是元素可見度觸發條件,點擊它:

用Google Tag Manager裡的元素可見度做事件追蹤

可以看到Tag  Fired裡,我們設定的代碼是成功觸發。

 

 


如果您在操作上仍有任何疑問,歡迎留言交流,或加入:Google Analytics 4交流社團發問
Like (0)
發佈我的留言
取消留言
表情 贴图 加粗 删除线 居中 斜体

Hi,*为發佈留言必須填寫。

  • 顯示名稱*
  • 電子郵件地址*
  • 個人網站網址