如何使用 JQuery 在 Google Analytics Events 中跟踪 Elementor 表單提交

如何在 Google Analytics Events 中跟踪 Elementor 表單提交

過去幾週我一直在開發一個客戶端 WordPress 站點,該站點具有相當多的複雜性。 他們正在使用 WordPress 與集成 ActiveCampaign 用於培養潛在客戶和 Zapier 整合到 Zendesk出售 通過 元素形式. 這是一個很棒的系統……向需要信息的人啟動點滴營銷活動,並在需要時將潛在客戶推送給適當的銷售代表。 Elementor 的形式靈活性和外觀給我留下了深刻的印象。

最後一步是通過 Google Analytics 為客戶提供分析儀表板,為他們提供表單提交的月度表現。 他們安裝了 Google 跟踪代碼管理器,因此我們已經在網站上捕獲電子商務交易和 YouTube 觀看活動。

我曾多次嘗試利用 Google 標籤管理器中的 DOM、觸發器和事件來捕獲 Elementor 的成功表單提交,但根本沒有任何運氣。 我測試了大量不同的方法來監控頁面,觀察通過 AJAX 彈出的成功消息,但它不起作用。 所以......我做了一些搜索並從Tracking Chef找到了一個很好的解決方案,稱為 使用 GTM 進行防彈 Elementor 表單跟踪.

該腳本利用 jQuery的 和 Google 標籤管理器來推送 谷歌分析事件 當表單成功提交時。 通過一些小的編輯和一項語法改進,我擁有了我需要的一切。 這是代碼:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

挺巧妙的,看提交成功,然後通過 形成 作為類別, 目的地名稱 作為行動,和 服從 作為標籤。 通過使目標程序化,您可以簡單地在每個頁面的頁腳中使用此代碼來觀察表單提交。 所以……當您添加或修改表單時,您永遠不必擔心更新腳本或將其添加到另一個頁面。

通過 Elementor 自定義代碼安裝腳本

如果您是代理商,我強烈建議您為所有客戶無限升級和使用 Elementor。 這是一個堅實的平台,合作夥伴集成的數量繼續飆升。 將它與一個插件結合起來 聯繫表格數據庫 您還可以收集所有提交的表單。

元素專業 內置了一個很棒的腳本管理選項。以下是您輸入代碼的方法:

元素自定義代碼

  • 導航 元素 > 自定義代碼
  • 命名您的代碼
  • 設置位置,在這種情況下結束 身體標籤.
  • 如果您要插入多個腳本並設置它們的順序,請設置優先級。

通過 GTM 向 GA 活動提交 Elementor 表單

  • 點擊更新
  • 系統會要求您設置條件並將其設置為所有頁面的默認值。
  • 刷新你的緩存,你的腳本就上線了!

預覽您的 Google 跟踪代碼管理器集成

Google Tag Manager 有一個很棒的機制,可以連接到瀏覽器實例並實際測試您的代碼以觀察變量是否被正確發送。 這很重要,因為 Google Analytics 不是實時的。 如果您沒有意識到這一點,您可以測試、測試和測試,如果數據沒有顯示在 Google Analytics 中,您會感到非常沮喪。

我不會在這裡提供有關如何操作的教程 預覽和調試 Google 標籤管理器……我假設你知道。 我可以在我連接的測試頁面上提交我的表單,並根據需要查看推送到 GTM 數據的數據:

谷歌標籤管理器數據層

在這種情況下,類別被硬編碼為表單,目標是聯繫我們表單,標籤是提交。

在 Google Tag Manager 中設置數據變量、事件、觸發器和標籤

最後一步是設置 Google Tag Manager 以捕獲這些變量並將它們發送到為事件設置的 Google Analytics Tag。 Elad Levy 在他的另一篇文章中詳細介紹了這些步驟—— Google Tag Manager 中的通用事件跟踪.

設置完成後,您將能夠在 Google Analytics(分析)中看到事件!

獲取 Elementor Pro

披露:在整篇文章中,我都使用我的會員鏈接。

6 個評論

  1. 1
  2. 3
  3. 5

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.