Biểu mẫu liên hệ 7 là một plugin biểu mẫu khá phổ biến khác cho WordPress. Các nhà tiếp thị giỏi làm gì với các biểu mẫu? Họ theo dõi các lần gửi, chẳng hạn, với Google Analytics và sau đó đo lường hiệu suất tổng thể: những chuyển đổi đó đến từ đâu?  hình thức nào hoạt động tốt hơn? Vân vân.

Ngày nay, một trong những cách phổ biến nhất để theo dõi bất kỳ tương tác nào trên trang web là … bất ngờ bất ngờ!… Trình quản lý thẻ của Google. Nếu vì lý do nào đó, bạn chưa thử nó bao giờ, bạn chắc chắn nên làm (đây là một số lý do tại sao ).

Dù sao thì, quay lại vấn đề. Biểu mẫu liên hệ 7 cũng không ngoại lệ và bạn chắc chắn có thể theo dõi nó bằng Trình quản lý thẻ của Google. Bạn có thể đọc hướng dẫn dài (nhưng rất hữu ích) này và tìm hiểu thêm về sự kỳ diệu của theo dõi biểu mẫu hoặc bạn có thể tiếp tục đọc bài đăng trên blog này vì hôm nay tôi sẽ giải thích cách hoạt động của theo dõi sự kiện Biểu mẫu liên hệ 7 với Trình quản lý thẻ của Google.

Tại sao lại hướng dẫn này?

Tôi đã xem một số hướng dẫn trên web về theo dõi sự kiện Biểu mẫu liên hệ 7 với GTM, tuy nhiên, chúng có một số vấn đề / hạn chế:

• Một số đưa ra giải pháp không chính xác (bằng cách sử dụng Click Trigger !!!?, Đây là một KHÔNG lớn trong theo dõi biểu mẫu)
• Trong khi những người khác cho không đủ. Ý tôi là, họ chỉ ra cách theo dõi các lần gửi biểu mẫu (điều đó là tốt) nhưng tôi thấy rằng cũng khá dễ dàng để nhận các giá trị của mỗi trường biểu mẫu đã gửi , điều này có thể cung cấp cho bạn nhiều thông tin chi tiết hơn!

Thú vị? Tôi hy vọng rằng sau khi đọc đoạn trước, bạn cảm thấy như thế này:

Nhân tiện, nếu bạn có bất kỳ phản hồi nào, vui lòng để lại trong phần bình luận và tôi sẽ liên hệ lại với bạn.

Mục lục

+ Hiển thị mục lục +

Video hướng dẫn

Nếu bạn muốn nhanh chóng tìm hiểu cách theo dõi Biểu mẫu liên hệ 7 bằng Trình quản lý thẻ của Google, đây là video hướng dẫn. Tuy nhiên, nếu bạn gặp khó khăn ở đâu đó hoặc muốn tìm hiểu thêm chi tiết kỹ thuật, hãy tiếp tục đọc hướng dẫn này.

Những điều cần lưu ý

Giải pháp này hoạt động với các biểu mẫu dựa trên AJAX (được xây dựng với Biểu mẫu liên hệ 7) có nghĩa là nếu trang không làm mới sau khi gửi thành công, hãy tiếp tục và tiếp tục đọc.

Ngoài ra, hướng dẫn này chủ yếu nhắm mục tiêu đến các biểu mẫu một trang. Biểu mẫu nhiều trang kích hoạt sự kiện gửi biểu mẫu thành công sau mỗi bước. Việc theo dõi họ không được đề cập trong hướng dẫn này nhưng tôi không muốn để bạn ở trên lớp băng mỏng, vì vậy đây là một số gợi ý / hướng dẫn.

• Đối với các biểu mẫu nhiều trang, hãy sử dụng trình xử lý sự kiện tự động được đề cập trong bài đăng blog này (# 1 chương)
• Những gì tôi nhận thấy cho đến nay, là thường mỗi bước có ID biểu mẫu riêng của nó, do đó bạn có thể theo dõi các lần gửi bằng cách cập nhật trình kích hoạt gửi cf7 tùy chỉnh. Đặt nó thành kích hoạt khi ID biểu mẫu bằng XX (thay XX bằng ID của biểu mẫu ở bước cuối cùng).

Các sự kiện DOM trong Biểu mẫu liên hệ 7

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

• wpcf7invalid – Kích hoạt khi quá trình gửi biểu mẫu AJAX đã hoàn tất thành công, nhưng thư chưa được gửi đi vì có các trường với đầu vào không hợp lệ.
• wpcf7spam – Kích hoạt khi quá trình gửi biểu mẫu AJAX đã hoàn tất thành công nhưng thư chưa được gửi đi vì đã phát hiện thấy hoạt động spam có thể xảy ra.
• wpcf7mailsent – Kích hoạt khi quá trình gửi biểu mẫu AJAX đã hoàn tất thành công và thư đã được gửi.
• wpcf7mailfailed – Kích hoạt khi quá trình gửi biểu mẫu AJAX đã hoàn tất thành công nhưng không gửi được thư.
• wpcf7submit – Kích hoạt khi quá trình gửi biểu mẫu AJAX đã hoàn tất thành công, bất kể sự cố khác.

Để làm cho việc theo dõi sự kiện của Biểu mẫu liên hệ 7 trở thành sự thật, lúc đầu, tôi đã thử lắng nghe sự kiện wpcf7submit  nhưng kết quả của tôi là sự kiện DOM này đang được gửi ngay cả khi các trường biểu mẫu bắt buộc có lỗi. Do đó, tôi đã chuyển sang sự kiện wpcf7mailsent .

1. Theo dõi sự kiện Biểu mẫu liên hệ 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ã mà còn được gọi là một sự kiện tự động người nghe . Người nghe sẽ chờ các sự kiện DOM của wpcf7mailsent và nếu một sự kiện xảy ra, nó sẽ đẩy một số dữ liệu hữu ích lên Lớp dữ liệu (tên sự kiện, id biểu mẫu, giá trị của tất cả các trường biểu mẫu).

<script>
document.addEventListener ('wpcf7mailsent', function (event) {
 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, điều này sẽ không chỉ tạo ra sự kiện Lớp dữ liệu được gọi là cf7submission  mà còn trả về phản hồi đầy đủ, một mảng của mọi trường biểu mẫu và giá trị của nó. Thêm về điều này – một chút sau.

Để triển khai mã này, hãy chuyển đến tài khoản Trình quản lý thẻ của Google, sau đó chuyển đế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ử trong trường hợp của chúng tôi, một biểu mẫu nằm ở phần chân trang của mỗi trang, vì vậy chúng tôi sẽ kích hoạt biểu mẫu đó trên Tất cả các trang .

1.1. Kiểm tra người nghe

Trước khi chúng ta tiếp tục, điều quan trọng là phải kiểm tra xem người nghe có khả năng nắm bắt một biểu mẫu gửi thành công hay không. Trong GTM, bật chế độ Xem trước và Gỡ lỗi và thanh thông báo màu cam sẽ xuất hiện. Nếu không, hãy xem hướng dẫn khắc phục sự cố này .

Bây giờ, hãy truy cập trang web có biểu mẫu và làm mới trang. Bảng điều khiển gỡ lỗi sẽ xuất hiện ở cuối màn hình, nơi bạn có thể xem thẻ nào có và chưa kích hoạt. Điền vào tất cả các trường biểu mẫu và gửi biểu mẫu.

Nếu mọi thứ hoạt động trơn tru, bạn sẽ thấy sự kiện gửi cf7  trong Bảng điều khiển xem trước và gỡ lỗi (giống như trong ảnh chụp màn hình bên dưới).

Quan trọng hơn, hãy nhấp vào sự kiện gửi cf7  đó và chuyển đến tab Lớp dữ liệu  . Những gì bạn sẽ thấy là một mảng 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ởi 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. PS Hãy nhớ rằng Google Analytics không cho phép bạn lưu trữ PII trên nền tảng của họ (nhưng dữ liệu đó có thể được gửi đến các công cụ khác).

2. Các biến và một trình kích hoạt

Vì vậy, những gì chúng tôi đã làm cho đến nay? Chà, chúng tôi có một số dữ liệu trong Lớp dữ liệu mà chúng tôi có thể sử dụng:

• cf7submission  là sự kiện Lớp dữ liệu nên được biế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ỉ với mục đích trình diễn, chúng tôi cũng sẽ muốn nắm bắt một dòng chủ đề của việc gửi biểu mẫu và chuyển nó đến Google Analytics 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 Lớp dữ liệu .

Nếu bạn muốn biến một số sự kiện của Lớp dữ liệu (trong trường hợp của chúng tôi, đó là sự gửi cf7 ) 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.

Tái bút Để tiết kiệm thời gian, tôi đã chuẩn bị một công thức GTM tự động tạo trình nghe CF7 và trình kích hoạt sự kiện tùy chỉnh trong vùng chứa của bạn. Bạn mới sử dụng công thức GTM? Đây là hướng dẫn về cách nhập công thức nấu ăn .

Bây giờ, đến lượt các biến. Hãy xem xét kỹ hơn những gì đang xảy ra trong Lớp dữ liệu sau khi sự kiện gửi cf7  xảy ra. Ngoài sự kiện  và formId , trình nghe Contact Form 7 cũng đẩy phản hồi  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ỉ mục bắt đầu từ 0, không phải từ 1, vì vậy nếu chúng tôi muốn tìm nạp giá trị của trường chủ đề của bạn (là đối tượng thứ ba), chúng tôi sẽ phải chọn chỉ mục 2, không phải 3.

Trong một bài đăng trên blog trước đây của tôi, về cách lấy dữ liệu từ Lớp dữ liệu , tôi đã giải thích 3 cấu trúc dữ liệu khác nhau:

• Khi tất cả các điểm dữ liệu ở cùng một mức
• Khi có các cấp độ khác nhau (con cái-cha mẹ)
• Và khi có mảng.

Trong trường hợp này, chúng ta phải chọn tùy chọn thứ 3, kéo 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 khóa cha, trong trường hợp này, là phản hồi. Sau đó, chúng tôi phải đặt chỉ mục (để cho Trình quản lý thẻ của Google biết chúng tôi quan tâm đến đối tượng nào ). Lần này, nó là 3 (vì nó là đối tượng thứ 4 trong mảng, một trong các chỉ mục JavaScript bắt đầu từ 0 (0, 1, 2, 3, 4)). Và, cuối cùng, chúng tôi chọn khóa cuối cùng – giá trị của trường.

Do đó, tên Biến lớp dữ liệu của chúng tôi là response.3.value

Một biến khác mà tôi muốn khuyên bạn nên tạo là formId . 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 biệt cho từng Biểu mẫu liên hệ 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 gửi cf7  một lần nữa và chuyển đến tab Biến . Bạn nên tìm kiếm hai Biến lớp dữ liệu mới được tạo.

Trong ảnh chụp màn hình bên dưới, mọi thứ đang hoạt động như chúng tôi mong đợi: một biến chứa dòng chủ đề thực tế trong khi biến còn lại lấy ‘ 9 ′  là ID của biểu mẫu thử nghiệm của tôi. Nếu bạn nhận được giá trị không xác định , hãy kiểm tra lại xem bạn đã nhập đúng tất cả các cài đặt biến chưa. Hãy nhớ rằng tên biến của Lớp dữ liệu có phân biệt chữ hoa chữ thường.

Nếu bạn vẫn gặp sự cố với bất kỳ biến nào trong hai biến đó, hãy đọc hướng dẫn này về cách lấy dữ liệu từ Lớp dữ liệu .

3. Thẻ sự kiện Google Analytics

Hai bước đầu tiên của theo dõi sự kiện Biểu mẫu liên hệ 7 đã xong! Bây giờ, hãy gửi sự kiện gửi biểu mẫu đến Google Analytics qua thẻ Universal Analytics với các cài đặt sau:

• Loại theo dõi: Sự kiện
• Hạng mục sự kiện: trình  f orm
• Hành động sự kiện: f orm id {{dlv – formId}} (khi sự kiện thực sự xảy ra, ID biểu mẫu sẽ được thay thế, vì vậy kết quả cuối cùng có thể là id biểu mẫu 9
• Nhãn sự kiện: {{dlv – Chủ đề biểu mẫu}}  (áp dụng tương tự ở đây: khi sự kiện thực tế được gửi đi, Biến lớp dữ liệu sẽ được thay thế bằng giá trị của nó, ví dụ: Đây là một thử nghiệm.
• Đừng quên thêm Trình kích hoạt tùy chỉnh mà chúng tôi đã tạo trước đó.

4. Hãy thử nghiệm

Lưu tất cả các thay đổi, làm mới chế độ Xem trước và Gỡ lỗi, truy cập trang web nơi triển khai Biểu mẫu liên hệ 7 và làm mới trang đó. Gửi nó và xem xét kỹ hơn những gì đang xảy ra trong Bảng điều khiển xem trước. Kết quả mong đợi: Thẻ sự kiện Universal Analytics chỉ được kích hoạt khi biểu mẫu được gửi thành công.

Khi thẻ xuất hiện trong phần thẻ đã kích hoạt , hãy chuyển đến Báo cáo sự kiện theo thời gian thực của Google Analytics.

5. Thiết lập Mục tiêu Google Analytics

Bước cuối cùng của theo dõi sự kiện Biểu mẫu liên hệ 7: tạo Mục tiêu Google Analytics. Đăng nhập vào tài khoản Google Analytics của bạn và:

1. Chuyển đến phần Quản trị của tài khoản mong muốn
2. Chọn một chế độ xem mà bạn quan tâm
3. Chuyển đến Mục tiêu  và nhấn MỤC TIÊU MỚI

Bây giờ, hãy nhập các cài đặt sau:

• Mẫu: Tùy chỉnh
• Tên mục tiêu: nhập bất cứ thứ gì bạn thích. Trong ví dụ bên dưới, tôi đã nhập Gửi biểu mẫu
• Loại: Sự kiện

Cuối cùng, nhập chi tiết Mục tiêu:

• Hạng mục sự kiện tương đương với việc gửi biểu mẫu
• Nếu bạn có nhiều biểu mẫu hơn trên một trang web và bạn chỉ muốn theo dõi CHỈ MỘT NÀY, thì bạn có thể đặt thêm quy tắc: Hành động sự kiện  bằng với biểu mẫu id 9

Nếu bạn để trống các trường khác, chúng sẽ không được kiểm tra.

Những sai lầm phổ biến nhất khi thiết lập điều này

Nếu bạn chưa làm việc nhiều với Trình quản lý thẻ của Google trước đây, một số phần của hướng dẫn này có thể gây nhầm lẫn. Nếu bạn đã làm theo tất cả các bước của bài đăng trên blog này mà vẫn có điều gì đó không hoạt động, đây là những lỗi phổ biến nhất mà tôi nhận thấy 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 sẽ 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à Biểu mẫu liên hệ 7

Đôi khi, trang web WordPress sử dụng nhiều plugin biểu mẫu. Ngay cả khi bạn đã cài đặt CF7, có thể biểu mẫu mà 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à Biểu mẫu liên hệ 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 nội dung nào đó liên quan đến wpcf7 , đó là Biểu mẫu liên hệ 7. Nếu không, thì bài đăng trên blog này sẽ không giúp được bạn. Đọc hướng dẫn khác thay thế .

Sai lầm # 2. Các trình kích hoạt được định cấu hình sai

Khi bạn định cấu hình mọi thứ, đây là cách thiết lập cuối cùng trông như thế nào:

• 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 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 vào trình kích hoạt Sự kiện tùy chỉnh hay chưa. Nó phải chính xác là cf7submission. Nếu bạn không chắc tôi đang nói về điều gì, 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 gửi cf7 ở chế độ xem trước

Đây là điều tối quan trọng. Sự kiện gửi cf7  PHẢI xuất hiện ở chế độ xem trước. Nếu nó 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 thấy nó ở chế độ xem trước:

• Biểu mẫu của bạn không phải là Biểu mẫu liên hệ 7
• Bạn đã thêm thẻ nhưng thẻ không kích hoạt trên Lượt xem trang (còn gọi là Vùng chứa đã tải ) ở 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 (vì nó phải như vậy).

Sai lầm # 4. Thẻ Google Analytics đang kích hoạt nhưng bạn không thể thấy sự kiện trong báo cáo thời gian thực?

Vấn đề này là khá phổ biến. Nếu bạn đang phải đối mặt với nó, hãy đọc hướng dẫn khắc phục sự cố này .

Sai lầm # 5. Mục tiêu bị định cấu hình sai trong Google Analytics

Khi bạn định cấu hình mục tiêu GA, bạn cần biết một số sắc thái. Vì chúng, một số người mới bắt đầu phải vật lộn để thiết lập chúng đúng cách. Nếu bạn cũng không thể xem việc gửi biểu mẫu là mục tiêu trong Google Analytics, hãy đọc hướng dẫn gỡ rối này .

Sai lầm # 6. Biểu mẫu liên hệ 7 của bạn làm mới trang sau khi nó được gửi

Giải pháp được mô tả trong bài đăng trên blog 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ểu mẫu thực sự đang tải lại trang, hãy tham khảo ý kiến nhà phát triển của bạn để khắc phục hoặc bạn có thể tham khảo trang web của CF7. Đây là một bài viết từ blog CF7 . Nếu liên kết không hoạt động, hãy thử lên google để tìm thông tin như “Biểu mẫu liên hệ 7 AJAX không hoạt động”.

Các hướng dẫn CF7 + GTM khác trực tuyến cũng dựa trên AJAX (khi biểu mẫu không tải lại trang).

Tìm kiếm các lựa chọn thay thế theo dõi biểu mẫu khác? Đọc này .

Liên hệ theo dõi sự kiện biểu mẫu 7: lời cuối cùng

Vì vậy, bạn có nó. Trong bài đăng trên blog này, tôi đã giải thích cách theo dõi Biểu mẫu liên hệ dựa trên AJAX đơn trang 7. Quá trình này tương tự như các Plugin WordPress khác, Gravity Form :

• Triển khai trình lắng nghe sự kiện tự động tùy chỉnh sẽ lắng nghe gửi biểu mẫu thành công.
• Tạo biến và trình kích hoạt tùy chỉnh.
• Thiết lập thẻ sự kiện Universal Analytics để đẩy sự kiện gửi biểu mẫu thành công đến máy chủ của Google.
• Cuối cùng, thiết lập mục tiêu Google Analytics.

Như đã đề cập trước đây, bạn có thể gặp một số khó khăn nếu biểu mẫu của bạn có nhiều trang (bao gồm hai hoặc nhiều bước và mỗi bước trong số chúng sẽ làm mới trang). Những gì tôi nhận thấy cho đến nay, là thường mỗi bước có ID biểu mẫu riêng của nó, do đó bạn có thể theo dõi các lần gửi bằng cách cập nhật trình kích hoạt gửi cf7 tùy chỉnh. Đặt nó thành kích hoạt khi ID biểu mẫu bằng XX (thay XX bằng ID của biểu mẫu ở bước cuối cùng).

VÀ VẪN CÒN MỘT CÁCH KHÁC NGHE CHỪNG DỄ HƠN

Theo dõi sự kiện Biểu mẫu 7 liên hệ với Trình quản lý thẻ của Google

Bởi Chris Berkley20 tháng 3, 2017phân tích

•  143 bình luận
• 12
• 0

Nếu bạn phù hợp với các tiêu chí sau, bài viết này phù hợp với bạn:

1. Bạn sử dụng plugin Biểu mẫu liên hệ 7 trên trang web WordPress của mình.
2. Bạn muốn thiết lập gửi biểu mẫu liên hệ dưới dạng Mục tiêu trong Google Analytics (hoặc thậm chí chỉ dưới dạng Sự kiện).
3. Bạn đã triển khai Google Analytics trên trang web của mình bằng Trình quản lý thẻ của Google.

Nếu bạn không sử dụng Trình quản lý thẻ của Google, hướng dẫn trên trang web của Biểu mẫu liên hệ 7 thực sự khá tốt. Tuy nhiên, nếu bạn đang sử dụng Trình quản lý thẻ, tôi không tìm thấy tài nguyên nào có thể giúp bạn nhiều, vì vậy tôi đã tạo một tài nguyên tại đây. Nó thực sự khá dễ dàng, có một số bước đơn giản:

Bước 1: Tạo Thẻ GTM đẩy sự kiện Lớp dữ liệu khi thư thực sự được gửi (và bao gồm ID biểu mẫu).

Bước 2: Tạo Trình kích hoạt GTM tìm kiếm sự kiện Lớp dữ liệu khi thư được gửi và kích hoạt thẻ thứ hai.

Bước 3: Tạo Thẻ GTM gửi các sự kiện đến Google Analytics dựa trên sự kiện Lớp dữ liệu.

Bước 4: Tạo biến lớp dữ liệu ID biểu mẫu.

Bước 5: Thiết lập Chuyển đổi mục tiêu trong Google Analytics dựa trên Sự kiện.

Bước 1: Đăng nhập vào GTM và Tạo thẻ # 1

Khi nhấp vào nút “Gửi” trên Biểu mẫu liên hệ 7, nó sẽ kích hoạt sự kiện gửi biểu mẫu. Thật không may, nó kích hoạt sự kiện này bất kể các trường bắt buộc đã được điền hay chưa – biểu mẫu có thể chưa thực sự được gửi đi, nhưng sự kiện vẫn được kích hoạt.

May mắn thay, các plugin không cháy sự kiện DOM cho các kịch bản khác nhau và những sự kiện DOM phân biệt giữa hình thức đệ trình thành công và gửi biểu mẫu không thành công. Điều đó nghĩa là gì? Đây là các sự kiện DOM như được mô tả trên trang web Biểu mẫu liên hệ 7:

• wpcf7invalid – Kích hoạt khi quá trình gửi biểu mẫu Ajax đã hoàn tất thành công, nhưng thư chưa được gửi đi vì có các trường có đầu vào không hợp lệ.
• wpcf7spam – Kích hoạt khi quá trình gửi biểu mẫu Ajax đã hoàn tất thành công, nhưng thư chưa được gửi đi vì đã phát hiện thấy hoạt động spam có thể xảy ra.
• wpcf7mailsent – Kích hoạt khi quá trình gửi biểu mẫu Ajax đã hoàn tất thành công và thư đã được gửi đi.
• wpcf7mailfailed – Kích hoạt khi quá trình gửi biểu mẫu Ajax đã hoàn tất thành công nhưng không gửi được thư.
• wpcf7submit – Kích hoạt khi quá trình gửi biểu mẫu Ajax đã hoàn tất thành công, bất kể sự cố khác.

Cái ở giữa là khóa: wpcf7mailsent. Như được mô tả, trình kích hoạt này kích hoạt khi biểu mẫu thực sự đã được gửi và thư thực sự đã được gửi đi. Chúng tôi sẽ sử dụng Javascript để tạo sự kiện Lớp dữ liệu. Đăng nhập vào GTM và chọn hộp “Thẻ mới” hoặc điều hướng đến phần “Thẻ” và tạo một thẻ ở đó. Tạo thẻ GTM mới (tôi đã gọi là mine wpcf7mailsent) với cấu hình sau:

Loại thẻ: HTML tùy chỉnh

Thêm mã sau:

12345678

<script>document.addEventListener( ‘wpcf7mailsent’, function( event ) {dataLayer.push({‘event’ : ‘wpcf7successfulsubmit’,’CF7formID’ : event.detail.contactFormId});}, false );</script>

Kích hoạt: Tất cả các trang

Điều này thực hiện là lắng nghe sự kiện DOM wpcf7mailsent và kích hoạt một sự kiện vào Lớp dữ liệu có tên “wpcf7successfulsubmit.” Nó cũng ghi lại ID biểu mẫu trong shortcode của Biểu mẫu liên hệ 7 và đẩy nó vào Lớp dữ liệu (trong ảnh chụp màn hình bên dưới, ID đó là “1192”).

Tiếp theo, chúng tôi sẽ thiết lập Trình kích hoạt sử dụng sự kiện Lớp dữ liệu này để kích hoạt Sự kiện Google Analytics mà Chuyển đổi mục tiêu sẽ dựa trên.

Bước 2: Tạo GTM Trigger

Tiếp theo, tạo Trigger cho Thẻ bạn vừa tạo. Tôi đã đặt tên Trình kích hoạt Biểu mẫu Liên hệ 7 của mình .

Loại kích hoạt: Chọn Khác – Sự kiện tùy chỉnh từ danh sách mặc định. Chúng tôi sẽ sử dụng sự kiện mà chúng tôi đã tạo trong Thẻ số 1 làm sự kiện kích hoạt.

Tên sự kiện: wpcf7successfulsubmit

Trình kích hoạt này Bật: Tất cả các sự kiện tùy chỉnh

Điều này sử dụng sự kiện Lớp dữ liệu tùy chỉnh mà chúng tôi đã tạo ở Bước 1 để kích hoạt thẻ sự kiện Google Analytics mà chúng tôi sẽ thiết lập ở Bước 3.

Bước 3: Tạo thẻ số 2

Đăng nhập vào GTM và chọn hộp “Thẻ mới” hoặc điều hướng đến phần “Thẻ” và tạo một thẻ ở đó. Đặt tên cho thẻ mới là bất kỳ thứ gì bạn muốn (Tôi đã chọn “Gửi biểu mẫu liên hệ” thật mô tả).

Điền vào các trường sau:

Loại thẻ: Universal Analytics

ID theo dõi: ID theo dõi của bạn. Tôi đã thiết lập một biến của mình dưới dạng một biến, điều này giải thích tại sao nó có nội dung {{Mã theo dõi GA}}

Loại theo dõi: Sự kiện

Tiếp theo, bạn sẽ đặt Danh mục, Hành động, Nhãn và Giá trị cho Sự kiện mà chúng tôi đang tạo. Nếu bạn không quen với những điều này, có thêm thông tin trong trang Trợ giúp Analytics của Google cho Sự kiện .

Danh mục: Bạn có thể đặt mục này làm bất kỳ thứ gì bạn muốn và đó là những gì nó sẽ hiển thị như trong Google Analytics khi bạn chuyển đến báo cáo Sự kiện. Tôi đã đặt tên cho biểu mẫu liên hệ của mình.

Hành động: Một lần nữa, sự lựa chọn là của bạn. Tôi đã chọn thành công-form-submit-mailent.

Nhãn: Nếu bạn muốn theo dõi các biểu mẫu khác nhau một cách riêng biệt, bạn cần đặt mục này là {{CF7-formID}} và thực hiện chặt chẽ phần còn lại của các hướng dẫn này.

Giá trị: Tôi đã không thêm giá trị.

Lần truy cập không tương tác: Đây cũng là quyết định của bạn và câu trả lời Đúng / Sai sẽ thay đổi hiệu quả tỷ lệ thoát của bạn khi lần truy cập được kích hoạt. Về bản chất, nếu ai đó truy cập vào một trang và hoàn thành việc gửi biểu mẫu sau đó rời đi mà không xem các trang khác, điều đó sẽ được coi là thoát trừ khi bạn chọn Sai . Tôi nghĩ rằng một người nào đó hoàn thành việc gửi biểu mẫu sau đó rời đi không được coi là một người bị trả lại, nhưng điều đó khác với mọi người. (Đọc thêm về tỷ lệ thoát.)

Cài đặt khác & Cài đặt nâng cao: Nếu bạn là người thích phân tích, có các cài đặt nâng cao ở đây mà bạn có thể muốn định cấu hình. Tuy nhiên, tôi đã không thay đổi bất kỳ cái nào trong số chúng.

Khi bạn hoàn thành, bạn sẽ kết thúc với một cái gì đó như thế này:

Bước 4: Tạo biến lớp dữ liệu ID biểu mẫu

Ở Bước 2, chúng tôi đã đẩy ID của shortcode vào Lớp dữ liệu. Khi biểu mẫu được gửi, các ID biểu mẫu được đẩy vào Lớp dữ liệu (xem bên dưới) và chúng tôi cần nắm bắt và đưa chúng vào GTM và vào Sự kiện Google Analytics của chúng tôi.

Thêm một Biến mới do người dùng xác định có tên là CF7-formID . Đặt Tên biến lớp dữ liệu là CF7 formID (phân biệt chữ hoa chữ thường).

Bước 5: Thiết lập (các) Chuyển đổi mục tiêu

Tiếp theo, chuyển đến Google Analytics và điều hướng đến Quản trị > Chế độ xem > Mục tiêu. Nhấp vào + Mục tiêu mới và thiết lập nó như sau:

Thiết lập mục tiêu: Chọn Tùy chỉnh

Mô tả mục tiêu:

Tên: Gọi nó bất cứ điều gì bạn muốn. Phù hợp với tinh thần của cách thực hiện này, tôi đã gọi là Biểu mẫu liên hệ của mình. 

Loại: Chọn Sự kiện.

Chi tiết mục tiêu: 

Danh mục: Bằng > biểu mẫu liên hệ (hoặc bất cứ điều gì BẠN đặt tên nó trong GTM)

Hành động: Bằng > thành công-biểu mẫu-gửi-thư (hoặc bất cứ điều gì BẠN đặt tên nó trong GTM)

Nhãn: Chọn ID biểu mẫu của biểu mẫu bạn muốn theo dõi. Nếu bạn không muốn theo dõi các biểu mẫu khác nhau một cách riêng biệt, bạn có thể để trống phần này. Của tôi là 1192.

Giá trị: Bạn có thể thêm một biến khác tại đây nếu muốn, như URL trang, v.v.

Sử dụng Giá trị sự kiện làm Giá trị mục tiêu: Nếu bạn có một giá trị được đính kèm với mỗi sự kiện, bạn có thể thiết lập giá trị đó tại đây. Vì tôi đã không làm, tôi sẽ không.

Bây giờ hãy nhấp vào ‘Lưu’ và bạn đã thiết lập Chuyển đổi mục tiêu và theo dõi thích hợp. Nếu bạn muốn thiết lập các mục tiêu khác cho các ID biểu mẫu khác nhau, chỉ cần lặp lại quy trình nhưng thay đổi Nhãn trong Chuyển đổi mục tiêu.

Khắc phục sự cố Theo dõi biểu mẫu liên hệ với GTM

Bởi Chris Berkley23 tháng 10, 2017phân tích

•  Miễn bình luận
• 1
• 0

Bài đăng này nhằm giúp những người đang gặp sự cố khi thiết lập theo dõi Biểu mẫu liên hệ 7 với Trình quản lý thẻ của Google sau khi thực hiện theo hướng dẫn của tôi. Trước khi bạn bắt đầu, hãy xem xét những điều sau, tất cả đều có thể ảnh hưởng đến khả năng theo dõi việc gửi biểu mẫu của bạn:

• Bộ lọc Google Analytics cho địa chỉ IP có thể loại trừ lưu lượng truy cập và chuyển đổi từ nhà / văn phòng của bạn trước khi nó được đưa vào Google Analytics.
• Các plugin chọn không tham gia Google Analytics cho Chrome, Firefox, v.v. có tác dụng tương tự như bộ lọc IP.
• Nếu một người điền vào cùng một biểu mẫu ba lần trong phiên của họ, điều đó sẽ được ghi lại thành ba Sự kiện. Tuy nhiên, nó sẽ chỉ được ghi lại dưới dạng một Chuyển đổi mục tiêu. Đây chỉ là cách Google Analytics hoạt động.
• Nếu bạn đã thiết lập trang web của mình để chuyển hướng đến trang cảm ơn sau khi gửi biểu mẫu, hướng dẫn này sẽ không phù hợp với bạn – bạn cần thiết lập Chuyển đổi mục tiêu theo cách khác.
• Nếu bạn không sử dụng GTM để theo dõi các bài gửi, hướng dẫn này sẽ không phù hợp với bạn. Tương tự, nếu bạn có sự kết hợp giữa GA và GTM, tôi không thể đảm bảo chức năng này sẽ phù hợp với bạn như thế nào.

Gỡ rối thiết lập GTM

Giả sử bạn đã kiểm tra kỹ thiết lập của mình và làm theo các hướng dẫn một cách cẩn thận, không mắc lỗi chính tả, hãy bắt đầu với Trình quản lý thẻ của Google và tìm hiểu xem các thẻ có đang kích hoạt hay không. Đăng nhập vào GTM, điều hướng đến góc trên cùng bên phải và nhấp vào Xem trước .

Sau đó, bạn sẽ thấy hộp này:

Chúng tôi sẽ sử dụng chế độ Gỡ lỗi của GTM để xem liệu sự kiện có đang kích hoạt hay không và đảm bảo thông tin đang được gửi đến Lớp dữ liệu. Truy cập một trang trên trang web của bạn với Biểu mẫu liên hệ mà bạn đã thiết lập theo dõi, sau đó thực hiện làm mới cứng (Shift + F5 trong Chrome) để bỏ qua nội dung đã lưu trong bộ nhớ cache và tải trang mới.

Bạn sẽ thấy cửa sổ Gỡ lỗi ở cuối màn hình. Ngăn bên trái hiển thị các sự kiện đã diễn ra trong thời gian của bạn trên trang. Bạn sẽ thấy hai thẻ được kích hoạt: Universal Analytics (theo dõi lượt xem trang cơ bản) và cả thẻ wpcf7mailsent với Javascript tùy chỉnh sẽ kích hoạt khi thư thực sự được gửi.

Nếu bạn không thấy một trong hai thẻ này, thì có một vấn đề với một trong những thẻ đó và bạn nên quay lại và đảm bảo chúng được thiết lập để kích hoạt chính xác.

Tiếp theo, điền và gửi biểu mẫu. Ở bên trái, bạn sẽ thấy một sự kiện mới, wpcf7successfulsubmit . Nhấp vào nó sẽ hiển thị chi tiết về những thẻ nào đã được kích hoạt trong sự kiện này. Bạn sẽ thấy thẻ Gửi biểu mẫu liên hệ được liệt kê (xem bên dưới).

Bây giờ, hãy chuyển đến tùy chọn ngoài cùng bên phải trong hàng ở trên cùng của ngăn – nhấp vào Lớp dữ liệu . Bạn sẽ thấy CF7formID được liệt kê trong Lớp dữ liệu và nó phải có ID biểu mẫu thực tế trong đó (trong trường hợp này là 1192 ). Thông tin này được đẩy vào Lớp dữ liệu bằng thẻ wpcf7mailsent  . Nếu bạn không nhìn thấy nó hoặc nó cho biết không xác định , hãy quay lại và xem thẻ wpcf7mailsent của bạn – có thể thẻ của bạn có vấn đề.

Tiếp theo, nhấp vào tab Biến sẽ hiển thị cho bạn những Biến nào đã được ghi lại và bạn sẽ thấy một Biến lớp dữ liệu có tên CF7-formID . Nếu bạn thấy ID biểu mẫu được liệt kê trong tab Lớp dữ liệu, nhưng không phải tab Biến, thì có thể Biến CF7-formID tùy chỉnh của bạn có vấn đề và bạn nên xem xét lại.

Nếu bạn thực hiện xong tất cả cách khắc phục sự cố này và mọi thứ đã được kiểm tra, thì chúng tôi cần chuyển sang Google Analytics để tiếp tục đánh giá các phần khác nhau của quy trình. Điều đó không có nghĩa là thiết lập GTM của bạn đang hoạt động 100%, nhưng bắt đầu thu hẹp số khu vực mà mọi thứ đã xảy ra.

Gỡ rối Google Analytics

Đăng nhập vào GA và chuyển đến báo cáo Thời gian thực> Sự kiện. Điền và gửi lại biểu mẫu của bạn, sau đó đợi một vài giây. Sự kiện GA phải được ghi lại bằng Danh mục & Hành động mà bạn đã đưa vào thẻ GTM Gửi biểu mẫu liên hệ (xem bên dưới).

Nếu không, trước tiên hãy xem Trình kích hoạt Biểu mẫu liên hệ 7 của bạn và đảm bảo rằng nó được thiết lập để kích hoạt trên wpcf7successfulsubmit. 

Bằng cách nhấp vào Danh mục sự kiện, GA cũng sẽ hiển thị cho bạn Nhãn sự kiện, mà chúng tôi thiết lập làm ID biểu mẫu. Nếu bạn không thấy thông báo này, hãy đảm bảo rằng thẻ GTM Gửi biểu mẫu liên hệ của bạn có Nhãn sự kiện được xác định chính xác là Biến CF7-formID GTM. Việc thiếu Nhãn sự kiện sẽ ảnh hưởng đến Theo dõi chuyển đổi mục tiêu nếu bạn đã thiết lập Nhãn để theo dõi một biểu mẫu cụ thể.

Nếu tất cả đã kiểm tra, hãy xem báo cáo Thời gian thực> Chuyển đổi mục tiêu. Bạn sẽ thấy Chuyển đổi mục tiêu của mình cũng xuất hiện ở đó. Nếu không, hãy kiểm tra thiết lập Chuyển đổi mục tiêu của bạn trong Google Analytics để đảm bảo rằng bạn đang theo dõi Danh mục sự kiện, Hành động và Nhãn chính xác.

Giả sử bạn đã thiết lập Chuyển đổi mục tiêu một cách chính xác, vẫn có một vài khả năng mà tôi đang nhắc lại từ đầu trang này:

• Bộ lọc Google Analytics cho địa chỉ IP có thể loại trừ lưu lượng truy cập và chuyển đổi từ nhà / văn phòng của bạn trước khi nó được đưa vào Google Analytics.
• Các plugin chọn không tham gia Google Analytics cho Chrome, Firefox, v.v. có tác dụng tương tự như bộ lọc IP.
• Nếu một người điền vào cùng một biểu mẫu ba lần trong phiên của họ, điều đó sẽ được ghi lại thành ba Sự kiện. Tuy nhiên, nó sẽ chỉ được ghi lại dưới dạng một Chuyển đổi mục tiêu. Đây chỉ là cách Google Analytics hoạt động.
• Nếu bạn đã thiết lập trang web của mình để chuyển hướng đến trang cảm ơn sau khi gửi biểu mẫu, hướng dẫn này sẽ không phù hợp với bạn – bạn cần thiết lập Chuyển đổi mục tiêu theo cách khác.
• Nếu bạn không sử dụng GTM để theo dõi các bài gửi, hướng dẫn này sẽ không phù hợp với bạn. Tương tự, nếu bạn có sự kết hợp giữa GA và GTM, tôi không thể đảm bảo chức năng này sẽ phù hợp với bạn như thế nào.