使用 jQuery 監聽並通過 Google Analytics 事件跟踪進行任何點擊

jQuery 監聽點擊以通過 Google Analytics 事件跟踪

我很驚訝更多的集成和系統不會自動包含 谷歌分析事件跟踪 在他們的平台上。 我在客戶網站上工作的大部分時間都在開發事件跟踪,以便為客戶提供他們需要的關於哪些用戶行為在網站上有效或無效的信息。

最近,我寫了關於如何跟踪 郵件點擊次數, 電話點擊次數Elementor 表單提交. 我將繼續分享我正在編寫的解決方案,希望它能幫助您更好地分析您的站點或 Web 應用程序的性能。

此示例通過添加包括 Google Analytics 事件類別、Google Analytics 事件操作和 Google Analytics 事件標籤的數據元素,提供了一種將 Google Analytics 事件跟踪合併到任何錨標記的非常簡單的方法。 這是一個包含數據元素的鏈接示例,稱為 事件:

<a href="#" data-gaevent="Category,Action,Label">Click Here</a>

您的網站的先決條件是在其中包含 jQuery……這個腳本是由它提供支持的。 一旦你的頁面被加載,這個腳本會為你的頁面添加一個監聽器,讓任何人點擊一個元素 事件 數據……然後它會捕獲並解析您在字段中指定的類別、操作和標籤。

<script>
  $(document).ready(function() {      
    $(document).on('click', '[data-gaevent]', function(e) {
      var $link = $(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

注意:我已經包含了一個警報(已註釋掉),以便您可以測試實際通過的內容。

如果您在 WordPress 上運行 jQuery,您需要稍微修改代碼,因為 WordPress 不支持 $ 快捷方式:

<script>
  jQuery(document).ready(function() {      
    jQuery(document).on('click', '[data-gaevent]', function(e) {
      var $link = jQuery(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

它不是最強大的腳本,您可能需要做一些額外的清理工作,但它應該可以幫助您入門!