Sử dụng jQuery để lắng nghe và vượt qua theo dõi sự kiện Google Analytics cho bất kỳ lần nhấp nào

jQuery Lắng nghe các nhấp chuột để vượt qua Theo dõi sự kiện Google Analytics

Tôi ngạc nhiên rằng nhiều tích hợp và hệ thống hơn không tự động bao gồm Theo dõi sự kiện Google Analytics trong nền tảng của họ. Phần lớn thời gian của tôi làm việc trên các trang web của khách hàng là phát triển tính năng theo dõi Sự kiện để cung cấp cho khách hàng thông tin họ cần về những hành vi của người dùng đang hoạt động hoặc không hoạt động trên trang web.

Gần đây nhất, tôi đã viết về cách theo dõi lần nhấp vào mailto, điện thoại nhấp chuộtĐệ trình biểu mẫu yếu tố. Tôi sẽ tiếp tục chia sẻ các giải pháp mà tôi đang viết với hy vọng rằng nó sẽ giúp bạn phân tích hiệu suất trang web hoặc ứng dụng web của mình tốt hơn.

Ví dụ này cung cấp một phương tiện rất đơn giản để kết hợp Theo dõi sự kiện Google Analytics vào bất kỳ thẻ liên kết nào bằng cách thêm phần tử dữ liệu bao gồm Danh mục sự kiện Google Analytics, Hành động sự kiện Google Analytics và Nhãn sự kiện Google Analytics. Đây là một ví dụ về liên kết kết hợp phần tử dữ liệu, được gọi là gaevent:

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

Điều kiện tiên quyết cho trang web của bạn là bao gồm jQuery trong đó… mà tập lệnh này được cung cấp. Sau khi trang của bạn được tải, tập lệnh này sẽ thêm một trình xử lý vào trang của bạn cho bất kỳ ai nhấp vào một phần tử có gaevent dữ liệu… sau đó nó nắm bắt và phân tích cú pháp danh mục, hành động và nhãn mà bạn chỉ định trong trường.

<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>

Lưu ý: Tôi đã bao gồm một cảnh báo (đã nhận xét) để bạn có thể kiểm tra những gì đã thực sự vượt qua.

Nếu bạn đang chạy jQuery trên WordPress, bạn sẽ muốn sửa đổi mã một chút vì WordPress không đánh giá cao phím tắt $:

<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>

Đây không phải là tập lệnh mạnh mẽ nhất và bạn có thể cần phải thực hiện thêm một số thao tác dọn dẹp, nhưng nó sẽ giúp bạn bắt đầu!