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

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

28/12/2023

538

0

Chia sẻ lên Facebook
Tracking Gravity Forms bằng Google Tag Manager không cần biết code

Tracking Gravity Forms là việc không đơn giản đối với người mới bắt đầu, nó đòi hỏi nhiều yếu tố kỹ thuật cao. Gravity Forms là một plugin WordPress ưu việt, cho phép bạn tạo các biểu mẫu đơn giản hoặc phức tạp cho website của mình. Việc tracking Gravity Forms có thể giúp bạn hiểu rõ hơn về hành vi của khách truy cập, hiệu suất của biểu mẫu, và hướng để cải thiện chúng. Trong bài viết này, chúng ta sẽ xem xét phương pháp phổ biến nhất: tracking Gravity Forms bằng Google Tag Manager.

 

Ngoài ra, có nhiều cách khác như: Google Analytics Add-On, Google Measurement Protocol, Plugin của bên thứ ba,.. Nếu bạn cần trợ giúp, hãy đặt lịch tư vấn với chuyên gia tracking trên app Askany. Họ có đầy đủ kinh nghiệm và kiến ​​thức để giúp bạn đạt được mục tiêu của mình.

 

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:

Tracking Gravity Forms

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!).

Tracking Gravity Forms

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:

Tracking Gravity Forms

Đâ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.

 

Tracking Gravity Forms

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.

Tracking Gravity Forms

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:

Tạo Trình kích hoạt

Mặc dù có sự kiện formSubmission trong bảng điều khiển Preview and Debug, bạn không thể sử dụng sự kiện đó làm trình kích hoạt. Tại sao? Bởi vì theo mặc định, Google Tag Manager không nhận ra điều gì đang xảy ra trong Data Layer.

 

Vậy giải pháp là gì? Bạn sẽ cần tạo trình Custom Event trigger. Chuyển đến tài khoản Google Tag Manager của bạn và nhấp vào Triggers > New. Tạo trình Custom Event trigger với các điều kiện sau:

Tracking Gravity Forms

Trong bước tiếp theo, chúng ta sẽ tạo thẻ Sự kiện Google Analytics 4. Nếu bạn muốn chuyển ID biểu mẫu với nó, hãy tạo Biến Data Layer. Sẽ rất hữu ích nếu bạn có nhiều biểu mẫu Gravity trên một trang hoặc trang web.

Tracking Gravity Forms

 

Thẻ Google Analytics 4

Quan trọng: Google đã thay thế thẻ cấu hình GA4 bằng Google Tag. Do đó, nó đã làm thay đổi một số phần của giao diện GTM.

Cuối cùng, hãy chuyển dữ liệu tới Google Analytics bằng cách tạo thẻ sự kiện với các cài đặt sau:

Tracking Gravity Forms

Như tôi đã đề cập trước đây, vui lòng xóa biến {{dlv – formID} nếu bạn muốn. Chỉ định form_submission trình Custom Event trigger mà bạn đã tạo trong chương trước của bài đăng blog này.

 

Đừng quên kiểm tra nhiều tình huống khác nhau bằng Chế độ xem trước và gỡ lỗi GTM:

  • Gửi biểu mẫu khi tất cả các trường bắt buộc đều chứa một số giá trị.
  • Hãy thử để trống ít nhất một trường bắt buộc và thử gửi biểu mẫu.

Ngoài ra, đừng quên kiểm tra báo cáo Google Analytics Real-time Event. Tất cả các lần gửi biểu mẫu thành công sẽ được hiển thị ở đó.

 

Việc tracking Gravity Forms là một cách tuyệt vời để hiểu hiệu suất của biểu mẫu và cải thiện trải nghiệm người dùng cho doanh nghiệp. Bằng cách sử dụng phương pháp mà chúng tôi đề cập trong bài viết này, bạn có thể bắt đầu thu thập dữ liệu theo dõi ngay hôm nay. Nếu bạn cần tư vấn tạo và tùy chỉnh nhiều biểu mẫu Gravity Forms cho các lĩnh vực khác nhau. Hãy liên hệ với chuyên gia trên app Askany để được hỗ trợ ngay hôm nay.

Tôi là Tô Lãm với hơn 4 năm kinh nghiệm trong lĩnh vực IT, Business Analyst, Data Analyst, Tracking,... cho rất nhiều doanh nghiệp SME. Tôi tốt nghiệp trường Công nghệ Thông tin cùng với kỹ năng và kiến thức trau dồi của mình, tôi mong muốn được chia sẻ các thông tin hữu ích dến với người đọc thông qua các bài viết trên Topchuyengia, mọi người hãy follow mình nhé.

Kinh nghiệm thực tế

Tư vấn 1:1

Uy tín

Đây là 3 tiêu chí mà TOPCHUYENGIA luôn muốn hướng tới để đem lại những thông tin hữu ích cho cộng đồng