Contact Form 7 là một Plugin khá phổ biến dành cho WordPress. Ngày nay, một trong những cách phổ biến nhất để theo dõi tương tác trên trang web là Google Tag Manager và Contact Form 7 cũng không ngoại lệ. Trong bài viết này, tôi sẽ hướng dẫn bạn cách cài đặt chuyển đổi Contact Form 7 bằng Google Tag Manager và GA4
Video hướng dẫn
Sự kiện DOM Contact Form 7
Các nhà phát triển Contact Form 7 đã liệt kê một số sự kiện DOM được gửi đi sau khi xảy ra tương tác biểu mẫu cụ thể:
-
wpcf7invalid : Kích hoạt khi quá trình gửi biểu mẫu AJAX được hoàn tất thành công, nhưng mail chưa được gửi vì có các trường có dữ liệu nhập không hợp lệ.
-
wpcf7spam : Kích hoạt khi việc gửi biểu mẫu AJAX đã được hoàn thành thành công, nhưng mail chưa được gửi vì có thể đã phát hiện thấy hoạt động spam.
-
wpcf7mailsent : Kích hoạt khi quá trình gửi biểu mẫu AJAX được hoàn tất thành công và mail đã được gửi.
-
wpcf7mailfailed : Kích hoạt khi việc gửi biểu mẫu AJAX đã được hoàn thành thành công nhưng không gửi được mail.
-
wpcf7submit : Kích hoạt khi quá trình gửi biểu mẫu AJAX được hoàn thành thành công, bất kể các sự cố khác.
Để biến việc theo dõi sự kiện của Contact Form 7 thành hiện thực, lúc đầu, tôi đã thử nghe sự kiện wpcf7submit , nhưng cuối cùng tôi nhận thấy rằng sự kiện DOM này đã được gửi đi thâm chí khi các trường biểu mẫu bắt buộc có lỗi. Kết quả là tôi đã chuyển sang sự kiện wpcf7mailsent .
Theo dõi sự kiện của Contact Form 7: Trình xử lý sự kiện tự động
Thành phần đầu tiên của theo dõi biểu mẫu là một đoạn mã sẽ lắng nghe và chờ gửi biểu mẫu thành công. Mã đó còn được gọi là trình nghe sự kiện tự động (auto-event listener). Trình nghe sẽ chờ các sự kiện DOM wpcf7mailsent và nếu nó xảy ra, nó sẽ đẩy một số dữ liệu hữu ích đến Data Layer (tên sự kiện, id biểu mẫu và giá trị của tất cả các trường biểu mẫu).
<script> document.addEventListener( 'wpcf7mailsent', function( sự kiện ) { window.dataLayer.push({ "event" : "cf7submission", "formId" : event.detail.contactFormId, "response" : event.detail.inputs }) }); </script>So với các giải pháp khác được tìm thấy trực tuyến, giải pháp này sẽ không chỉ tạo ra sự kiện Data Layer có tên là cf7submission mà còn trả về phản hồi đầy đủ, một mảng gồm mọi trường biểu mẫu và giá trị của nó.
Để triển khai mã này, chuyển đến tài khoản Google Tag Manager, sau đó đến vùng chứa và tạo thẻ HTML tùy chỉnh chỉ kích hoạt trên những trang có chứa biểu mẫu. Giả sử rằng, trong trường hợp này, một biểu mẫu nằm ở chân trang của mỗi trang, vì vậy chúng tôi sẽ kích hoạt nó trên All Pages .
Kiểm tra người nghe
Trước khi tiếp tục, điều quan trọng là kiểm tra xem người nghe có khả năng gửi biểu mẫu thành công hay không. Trong GTM, bật chế độ Xem trước và Gỡ lỗi bằng cách nhấp vào nút Xem trước ở góc bên phải.
Sau đó, bạn sẽ được yêu cầu nhập URL của trang chứa Contact Form 7 của bạn.
Bây giờ, bạn sẽ được chuyển hướng đến trang web đó và bạn sẽ thấy một tiện ích xuất hiện ở góc dưới bên phải.
Bây giờ là lúc để gửi biểu mẫu. Nhập tất cả các trường bắt buộc và nhấp vào GỬI (hoặc bất cứ nội dung nào của nút biểu mẫu). Khi bạn thấy tin nhắn thành công của biểu mẫu, hãy chuyển tới tab (hoặc cửa sổ) trình duyệt của chế độ xem trước GTM. URL của nó chứa tagassistant.google.com .
Nếu mọi thứ hoạt động một cách trôi chảy, bạn sẽ thấy một sự kiện cf7submission ở phía bên trái (giống như trong ảnh chụp màn hình bên dưới).
Nhấp vào cf7submission và chuyển đến tab Data Layer . Những gì bạn sẽ thấy là một mảng gồm tất cả các trường biểu mẫu, tên trường và giá trị của chúng (được nhập bằng khách truy cập). Vì vậy, bạn không chỉ có thể theo dõi việc gửi biểu mẫu thành công mà còn có cơ hội nắm bắt các giá trị trường biểu mẫu.
Lưu ý rằng Google Analytics không cho phép bạn lưu trữ PII trên nền tảng (nhưng dữ liệu đó có thể được gửi đi đến các công cụ khác).
Biến số và yếu tố kích hoạt
Chúng tôi có một số dữ liệu trong Data Layer mà chúng tôi có thể sử dụng:
-
cf7submission là một sự kiện Data Layer nên được chuyển thành trình kích hoạt. Không có thẻ nào sẽ kích hoạt nếu không có trình kích hoạt.
-
Chỉ nhằm mục đích minh họa, chúng tôi cũng sẽ muốn ghi lại dòng chủ đề của việc gửi biểu mẫu và chuyển nó tới Google Analytics 4 sau này. Chúng tôi có thể tìm nạp giá trị của trường đó bằng cách tạo biến Data Layer .
Nếu bạn muốn biến một số sự kiện Data Layer thành điều kiện kích hoạt thẻ, bạn cần tạo trình kích hoạt tùy chỉnh.
Hãy xem xét kỹ hơn những gì đang xảy ra trong Data Layer sau khi sự kiện cf7submission đã xảy ra. Ngoài sự kiện và formld, trình nghe Contact Form 7 cũng đẩy “phản hồi”, đây là một mảng chứa 5 đối tượng. Mỗi đối tượng đại diện cho một trường biểu mẫu. Trong JavaScript, các chỉ số bắt đầu từ 0, không phải từ 1, vì vậy nếu chúng tôi muốn nạp giá trị trường chủ đề của bạn (là đối tượng thứ ba), chúng tôi sẽ phải chọn chỉ số 2 chứ không phải 3.
Cách lấy dữ liệu từ Data Layer, ba cấu trúc dữ liệu khác nhau:
-
Khi tất cả các điểm dữ liệu ở cùng cấp độ
-
Khi có các cấp độ khác nhau (con cái-cha mẹ)
-
Và khi có các mảng.
Trong trường hợp này, chúng ta phải chọn phương án thứ 3, lấy dữ liệu từ các mảng trong Lớp dữ liệu. Để làm như vậy, trước tiên chúng ta phải xác định từ khóa gốc, trong trườn hợp này là response. Sau đó phải đặt chỉ số ( để cho Google Tag Manager biết bạn quan tâm đến đối tượng nào). Lần này là 3 (vì nó là đối tượng thứ 4 trong mảng và trong JavaScript, các chỉ mục bắt đầu từ 0 (0, 1, 2, 3, 4)). Và cuối cùng, chúng ta chọn khóa cuối cùng – giá trị của trường.
Do đó, tên Biến Data Layer là response.3.value
Một biến khác mà tôi khuyên bạn nên tạo là formId cf7submission. Nếu bạn có nhiều biểu mẫu trên một trang web, nó sẽ giúp bạn phân biệt biểu mẫu nào đã được gửi (và bạn sẽ không phải tạo trình kích hoạt và thẻ riêng cho từng Contact Form 7).
Lưu cả hai biến và kiểm tra chúng. Cách tốt nhất để làm điều đó là làm mới chế độ Xem trước và Gỡ lỗi, làm mới trang bằng Biểu mẫu liên hệ 7 và thử gửi lại.
Sau đó, nhấp lại vào sự kiện cf7submission và chuyển đến tab Biến . Bạn nên tìm kiếm hai Biến Data Layer mới được tạo.
Trong ảnh chụp màn hình bên dưới, một biến chứa dòng chủ đề thực tế trong khi biến còn lại tìm nạp ‘ 9′ là ID của biểu mẫu kiểm tra . Nếu bạn nhận được một giá trị không xác định , hãy kiểm tra kỹ xem bạn đã nhập chính xác tất cả cài đặt biến hay chưa. Hãy nhớ rằng tên biến Lớp dữ liệu có phân biệt chữ hoa chữ thường.
Thẻ sự kiện Google Analytics 4
Hai bước đầu tiên của quá trình theo dõi sự kiện Contact Form 7 đã xong. Bây giờ, hãy gửi sự kiện biểu mẫu đến Google Analytics 4 với các cài đặt sau.
Chuyển đến Thẻ -> Mới -> Google Analytics -> Google Analytics: Sự kiện GA4 .
Trong thẻ đó:
-
Nhập ID đo lường GA4 hoặc một biến không đổi có chứa ID đó.
-
Nhập tên của sự kiện (giá trị được đề xuất nếu generate_lead , nhưng bạn có thể đặt tên bất cứ thứ gì bạn muốn)
-
Sau đó mở rộng tham số Sự kiện và nhập hai tham số:
-
form_id và đặt giá trị của nó thành biến Data Layer (trả về ID): {{dlv – formId}}
-
form_subject và đặt giá trị của nó thành biến Data Layer (trả về ID): {{dlv – form_subject}} (hãy nhớ rằng tôi sử dụng giá trị này chỉ nhằm mục đích minh họa. Trên thực tế, nó không mang lại nhiều lợi ích có ý nghĩa để theo dõi các chủ đề biểu mẫu trong các công cụ như GA. Số lượng dữ liệu sẽ quá cao).
-
-
Đặt thẻ để kích hoạt trình kích hoạt Sự kiện tùy chỉnh cf7submission .
Hãy kiểm tra
Lưu tất cả các thay đổi và làm mới chế độ Xem trước và Gỡ lỗi (bằng cách nhấp vào nút TRƯỚC ở góc trên bên phải của Giao diện GTM). Sau đó, bạn sẽ được chuyển hướng đến trang nơi triển khai Contact Form 7 của bạn. Gửi nó và xem xét kỹ những gì đang xảy ra trong tab (hoặc cửa sổ) chế độ Xem trước.
Thẻ sự kiện Google Analytics 4 chỉ được kích hoạt khi biểu mẫu được gửi thành công (nói cách khác, khi sự kiện cf7submission xuất hiện ở phía bên trái của chế độ xem trước). Tuy nhiên, thẻ HTML tùy chỉnh phải kích hoạt trên bất kỳ trang nào (bất kể biểu mẫu có được gửi hay không).
Sau khi thẻ xuất hiện trong phần thẻ được kích hoạt , hãy đi tới DebugView của GA4 và cố gắng tìm thiết bị của bạn (trong bộ chọn ở góc trên bên trái) nếu có nhiều thiết bị.
Sau đó, bạn sẽ bắt đầu thấy các sự kiện đến từ thiết bị của mình (bao gồm cả generate_lead ).
Nhấp vào sự kiện và bạn sẽ thấy các tham số được gửi cùng với sự kiện đó. Nhấp vào bất kỳ tham số nào trong số đó để kiểm tra các giá trị.
Mặc dù thấy các thông số tùy chỉnh trong DebugView, nhưng bạn sẽ không thấy chúng trong các báo cáo GA4 thông thường (hoặc Trung tâm phân tích). Nếu bạn muốn sử dụng hoặc xem chúng, bạn phải đăng ký chúng dưới dạng định nghĩa tùy chỉnh.
Đăng ký thứ nguyên tùy chỉnh
Điều này áp dụng cho mọi thông số sự kiện tùy chỉnh mà bạn gửi tới Google Analytics 4 (và dường như ID biểu mẫu vẫn được coi là thông số tùy chỉnh). Nếu bạn muốn xem hay sử dụng chúng trong những thứ như báo cáo kênh, khám phá biểu mẫu miễn phí, xem thẻ báo cáo của họ trong báo cáo chuẩn, v.v., bạn phải đăng ký tham số tùy chỉnh trong giao diện GA.
Trong Google Analytics 4, hãy chuyển đến Quản trị viên -> Định nghĩa tùy chỉnh. Vì chúng tôi đã gửi 2 thông số tùy chỉnh khi nhấp vào liên kết menu nên chúng tôi phải đăng ký chúng tại đây.
Nhấp vào nút Tạo thứ nguyên tùy chỉnh , sau đó nhập tên của thông số đầu tiên bạn đã gửi. Trong trường hợp của tôi, đó là form_id . Lưu nó. Đảm bảo phạm vi của thứ nguyên là Sự kiện .
Sau đó đăng ký tham số thứ hai và lưu nó. Đôi khi tôi sử dụng các từ “thông số tùy chỉnh” và “thứ nguyên tùy chỉnh” thay thế cho nhau. Nói chung, chỉ số tùy chỉnh và thứ nguyên tùy chỉnh đều được nhóm thành thông số tùy chỉnh.
Trong vòng 24 giờ tới, các thông số tùy chỉnh sẽ bắt đầu xuất hiện trong báo cáo Google Analytics 4 của bạn.
Định cấu hình lượt chuyển đổi trong GA4
Bước cuối cùng của theo dõi sự kiện Contact Form 7: tạo chuyển đổi trong Google Analytics 4. Điều này là không cần thiết, nhưng nếu muốn coi mỗi lần gửi biểu mẫu là một tương tác quan trọng thì bạn nên thực hiện.
Giả sử bạn muốn coi mọi sự kiện generate_lead là một lượt chuyển đổi. Bạn nên đăng nhập vào giao diện Google Analytics 4 và truy cập Quản trị viên -> Chuyển đổi .
Sau đó nhấp vào Sự kiện chuyển đổi mới và nhập generate_lead . Nhấn lưu.
Sau đó, hãy gửi lại Contact Form 7 và kiểm tra GA4 DebugView. Kể từ thời điểm này, sự kiện generate_lead sẽ được hiển thị với biểu tượng màu xanh lục. Điều này có nghĩa là GA4 hiện coi đây là một lượt chuyển đổi.
Những lỗi phổ biến nhất khi thiết lập chuyển đổi Contact Form 7
Nếu bạn đã làm theo tất cả các bước trong bài viết này mà vẫn không thiết lập chuyển đổi Contact Forrm 7 được, thì dưới đây là những lỗi phổ biến nhất mà mọi người mắc phải.
Hy vọng rằng một số trong số chúng sẽ áp dụng cho trường hợp của bạn và bạn có thể giải quyết vấn đề.
Sai lầm 1. Biểu mẫu của bạn không phải là Contact Form 7
Đôi khi, các trang web WordPress sử dụng nhiều plugin biểu mẫu. Ngay cả khi bạn đã cài đặt Contact Form 7, có thể biểu mẫu bạn đang xử lý đang sử dụng một plugin khác.
Cách dễ nhất để kiểm tra xem biểu mẫu của bạn có phải là Contact Form 7 hay không là nhấp chuột phải vào bất kỳ trường biểu mẫu nào.
Sau đó kiểm tra mã của trường biểu mẫu đó. Nếu bạn thấy thứ gì đó liên quan đến wpcf7 thì đó là Contact Form 7.
Sai lầm 2. Trình kích hoạt bị định cấu hình sai
Khi bạn định cấu hình mọi thứ, đây là giao diện của thiết lập cuối cùng:
-
Thẻ HTML tùy chỉnh CHỈ phải sử dụng trình kích hoạt Tất cả các trang . KHÔNG thêm trình kích hoạt Sự kiện tùy chỉnh vào thẻ HTML tùy chỉnh.
-
Thẻ sự kiện Google Analytics 4 chỉ được có trình kích hoạt Sự kiện tùy chỉnh.
-
Kiểm tra xem bạn đã nhập chính xác tên sự kiện trong trình kích hoạt Sự kiện tùy chỉnh chưa. Nó phải chính xác là cf7submission. Nếu bạn không chắc chắn về điều tôi đang nói, hãy xem lại bước số 2 của hướng dẫn này.
Sai lầm 3. Nếu bạn không thể thấy sự kiện cf7submission ở chế độ xem trước
Điều này rất quan trọng. Sự kiện cf7submission phải xuất hiện ở chế độ xem trước. Nếu điều đó không xảy ra, thiết lập sẽ không hoạt động.
Có hai lý do chính khiến bạn không nhìn thấy nó ở chế độ xem trước:
-
Biểu mẫu của bạn không phải là Contact Form 7
-
Bạn đã thêm thẻ nhưng thẻ này không kích hoạt trên Lượt xem trang (còn gọi là Đã tải vùng chứa ) ở chế độ xem trước.
-
Nhấp vào sự kiện Đã tải vùng chứa ở chế độ xem trước và kiểm tra xem thẻ HTML tùy chỉnh của bạn đã kích hoạt chưa. Nếu chưa, hãy làm mới chế độ xem trước và bắt đầu lại.
-
Ngoài ra, hãy kiểm tra xem trình kích hoạt của HTML tùy chỉnh đó có phải là Tất cả các trang hay không
-
Sai lầm 4. Contact Form 7 của bạn làm mới trang sau khi được gửi
Giải pháp được đề cập trong bài viết này Chỉ áp dụng nếu việc gửi biểu mẫu không làm mới trang. Thông báo thành công của biểu mẫu sẽ xuất hiện mà không cần tải lại hoặc chuyển hướng.
Nếu biể mẫu tải lại trang, hãy tham khảo ý kiến của nhà phát triển để khắc phục nó, hoặc bạn có thể tham khảo trang web của Contact Form 7. Nếu liên kết không hoạt động, hãy thử tìm kiếm trên Google những nội dung như “Contact Form 7 AJAX không hoạt động”.
Các hướng dẫn trực tuyến CF7 + GTM khác cũng dựa vào AJAX (khi biểu mẫu không tải lại trang).
Kết luận
Trong bài viết này, tôi đã hướng dẫn bạn cách cài đặt chuyển đổi Contact Form 7 bằng Google Tag Manager và GA4. Quá trình này tương tự như một Plugin WordPress khác. Và như đã đề cập trước đó, bạn có thể gặp một số khó khăn khi thiết lập Contact Form 7. Vì vậy hãy đọc kỹ bài viết để có thể khắc phục được chúng.
Nguồn tài liệu dịch: https://www.analyticsmania.com/post/contact-form-7-event-tracking-with-google-tag-manager/
