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

by

有許多你可能想追蹤的網站互動：滾動深度，圖片點擊，提交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，但不必為此寫一行代碼。 這是快速和容易的，由於這些原因，分析師的標籤工具箱是一個夢幻般的方法。