Cách theo dõi các lần gửi biểu mẫu phần tử trong Sự kiện Google Analytics bằng JQuery

Cách theo dõi các lần gửi biểu mẫu phần tử trong sự kiện Google Analytics

Tôi đã làm việc trên một trang web WordPress của khách hàng trong vài tuần qua có một số phức tạp. Họ đang sử dụng WordPress với sự tích hợp để ActiveCampaign để nuôi dưỡng khách hàng tiềm năng và Zapier tích hợp vào Bán Zendesk thông qua Dạng nguyên tố. Đó là một hệ thống tuyệt vời… khởi động các chiến dịch nhỏ giọt cho những người yêu cầu thông tin và đưa khách hàng tiềm năng đến đại diện bán hàng thích hợp khi được yêu cầu. Tôi thực sự ấn tượng với sự linh hoạt về hình thức và giao diện của Elementor.

Bước cuối cùng là cung cấp trang tổng quan phân tích cho khách hàng thông qua Google Analytics để cung cấp cho họ hiệu suất hàng tháng đối với việc gửi biểu mẫu. Họ đã cài đặt Trình quản lý thẻ của Google, vì vậy chúng tôi đã nắm bắt các giao dịch thương mại điện tử và hoạt động xem YouTube trên trang web.

Tôi đã thử sử dụng DOM, trình kích hoạt và sự kiện trong Trình quản lý thẻ của Google để ghi lại việc gửi biểu mẫu thành công cho Elementor nhưng hoàn toàn không gặp may. Tôi đã thử nghiệm rất nhiều cách khác nhau để theo dõi trang, theo dõi thông báo thành công sẽ bật lên qua AJAX và nó không hoạt động. Vì vậy,… tôi đã thực hiện một số tìm kiếm và tìm thấy một giải pháp tuyệt vời từ Tracking Chef, được gọi là Theo dõi biểu mẫu Phần tử chống đạn với GTM.

Tập lệnh sử dụng jQuery và Trình quản lý thẻ của Google để đẩy Sự kiện Google Analytics khi biểu mẫu được gửi thành công. Với một số chỉnh sửa nhỏ và một cải tiến cú pháp, tôi đã có mọi thứ mình cần. Đây là mã:

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

Nó khá khéo léo, xem để gửi thành công, sau đó vượt qua Mẫu như thể loại, Tên điểm đến với tư cách là Hành động và Thông tin như nhãn. Bằng cách làm cho mục tiêu có lập trình, bạn chỉ cần có mã này ở chân trang của mỗi trang để quan sát việc gửi biểu mẫu. Vì vậy,… khi bạn thêm hoặc sửa đổi biểu mẫu, bạn không bao giờ phải lo lắng về việc cập nhật tập lệnh cũng như thêm nó vào một trang khác.

Cài đặt tập lệnh thông qua mã tùy chỉnh phần tử

Nếu bạn là một đại lý, tôi thực sự khuyên bạn nên nâng cấp không giới hạn và sử dụng Elementor cho tất cả khách hàng của bạn. Đó là một nền tảng vững chắc và số lượng tích hợp đối tác tiếp tục tăng vọt. Kết hợp nó với một Plugin như Cơ sở dữ liệu biểu mẫu liên hệ và bạn cũng có thể thu thập tất cả các lần gửi biểu mẫu của mình.

Elementor Pro có một tùy chọn quản lý tập lệnh tuyệt vời được tích hợp ngay. Đây là cách bạn có thể nhập mã của mình:

Mã tùy chỉnh Elementor

  • Hướng đến Elementor> Mã tùy chỉnh
  • Đặt tên mã của bạn
  • Đặt vị trí, trong trường hợp này là kết thúc thẻ cơ thể.
  • Đặt mức độ ưu tiên nếu bạn có nhiều hơn một tập lệnh mà bạn muốn chèn và đặt thứ tự của chúng.

Gửi biểu mẫu phần tử tới Sự kiện GA qua GTM

  • Bấm cập nhật
  • Bạn sẽ được yêu cầu đặt điều kiện và chỉ cần đặt điều kiện đó thành mặc định của tất cả các trang.
  • Làm mới bộ nhớ cache của bạn và tập lệnh của bạn đang hoạt động!

Xem trước tích hợp Trình quản lý thẻ của Google của bạn

Trình quản lý thẻ của Google có một cơ chế tuyệt vời để kết nối với phiên bản trình duyệt và thực sự kiểm tra mã của bạn để quan sát xem các biến có được gửi đúng cách hay không. Điều này là cần thiết vì Google Analytics không phải là thời gian thực. Bạn có thể kiểm tra và kiểm tra và kiểm tra và thực sự thất vọng vì dữ liệu không hiển thị trong Google Analytics nếu bạn không nhận ra điều này.

Tôi sẽ không cung cấp một hướng dẫn ở đây về cách xem trước và gỡ lỗi Trình quản lý thẻ của Google… Tôi sẽ giả sử bạn biết. Tôi có thể gửi biểu mẫu của mình trên trang kiểm tra được kết nối của mình và xem dữ liệu được đẩy sang dữ liệu GTM khi nó cần:

lớp dữ liệu trình quản lý thẻ của google

Trong trường hợp này, danh mục được mã hóa cứng là Biểu mẫu, mục tiêu là biểu mẫu Liên hệ với chúng tôi và nhãn là Gửi.

Trong Trình quản lý thẻ của Google, Thiết lập Biến dữ liệu, Sự kiện, Trình kích hoạt và Thẻ

Bước cuối cùng của việc này là thiết lập Trình quản lý thẻ của Google để nắm bắt các biến đó và gửi chúng đến Thẻ Google Analytics được thiết lập cho một sự kiện. Elad Levy nêu chi tiết các bước này trong bài đăng khác của anh ấy - Theo dõi sự kiện chung trong Trình quản lý thẻ của Google.

Khi chúng được thiết lập, bạn sẽ có thể xem Sự kiện trong Google Analytics!

Tải xuống Elementor Pro

Tiết lộ: Tôi đang sử dụng các liên kết liên kết của mình trong suốt bài viết này.

6 Comments

  1. 1
  2. 3

    Tôi đang sử dụng nhiều bước trong biểu mẫu phần tử, nhưng tôi muốn theo dõi sự kiện khi người dùng nhấp vào Nút Tiếp theo.
    Bạn có thể biết tôi sự kiện này. Cảm ơn!

  3. 5

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.