Google代碼管理工具教學 | 加入GA事件追蹤

有許多你可能想追蹤的網站互動:滾動深度,圖片點擊,提交email地址,等等。透過Google分析 (Google Analytics, GA) 的事件標簽,這些都可以被追蹤,而這個代碼又可以透過Google代碼管理工具(Google Tag Manager,GTM)進行設置。

❓ GTM 是個非常有彈性的工具, 允許各種潛在的標簽設計模式,就像一個光譜。其中一些模式完全使用GTM的內置自動事件追蹤,另一些模式主要依靠開發人員為數據層增加鍵值對,而另一些模式則位於中間的某個位置。

這系列文章分享了最常見收集網站互動數據的方法- 如何使用GTM將事件追蹤數據傳送到GA。

方法1(本文):GTM的內置互動追蹤(自動事件追蹤功能)

Method 2: Custom HTML and JS Tags in GTM (英文)

Method 3: Developer Pushes to a Pass-Through Data Layer (英文)

Method 4: Combined Auto-Event & Data Layer (英文)

方法1:GTM的内建互動追蹤

優點: 這個方法的優點是,你不需要寫任何代碼或者使用工程師資源。在GTM,你可以全部DIY,這個方法可以來追蹤頁面上幾乎所有的元素。

缺點: 因爲這個方法依賴已經存在的頁面結構,如果界面改變,追蹤會斷掉。如果頁面沒有為標籤設置清晰的“錨”,或者你需要從站點的後端訪問某些值(例如使用者身份號碼),你仍然需要工程師的支持。 這個方法,需要每個組件都有標籤,所以你的GTM容器可能會變得非常混亂。 你需要使用好的命名和組織系統。

實施步驟概述

  1. 在GTM創建新的Universal Analytics代碼,使用Track Type = Event
  2. 使用文字和/或變數填 Category, Action, 和 Label (事件類別,事件動作,和活動標籤)。 常常你會組合這些。記得用 很合理的命名邏輯 ,這樣之後看還會有道理。
  3. 使用GTM的內置自動觸發條件(如 “All Elements” 或 “Just Links”)。 通常,你的觸發條件是Click Element 等於一個CSS選擇.

詳細的設置例子

在這個例子,我們會一步一步的追蹤使用者的點擊在很受歡迎的網站 stackoverflow.com 的導航欄 (navigation bar)

event-tracking-methods-img0

步驟1:設定新的Google 分析的事件標簽

在GTM用這些設定來建立新代碼:點擊代碼 》 新增 》Universal Analytics > Event (事件)
event-tracking-methods-img1

步驟2:設定事件類別,事件動作,和活動標籤

在這裡你需要命名標籤並填充事件字段。 在這裡,我將其命名為 GA – Event – Navbar, 並用 Category = Header, Action = Clicked Navigation Bar, 和 Label = {{Click Text}}.

event-tracking-methods-img2

{{Click Text}}是一個內置的變數,可以自動收集任何元素被點擊的文本。 對於這個例子,我們只是追蹤包含文本的導航欄的一部分; 導航欄的其他部分將需要額外的標籤。

步驟3:保存標籤

點擊保存。 每個標籤至少需要一個觸發條件才能觸發,所以GTM會給你彈出一個警告,提示“No Triggers Selected”。 現在忽略它,然後點擊保存標籤。

步驟4:添加觸發條件

現在,我們將建立並選擇標籤的觸發條件。 對於事件追蹤,你最常使用的是點擊追蹤。 點擊追蹤有兩種形式:All Elements (所有元素) 和 Just Links (鏈接而已)。 All Elements 會追蹤頁面上的所有點擊,包括不鏈接到其他網址的點擊。 Just Links 只會追蹤鏈接到其他網址。

對於這個例子,點擊觸發條件(Triggers)》 新增 》觸發條件類型=Just Links。

event-tracking-methods-img3

步驟5: 選擇何時觸發條件的設定

在Click – Just Links設置框中,選擇“這項觸發條件的啟動時機”= Some Link Clicks 的單選按鈕。

這將打開一個選項,它說“當有事件發生且這些條件全都符合時,請啟動這個觸發條件”。 從下拉選項中,選擇 Click Element 符合 CSS 選擇器 (matches CSS selector):

event-tracking-methods-img4

步驟6: 在頁面上找到CSS選擇器

要確定想追蹤的元素的CSS選擇器,請右鍵單擊你感興趣的元素,然後單擊“檢查” (Inspect)。 這樣,可以查看DOM並找到最適合你的元素的CSS選擇器。

event-tracking-methods-img5

在這種情況下,它看起來像我們感興趣的所有導航鏈接存在於 class = navigation.

❓ 請注意,若希望盡可能具體,以免意外追踪頁面上的不需要的活動,同時還要確保不會錯過與精確選擇器不匹配的點擊。 這通常發生在元素嵌套在其他元素內,例如一個按鈕的外邊框包含一個單獨的類。 減輕這種情況的最好方法是使用Inspect工具來確保你的選擇器覆蓋整個可點擊範圍。 然後輸入該選擇器以及其後代的通配符。 這將確保跟踪是否在外圈或元素內點擊它。

步驟7: 完整觸發條件配置

使用Click Element 符合 CSS 選擇器 .navigation * 來完整觸發條件
event-tracking-methods-img6

步驟8: 完整代碼

把新的觸發條件加入到你的事件代碼。 預覽,測試和發布.

加入 Google Analytics 事件追蹤結論:

使用CSS選擇器進行事件追蹤,已經成為將標籤權力轉移給網絡分析師的巨大轉變。 雖然它需要熟悉CSS和DOM,但不必為此寫一行代碼。 這是快速和容易的,由於這些原因,分析師的標籤工具箱是一個夢幻般的方法。

Leave a Comment