Contact Form 7 Tracking với Google Tag Manager

Hướng dẫn Contact Form 7 Event Tracking bằng Google Tag Manager hoàn chỉnh nhất!

Contact Form 7 là một Plugin để gửi form phổ biến nhất cho WordPress. Được tạo ra và phát triển bởi Takayuki Miyoshi, một lập trình viên đến từ Nhật bản. Cho đến nay Contact Form 7 đã có hơn 12 năm lịch sử hình thành và phát triển. Về mức độ phổ biến thì khỏi nói rồi, có lẽ hơn 90% website sử dụng WordPress đều dùng Contact Form 7 để gửi biểu mẫu. Tính đến thời điểm hiện tại, Contact Form có hơn 5 triệu lượt cài đặt thông qua trang Plugin của WordPress:

Vì vậy, việc theo dõi sự kiện gửi form trên wordpress sử dụng Contact Form 7 qua Googe Tag Manager là một nhu cầu thiết yếu. Đó cũng chính là lý do hôm nay mình viết bài viết này.

Trong bài viết mình có giải thích khá chi tiết để bạn có thể hiểu được phần lớn những việc các bạn làm.

Nghe thì có vẻ khôi hài, nhưng mình cũng đã từng mù mờ, mày mò học theo rất nhiều hướng dẫn Google Tag Manager trên mạng, nhưng đa số là làm theo một cách máy móc. Cho đến khi làm xong, chạy rồi mà vẫn chả hiểu mô tê gì. Oke, Analyticsecret.com sẽ không như vậy!

Hãy chuẩn bị một cốc cafe nóng nào!

Trước khi bắt đầu tiến hành theo dõi sự kiện của Contact Form 7 bằng Google Tag Manager

Có một số lưu ý ở đây cũng như một số thứ cần chuẩn bị:

Chuẩn bị

• Tài khoản Google Analytics
• Tài khoản Google Tag Manager
• Website sử dụng Contact Form 7

Nếu bạn mới tạo website bằng WordPress, và chưa biết bắt đầu như thế nào thì hãy xem 2 hướng dẫn nhanh sau:

• Từng bước cài đặt WordPress, Google Analytics và Google Tag Manager
• Hướng dẫn cài đặt Google Analytics qua Google Tag Manager

Lưu ý

Thứ nhất

Contact Form 7 sử dụng AJAX, điều này có nghĩa là sau khi gửi form đi, trang web sẽ không load lại hoặc chuyển hướng sang một trang khác ví dụ Trang cảm ơn.

Thứ hai

Có một số trường hợp gửi form qua nhiều bước, mỗi bước là một trang. Ví dụ như trường hợp đăng ký, trang 1 bạn sẽ yêu cầu nhập Tên, email, trang 2 mới yêu cầu họ nhập địa chỉ, thông tin thanh toán chẳng hạn. Trong trường hợp như vậy thì mỗi bước thường có một Form ID riêng, vì vậy bạn có thể theo dõi các lần người dùng gửi đi bằng cách cập nhập các Trigger guiformcf7 tuỳ chỉnh. Kích hoạt nó khi form ID bằng một số XX cụ thể.

Thứ ba, cuối cùng nhưng rất quan trọng

Mình cũng đã tìm kiếm trên mạng, có rất nhiều bài viết về cách Tracking Contact Form 7 bằng Google Tag Manager. Nhưng phần lớn những bài đó sử dụng hình thức kích hoạt sự kiện Google Analytics bằng mã CSS của thẻ div thông báo thành công trong CF7.

Mình xin nhấn mạnh rằng làm bằng cách này không đảm bảo quá trình Tracking của bạn sẽ hoạt động lâu dài và chính xác. Ví dụ như một khi nhà phát triển thay đổi css, hoặc cấu trúc HTML thôi là cũng đi tong.

Lựa chọn sáng suốt là nghiên cứu tài liệu của nhà phát hành plugin. Đối với những plugins nổi tiếng như Contact Form 7, thì họ thường sẽ cung cấp những DOM cụ thể để các nhà phát triển Plugin hoặc nghiên cứu giao diện khác có thể kết hợp được hoàn hảo với nhau.

Thông thường, những tên hàm, những quy tắc được nhà phát triển công bố sẽ rất ít khi bị thay đổi. Từ đó mang lại tính ổn định cho plugin cũng như những phương thức tracking của bạn.

Contact Form 7 DOM events – Điều gì đã xảy ra sau khi nhấn nút gửi Form?

Theo tài liệu của nhà phát triển Contact Form 7 cung cấp, họ liệt kê một số sự kiện DOM được gửi sau khi xảy ra tương tác các biểu mẫu cụ thể:

• wpcf7invalid: Kích hoạt khi gửi biểu mẫu thành công, nhưng thư đã không được gửi vì có các trường đầu vào không hợp lệ (sai định dạng email, số điện thoại.v.v.)
• wpcf7spam: Kích hoạt khi quá trình gửi biểu mẫu AJAX thành công, nhưng thư không được gửi vì một hoạt động spam có thể đã được phát hiện
• wpcf7mailsent: Kích hoạt khi gửi biểu mẫu AJAX thành công, và mail đã được gửi
• wpcf7mailfailed: Kích hoạt khi gửi biểu mẫu AJAX thành công, nhưng quá trình gửi thư thất bại.
• wpcf7submit: Kích hoạt khi việc bửi biểu mẫu AJAX thành công, bất kể có sự cố nào khác.

Bài viết sẽ không giải thích về DOM, vì sẽ đi quá xa. Nhưng bạn có thể tìm hiểu về DOM ở đây, cũng như search trên Google với cụm từ khoá “DOM là gì”, sẽ có rất nhiều bài viết hay giải thích về mô hình các đối tượng trong tài liệu HTML (DOM).

Và để theo dõi được quá trình gửi form thành công bằng Contact Form 7, chúng ta hãy sử dụng sự kiện wpcf7mailsent. Mặc dù wpcf7submit cũng có thể dùng nhưng nó ghi nhận cả những lần gửi dữ liệu không hợp lệ, do vậy kết quả bạn nhận được sẽ không chính xác.

Bước 1: Contact Form 7 Tracking – bắt đầu với Auto-Event Listener

Đầu tiên ta sẽ tạo một đoạn mã lắng nghe sự kiện wpcf7mailsent – gửi biểu mẫu thành công và mail đã được gửi – của Contact Form 7. Đoạn mã này được gọi là auto-event listener.

Nó sẽ nằm im ở đó cho đến khi sự kiện DOM wpcf7mailsent của Contact Form 7 được kích hoạt, đoạn mã sau sẽ gửi một số thông tin như tên Event (guiformcf7), formId, và những giá trị trong form tới Data Layer của Google Tag Manager:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "guiformcf7",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

1.1 Sử dụng đoạn mã này như thế nào?

Bước đầu tiên, phải truy cập vào tài khoản Google Tag Manager, vùng chứa tương ứng, sau đó tạo một Custom HTML tag và được kích hoạt ở Page có chứa Form.

Dán đoạn mã trên vào phần HTML tuỳ chỉnh của Google Tag Manager:

1.2 Cài đặt Trigger kích hoạt thẻ khi truy cập trang có chứa Form

Kế tiếp đến phần Kích hoạt (Trigger). Bạn sẽ phải tạo một trình kích hoạt tương ứng, ở trong ví dụ này là Form Contact mình đặt ở trang https://analyticsecret.com/contact/

Tạo trigger tuần tự theo các bước sau:

Thêm mới trình kích hoạt bằng cách ấn vào nút dấu (+) ở góc phải phía trên màn hình:

Cấu hình trình kích hoạt như sau:

Sau đó đặt tên cho trình kích hoạt, nhấn lưu lại ta sẽ được phiên bản hoàn thiện như thế này:

Nếu bạn đặt form ở trang khác, hoặc một số trang khác thì bạn hãy điền và thêm đường dẫn tương ứng nhé.

Lưu ý

Chú ý: trong trường hợp Form của bạn đặt ở toàn bộ các trang trên website (ví dụ như Form đăng ký nhận mail chẳng hạn) thì bạn có thể chọn luôn trình kích hoạt là All Pages

Có một câu hỏi đặt ra ở đây là: Nếu Form chỉ đặt ở một số trang riêng lẻ như trang Liên hệ, trang đặt hàng, đăng ký.v..v.. thì chọn trình kích hoạt là All Pages có được hay không? Câu trả lời là hoàn toàn có thể nhé! Nhưng khi đó trang web sẽ thực thi đoạn mã auto listener ở bất kỳ trang nào được tải. Và theo suy đoán – không chắc chắn – của mình thì điều này có thể sẽ làm chậm trang web. Hãy góp ý cho mình nếu bạn có nguồn thông tin và thử nghiệm chính xác hơn nhé!

Chỉ nên đặt trình kích hoạt ở nơi bạn cần ghi nhận Form. Trừ trường hợp Form của bạn muốn ghi nhận nằm trên toàn bộ trang web, hãy chọn All Pages

Bước 2: Kiểm tra bằng chế độ Xem trước trong Google Tag Manager

2.1 Kích hoạt Chế độ xem trước (Preview Mode) trong Google Tag Manager

Nhấn vào nút xem trước trong Workspace:

Trong Workspace của Google Tag Manager sẽ hiện một bảng thông báo màu cam như sau:

2.2 Truy cập trang bằng cùng trình duyệt

Giờ bạn hãy truy cập vào trang web đã cài form từ cùng trình duyệt. Bạn sẽ thấy Khung gỡ lỗi xuất hiện ở phần dưới của trang web như sau:

Trong trường hợp khung gỡ lỗi không xuất hiện, bạn hãy thử làm theo hướng dẫn của Google là tải lại trang và bỏ qua nội dung được lưu trong bộ nhớ đệm bằng cách nhấn tổ hợp phím CTR+F5 hoặc CTR+Shift+R trên Windows/Linux hoặc ⌘ + Shift + R trên Mac.

Bạn có thể làm một thử nghiệm nhỏ bằng cách truy cập vào trang khác không có chứa Form, bạn sẽ thấy được Tag vừa tạo sẽ được liệt kê trong danh sách Tags Not Fired On This Page, có nghĩa là Google Tag Manager đã nhận ra thẻ, nhưng thẻ này không được kích hoạt. Nó sẽ chỉ được kích hoạt khi người dùng thực hiện hành động đúng với điều kiện bạn đã đặt trong bước cài đặt Trigger ở phần 1.2 của bài viết này:

Giờ hãy quay lại trang có chứa Form, sau đó điền form rồi gửi để kiểm tra:

Nếu mọi thứ hoạt động chính xác, thì bạn sẽ thấy sự kiện guiformcf7 xuất hiện trong cửa sổ của khung gỡ lỗi giống như hình dưới đây:

Giờ bạn click vào sự kiện guiformcf7, chọn tab Data Layer, bạn sẽ thấy được những thông số như event, formId, cùng những trường đã điền trong form:

Bước 3: Biến và Trình kích hoạt (Variables and Trigger)

Sau bước trên, chúng ta đã có một số dữ liệu được gửi tới Data Layer bao gồm:

• guiformcf7 sẽ được chúng ta sử dụng để tạo Trigger kích hoạt sự kiện Google Analytics
• Form ID
• Các trường nhập liệu của Form được lưu dưới dạng mảng (Array) gồm: tên, email, số đt, tiêu đề, nội dung

3.1 Tạo Custom Trigger guiformcf7

Bạn vào mục Trình kích hoạt (Triggers), tạo một Trigger mới

Chọn Sự kiện tuỳ chỉnh (Custom trigger)

Tạo Custom Trigger với nội dung như sau:

Lưu lại và chuyển sang bước kế tiếp là tạo biến Data Layer

3.2 Tạo biến Data Layer formid và formSubject

Đầu tiên ta sẽ tạo một biến formid, điều này sẽ rất hữu dụng khi bạn có nhiều Form ở trên web. Bạn sẽ không cần phải tạo từng Trigger và Tag riêng biệt cho từng form. Đồng thời bạn cũng sẽ phân biệt form nào đã được gửi.

Tìm đến mục Biến trên Menu bên trái WorkSpace:

Nhấn vào tạo biến mới:

Đặt tên dễ nhớ và cài đặt biến như sau:

Tạo biến formSubject:

Chú ý: Tên biến lớp dữ liệu (Data Layer Variable’s Name) tại sao lại là response.2.value?

Mình sẽ giải thích một cách nôm na như sau:

Google Tag Manager truy xuất một dữ liệu dạng mảng (Array) trong Data Layer bằng cách sử dụng mã JavaScript. Như cú pháp response.2.value sẽ được JavaScript hiểu là lấy dữ liệu ở node cha response, sau dấu chấm sẽ đi tới node con trong response, chính là giá trị thứ 2. Và cuối cùng sẽ lấy giá trị value của biến được lưu tại vị trí đó. Điểm quan trọng là JavaScript đánh số từ 0. Do đó giá trị thứ 3 trong mảng sẽ có số thứ tự là 2.

Bạn hãy xem hình sau sẽ hiểu:

Từ đây áp dụng vào trường hợp Form của bạn, bạn muốn lấy giá trị nào, thì hãy đếm từ trên xuống dưới bắt đầu bằng 0 nhé. Trong trường hợp của bài viết này, mình lấy giá trị ‘your-subject’ – sẽ tương ứng với số thứ tự trong JavaScript là 2.

3.3 Kiểm tra lại

Giờ chúng ta hãy tạo bản xem trước trong Google Tag Manager và tải lại trang web có chứa form để kiểm tra xem sự kiện gửi Form và các biến đã được ghi nhận chính xác chưa nhé:

Trong hình trên ta có thể thấy thẻ Contact Form 7 Listener – lắng nghe sự kiện gửi Form. Thẻ này đã được kích hoạt và khi ta nhấn nút gửi, nó sẽ chuyển dữ liệu vào Data Layer.

Giờ hãy điền vào các Form rồi nhấn nút Submit:

Lúc này, nếu các bước trên bạn làm chính xác thì sẽ nhận được kết quả như sau:

Bạn có thể thấy các biến Event, DL Form Subject, DL Form ID xuất hiện trong tab Variables của trình gỡ lỗi Tag Manager.

Bước 4: Tạo thẻ Sự kiện Google Analytics (Google Analytics Event Tag)

Ổn rồi, giờ bước tiếp theo bạn sẽ phải chuyển sự kiện gửi form sang Google Analytics thông qua cài đặt thẻ Universal Analytics với trình kích hoạt là chính sự kiện guiformcf7 mà ta đã tạo ở bước trên.

Tạo một thẻ mới, chọn trình kích hoạt là guiformcf7:

Sau đó cài đặt tuần tự các thông số như sau:

• Loại theo dõi: Sự kiện
• Danh mục: Form Submission
• Tác vụ: Form ID: {{DL Form ID}} (khi sự kiện gửi đi xảy ra, giá trị của DL Form ID sẽ được thay đổi, trong ví dụ của mình thì DL Form ID sẽ có giá trị là 96)
• Nhãn sự kiện: Form Subject: {{DL Form Subject}} (cũng giống như trên, sau khi nhấn nút gửi form, các biến được gửi tới Data Layer, giá trị của DL Form Subject sẽ được gán, trong trường hợp này DL Form Subject sẽ có giá trị là ‘Test Contact Form 7 Tracking 2’)
• Cài đặt Google Analytics: hãy sử dụng biến Google Analytics chứa ID theo dõi của Google Analytics mà bạn đã tạo từ trước (Xem Bước thứ 3 bài viết Cài đặt Google Analytics qua Tag Manager để biết cách mình đã tạo ra biến này)

Bước 5: Kiểm tra bằng chế độ Xem trước của Google Tag Manager

Tạo bản Xem trước, tải lại trang chứa Form. Trong trình gỡ lỗi của Google Tag Manager, bây giờ bạn sẽ thấy 2 thẻ sau:

• Contact Form 7 Listener: Vẫn như phần trước, thẻ này đã được kích hoạt và đang lắng nghe sự kiện gửi form. Khi người dùng nhấn nút submit để gửi form đi, thẻ Contact Form 7 Listener sẽ (1) gửi dữ liệu đến Data Layer và đồng thời (2) kích hoạt thẻ GA Event – Form Submission
• GA Event – Form Submission: Hiện chưa được kích hoạt

Giờ hãy thử điền Form và nhấn Submit nào. Sau khi nhận được thông báo form đã được gửi thành công của Contact Form 7, thẻ GA Event – Form Submission sẽ nhảy ngay lên phần Tags Fired On This Page:

Vậy là ngon lành rồi đó. Bạn có thể truy cập vào tài khoản Google Analytics, tới mục Thời gian thực (Realtime), vào tab Sự Kiện (Events) để xem kết quả nhận được:

Có thể thấy Sự kiện Form Submission đã được ghi nhận. Giờ bạn nhấn vào Form Submission để xem chi tiết hơn. Ta sẽ thấy thông tin chi tiết của sự kiện, bao gồm những biến truyền vào gồm có DL Form ID (trong ví dụ này 96) và biến DL Form Subject (Test Contact Form 7 Tracking 22 33) như hình bên dưới:

Bước 6: Cài đặt mục tiêu Google Analytics

Vậy là quá trình Theo dõi sự kiện gửi Form của Contact Form 7 bằng Google Tag Manager đã hoàn tất. Giờ bạn có thể cài đặt mục tiêu trong Google Analytics:

1. Quay lại tài khoản Google Analytics của bạn
2. Chuyển đến phần Quản trị tài khoản
3. Chọn Chế độ xem bạn muốn cài đặt Mục tiêu
4. Tìm đến phần Mục tiêu, nhấn nút + Mục tiêu mới

Các bạn cài đặt mục tiêu như sau:

• Mẫu: Tuỳ chỉnh
• Mô tả mục tiêu: Bạn có thể đặt theo ý thích, mục tiêu để dễ quản lý và theo dõi. Mình đặt là “Gửi Form trang Liên hệ”
• Loại: Sự kiện

Nhấn nút Tiếp tục để chuyển sang phần cuối cùng là Chi tiết mục tiêu. Trong phần này các bạn sẽ điền như sau:

• Danh mục sự kiện (Event Category) bằng Form Submission
• Tác vụ (Action): Nếu bạn có nhiều Form khác nhau trên website của mình, ví dụ như Form Liên hệ, đăng ký, đặt hàng… nhưng bạn chỉ muốn theo dõi riêng Form Liên hệ như ví dụ này chẳng hạn thì bạn có thể để chính xác phần Tác vụ (Action) bằng Form ID: 96.

Lưu lại, vậy là bạn đã cài đặt xong một mục tiêu trong Google Analytics:

Cài đặt theo dõi gửi Form sử dụng Contact Form 7 bằng Google Tag Manager: Tổng kết

Cuối cùng cũng đã xong. Trong bài viết này, mình đã hướng dẫn các bạn có thực hiện được theo dõi sự kiện Form của Contact Form 7 bằng Google Tag Manager. Nói cho sang mồm là Contact Form 7 Event Tracking with Google Tag Manager.

Tổng kết lại, ta phải làm những bước sau:

1. Tạo một trình lắng nghe sự kiện gửi form (wpcf7mailsent) của Contact Form 7
2. Tạo các biến (Form ID, Form Subject) và một kích hoạt tuỳ chỉnh – Trigger – guiformcf7
3. Cài đặt thẻ sự kiện Universal Analytics để gửi dữ liệu gửi form thành công tới máy chủ Google Analytics
4. Cuối cùng là cài đặt mục tiêu trong Google Analytics

Chúc mừng bạn đã đi đến bước cuối cùng này! Đúng như dự đoán ban đầu, mình nghĩ rằng bài viết này sẽ hơi bị dài. Nhưng theo bản thân mình thì hoàn toàn cần thiết. Bởi vì nếu bạn đã kiên trì theo dõi bài viết, làm đến bước cuối cùng, mình chắc chắn các bạn sẽ nắm rõ thêm rất nhiều điều về Google Tag Manager đó.