Tracking Gravity Forms bằng Google Tag Manager không cần biết code

Cách Tracking Gravity Forms bằng Google Tag Manager

Trong bài viết này, Topchuyengia sẽ hướng dẫn bạn cách để một người không phải là developer vẫn có thể viết một đoạn code nhỏ, sử dụng nó trong Google Tag Manager và chỉ theo dõi chính xác những lần gửi biểu mẫu Gravity thành công.

Listener Gravity Forms

Toàn bộ quá trình theo dõi biểu mẫu trông như thế này:

1. Chúng tôi triển khai auto-event listener chỉ theo dõi các lần gửi biểu mẫu thành công và đẩy các sự kiện đó lên Data Layer.
2. Tạo trình Custom Event trigger (để nhận dạng Sự kiện Data Layer) và Biến Data Layer (bạn có thể tùy chọn hoặc không).
3. Tạo thẻ Sự kiện Google Analytics và liên kết thẻ đó với Trình Custom Event trigger đã nói ở trên.

Bạn có thể đã thử trình kích hoạt Form Submission tích hợp sẵn của Google Tag Manager và nó không hoạt động với Gravity Forms đúng không. Nếu không, bạn sẽ không ở đây và đọc bài viết này, đúng chứ? Đừng lo, bạn không đơn độc vì trình kích hoạt trigger đó rất hiếm khi hoạt động.

Vậy giải pháp là gì? Chúng ta nên (hoặc có thể tạo) Listener Gravity Forms, một hàm JavaScript chỉ lắng nghe các lần gửi biểu mẫu thành công và kích hoạt sự kiện Data Layer. Kết quả là, chúng tôi có thể sử dụng sự kiện đó làm trình kích hoạt và kích hoạt thẻ Sự kiện Google Analytics.

Chúng ta bắt đầu nhé?

>>> Tham khảo: Dạy tracking từ A - Z dành cho người mới cùng chuyên gia

Tạo Listener Gravity Forms

Dưới đây là bước đầu tiên trong việc Tracking Gravity Forms mà chúng tôi muốn hướng dẫn bạn

Bước 1: Kiểm tra xem có API JavaScript không

Mở Google và nhập API Javascript của Gravity Forms. Điều quan trọng là bạn phải tìm API JavaScript chứ không phải API thông thường. Kết quả tìm kiếm của bạn sẽ trông như thế này:

Kết quả tìm kiếm thứ 2 có vẻ đầy hứa hẹn. Hãy nhấp vào nó. Chúng ta nên tiến một bước gần hơn đến việc viết một auto-event listener.

Bước 2: Xem những phương thức API JS nào có sẵn

Bây giờ, bạn cần kiểm tra xem tài liệu API có rõ ràng và dễ hiểu không, ngay cả với những người không biết lập trình. Vì chúng ta chỉ muốn theo dõi các lần gửi biểu mẫu THÀNH CÔNG, hãy tìm kiếm các cụm từ như “success”, “form submission”, “confirmation”, v.v. Bạn hiểu ý tôi chứ?

Chúng ta đang tìm kiếm một phương thức API liên quan đến các lần gửi biểu mẫu thành công. Thành thật mà nói, tôi đã mất một lúc để tìm ra trang phù hợp trong tài liệu của Gravity Form (vì họ cung cấp RẤT NHIỀU nội dung).

Ở phía bên trái của Gravity Forms API reference, bạn sẽ thấy một thanh điều hướng. Hãy đi đến Hooks > Filters > Confirmations > gform_confirmation_loaded.

Hook JavaScript này (gform_confirmation_loaded) được kích hoạt khi trang "Success" của biểu mẫu được tải (đây chính xác là thứ chúng ta đang tìm kiếm!).

Chúng ta đang tiến gần hơn một bước tới thành công nhưng vẫn còn một số điều chúng ta cần xác minh.

Bước 3: Mẫu code có sẵn và sử dụng đơn giản

Ngay cả khi API cung cấp các phương thức hữu ích và tài liệu được viết rất tốt, vẫn còn một yêu cầu quan trọng: Liệu API Reference có thực sự dễ hiểu đối với người không chuyên? Liệu một người không biết lập trình có thể sử dụng nó một cách dễ dàng không?

Thành thật mà nói, việc viết các ví dụ mã siêu đơn giản trong API references có thể không hữu ích đối với người mới bắt đầu. Đôi khi điều đó gần như là không thể.

Ví dụ: Wistia cung cấp tài liệu tham khảo API Javascript được viết rất tốt, nhưng các ví dụ không dành cho các nhà phát triển mới bắt đầu. Nhưng vẫn còn rất nhiều tình huống mà đơn giản là không tồn tại một giải pháp tracking có sẵn.

Trong trường hợp của Wistia, chúng tôi thật may mắn khi có Bounteous vì các nhà phát triển của họ đã đăng Listener Wistia tuyệt vời này cho GTM. Nhưng vẫn có nhiều trường hợp mà giải pháp theo dõi có sẵn đơn giản là không tồn tại.

OK, hãy quay lại Gravity Forms. Tôi đã điều hướng đến hook JavaScript gform_confirmation_loaded và tìm thấy ví dụ code này:

Đây là hoàn hảo! Tôi sẽ giải thích cho bạn cụ thể về code này.

Code này đã sẵn sàng để sử dụng. Nó nói rằng: nếu gform_confirmation_loaded xảy ra, hãy khởi chạy một hàm. Hiện tại, hàm đó đang trống, nhưng chúng ta có thể dễ dàng nhúng sự kiện dataLayer.push chỉ bằng cách thay thế dòng chữ //code to be triggered when the confirmation page is loaded bằng code lớp dữ liệu thực tế.

Bước 4: Thêm (các) sự kiện dataLayer.push

Sao chép mã đó từ tài liệu API Gravity Forms và dán mã đó vào một số trình soạn thảo mã hoặc văn bản đơn giản (ví dụ: Notepad, Notepad++, Sublime, v.v.)

  
      <script type="text/javascript">
  jQuery(document).bind('gform_confirmation_loaded',
  function(event, formID) {
    // code to be triggered when confirmation page is loaded
  });
</script>
  

Xóa //mã sẽ được kích hoạt khi tải trang xác nhận

  
      <script type="text/javascript">
  jQuery(document).bind('gform_confirmation_loaded',
  function(event, formID) {});
</script>
  

Chuẩn bị mã sự kiện dataLayer.push:

  
     window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'formSubmission',
  //you can actually name this even whatever you want
  'formID': formID
});
  

Tại sao tôi thêm formId? Đơn giản đó là vì webhook JavaScript của Gravity Form trả về ID của biểu mẫu (xem function(event, formId) ?). Đây là tùy chọn, nên bạn có thể thoải mái xóa nó.

Bây giờ, hãy merge đoạn mã của Gravity Form với window.dataLayer.push. Kết quả cuối cùng sẽ như thế này:

  
      <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery(document).bind("gform_confirmation_loaded",
    function(event, formID) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        'event': "formSubmission",
        'formID': formID
      });
    });
  });
</script>
  

Tuyệt vời! Chúng tôi sắp hoàn thiện auto-event listener của Gravity Form!

Bước 5: Tạo thẻ Custom HTML và kiểm tra

Trong tài khoản Google Tag Manager, hãy tạo thẻ HTML tùy chỉnh mới. Dán mã bạn đã tạo ở bước trước.

Xong! Lưu thẻ và chỉ định trình kích hoạt bạn muốn, ví dụ: All Pages (hoặc tốt nhất là chỉ trên những trang có biểu mẫu).

Đừng quên kiểm tra Listener bằng Chế độ xem trước và gỡ lỗi GTM. Tải trang với bất kỳ Gravity Forms nào và hoàn tất việc gửi bài kiểm tra. Sự kiện Data Layer có tên formSubmission sẽ xuất hiện trong luồng sự kiện. Nhấp vào nó và kiểm tra xem dữ liệu nào đã được chuyển đến Data Layer. Nó sẽ trông như thế này.

Bước 6: Hoàn thành

Như vậy là bạn đã Tracking Gravity Forms bằng Google Tag Manager thành công Nhưng đừng dừng lại ở đó. Vẫn còn một số việc phải làm để theo dõi Gravity Forms bằng Google Tag Manager.

CÓ THỂ  BẠN QUAN TÂM:

• Cách Tracking Convertkit Forms dễ dàng
• Hướng dẫn Tracking Contact Form 7 hiệu quả nhất
• Facebook Conversion Tracking với Google Tag Manager