Google Tag Manager 教程第 4 部分：跟踪表單提交 - 高級

在我們更新的 Google 標籤管理器教程的第 3 部分中，我們介紹了使用表單提交觸發器進行表單跟踪，這是掌握聯繫表單跟踪的一種簡單方法。 但是，根據表單的代碼及其技術，這可能並不總是有效。 這可能與現場 JavaScript 問題或 GTM 未獲取的表單提交相關聯。

在我們系列的最後一部分中，我們將在元素可見性觸發器的幫助下仔細研究表單提交跟踪。 這種類型的觸發器不僅適用於表單，而且適用於所有類型的彈出窗口和顯示橫幅和通知。

Google Analytics 不會自動跟踪此活動，但 Google Tag Manager (GTM) 提供了一種用於跟踪表單提交的自動化解決方案。

在本教程中，我們假設您已經擁有 Google 跟踪代碼管理器帳戶、創建了一個容器並將其安裝在您的網站上。 您還應該為您的網站設置一個 Google Analytics 帳戶並將其鏈接到 GTM。

是什麼讓表單跟踪變得困難？

讓我們退後一步，闡明為什麼有這麼多不同的表單跟踪技術。 有各種類型的表格，並且沒有關於如何開發這些表格的全球標準，因此，這使得對其進行跟踪具有挑戰性。 以下是提交表單後可能在您的網站上發生的最常見場景/事件的概述：

• 該表單將用戶重定向到感謝頁面：太好了，這是通過Pageview自動跟踪的。
• 該表格顯示了一個感謝喲ü通知後的形式提交按鈕被點擊：偉大的，如果它發出了一個表單提交給GTM。 在我們的博客文章教程中閱讀更多相關信息。
• 表單刷新並顯示感謝文本：具有挑戰性但可以使用元素可見性觸發器。
• 一個彈出窗口通知用戶提交成功：使用元素可見性觸發器具有挑戰性但並非不可能。

如何開始表單跟踪

首先，我們建議您啟用 GTM 的內置表單變量並創建一個表單提交觸發器來監聽所有表單提交。 在我們上一篇博文教程中閱讀有關設置的更多信息。 表單自動事件偵聽器將檢測所有標準提交瀏覽器事件。 使用您的表單運行一些測試。

如果 GTM 未在預覽和調試模式下記錄表單提交，則標準跟踪方法將不起作用，您將不得不使用替代方法。 這是很常見的，這就是為什麼我們將使用一個很棒的替代方案：元素可見性觸發器。

元素可見性觸發器解釋

元素可見性 (EVB) 觸發器跟踪特定元素何時出現在屏幕上（由於單擊、滾動或其他交互），因此具有多種用例。 當表單成功提交後出現特定的感謝信息時，可以將此技術應用於表單。 這可以是同一表單頁面上的感謝通知、表單頁面重新加載時的感謝橫幅或彈出窗口。 有關更多實際示例，請單擊此處。

簡而言之，只要您指定的元素出現在瀏覽器的視口中，就會觸發元素可見性觸發器。 視口是瀏覽器窗口的可見區域。 當元素在其中可見時，用戶可以查看它。

對於選擇方法，要確定要定位的元素，有兩個選項可供選擇：

• 元素 ID ：這與頁面上具有給定 ID 的第一個元素相匹配。 如果您只有一個元素要跟踪，則此方法效果很好。
• CSS Selector ：它匹配頁面上適合您的選擇器的元素或一組元素，適用於跟踪可以出現在頁面上的多個元素。

第 1 步：查找唯一標識符

首先檢查顯示的表單成功消息。

為此，請右鍵單擊以訪問瀏覽器的開發人員工具。 例如，在 Chrome 中，右鍵單擊要檢查的元素並選擇Inspect element 。 這將向您顯示各種信息，例如消息的內容、其 CSS 類、ID 和更多元素。 在我們下面的示例中，消息具有唯一的 ID提交消息，可用作EVB 觸發器中的條件。

步驟 2：創建元素可見性觸發器

觸發器定義了我們想要跟踪的在用戶視口中可見的內容。 在這種情況下，檢查感謝信息是否出現。

對於觸發器設置，請按照下列步驟操作：

• 導航到左側邊欄中的觸發器並創建一個新觸發器。
• 將Untitled Trigger替換為描述性名稱，例如EVB – Contact – Form Submitted 。
• 選擇觸發器類型：元素可見性。

對於觸發器配置，您將設置：

• 選擇方法：從下拉列表中選擇ID 。
• 元素 ID :提交的消息
  • 這將使用您在第 1 步中確定的唯一ID來準確指定您要跟踪的感謝信息。
• 何時觸發此觸發器：每頁一次
  • 這意味著當與ID匹配的元素對查看者可見時，它只會在當前頁面上觸發一次。
  • 當使用CSS 選擇器在頁面上跟踪多個元素時，其他兩個選項會很有用
• 最小可見百分比：50
  • 您可以在此處指定一個百分比值，即需要在視口中顯示多少元素才能觸發觸發器。 因此，如果將該值設置為“50”，則匹配元素的至少 50% 需要可見。
  • 默認情況下，元素必須在屏幕上至少有 50% 可見才能觸發事件。 這在我們的例子中就足夠了。
• 觀察 DOM 更改：選中此框可啟用觸發器以跟踪在 DOM 更改時出現的匹配元素。
  • 此設置可讓您在首次加載聯繫表單時跟踪 DOM（文檔對像模型）中可能不存在的元素的可見性。 換句話說，這將等待帶有感謝信息的 HTML 元素出現。
• 觸發觸發器的其他條件：
  • 由於我們使用了一個ID ，它應該是這個表單唯一的，我們不需要在這裡設置更多的條件。
  • 如果此ID也用於其他表單，建議將頁面路徑設置為包含呈現相應表單的頁面

單擊保存以完成觸發器設置。

第 3 步：創建表單提交事件標籤

跟踪表單提交的最後一步是簡單地創建一個標記，該標記將使用您想要的信息在 Google Analytics 中記錄事件。 當滿足您在上一步中設置的元素可見性觸發器的條件時，將觸發該事件。 現在，按照以下屏幕截圖所示創建標籤：

步驟 4：保存版本、測試和發布

您剛剛創建的標籤在您發布之前不會開始工作，但首先，您應該徹底測試它是否按預期工作。 保存標籤後，啟用預覽模式（單擊右上角的“預覽”），轉到您的網站，然後刷新頁面。

確保為您的表單跟踪涵蓋這些測試場景：

• 在未完成的情況下提交聯繫表格。 在這種情況下，代碼不應觸發。
• 使用正確的詳細信息填寫表格，然後單擊提交。 當感謝信息出現在您的屏幕上時，該標籤應立即觸發。

如果一切正常，Google Analytics 實時事件報告應顯示您的事件命中率。 閱讀我們關於Google 標籤管理器測試問題以及在遇到任何問題時如何解決這些問題的博文。

如果您的所有測試都成功，那麼您可以單擊 GTM 中的提交按鈕。 為這個已發布的版本指定一個描述性名稱，例如添加聯繫表單提交事件，然後單擊發布。

結論

雖然標準表單跟踪是最容易設置的，但由於現場 JavaScript 的複雜性，它通常不起作用。 使用元素可見性觸發器為您提供了處理這些邊緣情況的替代方法。 它還使您的數據更加可靠和準確。 通過這種方式，您可以確保不會跟踪提交按鈕上的無效或不需要的點擊，而只會跟踪那些實際完成並成功發送的表單提交。

我們的 Google 標籤管理器教程涵蓋了跟踪外部（出站）鏈接、下載鏈接跟踪和基本表單提交。 您還想跟踪其他類型的事件嗎？ 您需要幫助處理更複雜的案件嗎？ 請隨時與我們聯繫 - 我們很樂意為您提供幫助！ 如需激動人心的更新，請訂閱我們的時事通訊。