Theo dõi Comment bằng Google Tag Manager

Thẻ + Trình kích hoạt: yếu tố đầu tiên

• Đi đến Thẻ
• Nhấn nút Mới
• Trong Cấu hình thẻ chọn Universal Analytics:
  • Theo dõi Loại – Sự kiện
  • Danh mục sự kiện – Gửi Comment
  • Hành động sự kiện – {{Page URL}}
  • Nhãn sự kiện
  • Chỉ định Biến cài đặt Google Analytics (có chứa ID theo dõi, ví dụ: UA-XXXXXX-XX).
  • Để nguyên các lĩnh vực khác
• Nhấp Lưu

Các phương pháp theo dõi Comment

Giải pháp làm sẵn cho các hộp bình luận phổ biến

• Có thể bạn đã biết điều đó vì bạn đã cài đặt một plugin trên trang WordPress của mình (hoặc bất kỳ hệ thống quản lý nội dung nào bạn đang sử dụng)
• Bạn có thể hỏi một nhà phát triển
• Một lựa chọn khác là tìm kiếm logo hoặc một số dấu hiệu khác của thương hiệu. Ví dụ: hộp bình luận Disqus có logo ở góc dưới bên phải.

Trình kích hoạt gửi biểu mẫu mặc định trong GTM

• Tiêu đề – “Tất cả các lần gửi biểu mẫu”.
• Loại kích hoạt – Gửi biểu mẫu.
• Bỏ Wait for tags. Sau này, bạn có thể đặt thành 2000 mili giây, điều này có nghĩa là trang sẽ tải lại chỉ 2 giây sau khi hộp biểu mẫu nhận xét được gửi. 2000 mili giây là đủ thời gian để thẻ Sự kiện Google Analytics kích hoạt.
• Nhấp vào hộp Check validation. Khi điều này được kiểm tra, GTM sẽ không kích hoạt Trình kích hoạt nếu hành động mặc định của biểu mẫu (gửi và chuyển hướng) bị ngăn chặn. Nếu không được chọn, Trình kích hoạt sẽ tắt bất cứ khi nào sự kiện gửi được đăng ký (ngay cả khi biểu mẫu được gửi có lỗi (ví dụ: một số trường bắt buộc bị bỏ trống)).
• Kích hoạt tiếp.

• Đi tới Trình kích hoạt và nhấp vào Mới
• Nhấp vào phần Cấu hình trình kích hoạt và chọn loại trình kích hoạt – Gửi biểu mẫu
• Nhấp vào Check validation và đặt quy tắc URL trang khớp với RegEx (.*) . Quy tắc này có nghĩa là trình kích hoạt gửi nhận xét này sẽ có sẵn trên tất cả các trang. Nếu bạn muốn làm cho nó chỉ có thể truy cập được trên các trang cụ thể, bạn có thể thêm các quy tắc cụ thể hơn, chẳng hạn như URL trang chứa /post/ (tùy thuộc vào địa chỉ web nơi đặt hộp nhận xét của bạn).
• Sau đó, định cấu hình trình kích hoạt này để chỉ kích hoạt trên một số biểu mẫu và nhập quy tắc sau: Form Classes equals comment_box.
  • Nếu bạn không thấy biến Lớp biểu mẫu – Hãy bật biến này trong danh sách Biến tích hợp của Google Tag Manager.
  • Giá trị của lớp biểu mẫu có thể khác tùy từng trường hợp.

• Chỉ định trình kích hoạt mới này cho Thẻ Google Analytics mà bạn đã tạo
• Mở (hoặc làm mới) chế độ Xem trước và Gỡ lỗi, làm mới trang web có biểu mẫu bạn muốn theo dõi.
• Sau đó điền vào hộp comment và gửi.

Theo dõi hộp AJAX Comment

<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {

 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {

 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();

 // Check for up to 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);

 }

 }

 function bindToAjax() {

 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {

 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;

 // IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params and headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

 // Blindly push to the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings to prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer to jQuery's handling of the response
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });

 });

 }

 function objMap(data, delim, spl, decode) {

 var obj = {};

 // If one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {

 return {};

 }

 var arr = data.split(delim);
 var i;

 if (arr) {

 for (i = 0; i < arr.length; i++) {

 // If the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);

 var key = trim_(pair[0]);
 var value = trim_(pair[1]);

 if (key && value) {

 obj[key] = value;

 }

 }

 }

 return obj;

 }

 // Basic .trim() polyfill
 function trim_(str) {

 if (str) {

 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

 }

 }


 })();
 /*
 * v0.1.0
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */
</script>

• Bật (hoặc làm mới) chế độ Xem trước và Gỡ lỗi
• Làm mới trang web với hộp comment
• Thử gửi nhận xét (điền trong tất cả casc trường)
• Sự kiện ajaxComplete xuất hiện trong bảng điều khiển Chế độ Xem trước và gỡ lỗi không?

• Đi đến Biến
• Cuộn chuột xuống biến User-Defined và nhấp “Mới”
• Nhấp Variable configuration và chọn loại biến – Biến Data Layer
• Nhập Tên biến Data Layer – attributes.response. Để nguyên tất cả các cài đặt khác.
• Trong ví dụ này Tiêu đề của biến GTM này là dlv – attribute.response (“dlv” là viết tắt của Biến lớp dữ liệu).

• Đi tới Trình kích hoạt và nhấp vào Mới
• Chọn Loại kích hoạt – Sự kiện tùy chỉnh. Trình nghe AJAX của Lunametrics tạo sự kiện Data Layer ( thông qua phương thức dataLayer.push ) mỗi khi yêu cầu AJAX được thực hiện.
• Nhập tên sự kiện – ajaxComplete
• Trình kích hoạt này sẽ kích hoạt một số Sự kiện tùy chỉnh.
• Xác định điều kiện khi trình kích hoạt sẽ kích hoạt – dlv – attribute.response chứa Tin nhắn đã được gửi thành công.

• Chỉ định trình kích hoạt mới này cho Thẻ Google Analytics mà bạn đã tạo
• Mở (hoặc làm mới) chế độ Xem trước và Gỡ lỗi, làm mới trang web bằng hộp nhận xét bạn muốn theo dõi.
• Sau đó điền vào hộp bình luận AJAX và gửi. Sau khi gửi thành công, Thẻ Google Analytics sẽ kích hoạt (thẻ này sẽ được hiển thị ở chế độ Xem trước và Gỡ lỗi. Bạn cũng có thể kiểm tra báo cáo sự kiện thời gian thực của Google Analytics ).

• Phản hồi AJAX khi gửi nhận xét sẽ khác tùy trường hợp.
• Nếu nhà phát triển thay đổi dữ liệu phản hồi, trình kích hoạt của bạn sẽ không thành công. Thông báo cho nhà phát triển về việc triển khai GTM của bạn.
• Nếu trang chứa nhiều hộp nhận xét AJAX, hãy thử tìm kiếm thêm thông tin trong Lớp dữ liệu để có thể giúp Google Tag Managerphân biệt sự khác biệt giữa các hộp nhận xét đó.

Sự kiện Data Layer

<script>
 window.dataLayer.push({
 'event': 'commentSubmission',
 'pageTitle': 'This is a page title' //this should be dynamically changed (based on the page the visitor is on) 
});
</script>

• Đầu tiên, chọn tên cho sự kiện. Trong ví dụ trên tôi chọn commentSubmission.
• Sau đó nghĩ đến bất kỳ dữ liệu bổ sung nào bạn có thể cần. Viết những điểm dữ liệu đó ra và thử phân loại chúng.
• Nếu nhà phát triển chưa quen với các sự kiện dataLayer và Google Tag Manager nói chung. Giải thích với họ rằng bạn cần một sự kiện và (nếu có thể) một biến bổ sung được đẩy vào dataLayer sau khi gửi nhận xét thành công. Nếu cần, bạn có thể yêu cầu thêm dữ liệu để được chuyển.
• Hãy nhớ: Không yêu cầu nhà phát triển chuyển bất kỳ dữ liệu cá nhân nào nếu bạn đang làm việc với GA.

• Mở chế độ Xem trước và Gỡ lỗi.
• Làm mới trang bằng hộp comment.
• Hãy thử gửi comment:
  • Để trống ít nhất một trường bắt buộc. Trong trường hợp này, sự kiện dataLayer không được đẩy.
  • Điền vào tất cả các trường và thử gửi lại. Sự kiện có xuất hiện trong bảng điều khiển Xem trước và gỡ lỗi không.

• Tiêu đề: dlv – pageTitle
• Loại biến: Biến Data Layer
• Tên Biến Data Layer: pageTitle Giữ nguyên tất cả các cài đặt khác

• Loại trình kích hoạt: Sự kiện tùy chỉnh
• Tên sự kiện: commentSubmission (có thể khác nhau tùy thuộc vào tình huống của bạn. Chỉ cần đảm bảo rằng bạn và nhà phát triển của bạn đang sử dụng cùng một tên).
• Trình kích hoạt này kích hoạt: Tất cả sự kiện tùy chỉnh. Điều này có nghĩa là tất cả các sự kiện commentSubmission sẽ được theo dõi.

• Chỉ định trình kích hoạt mới này cho Thẻ Google Analytics mà bạn đã tạo.
• Mở (hoặc làm mới) chế độ Xem trước và Gỡ lỗi, làm mới trang web bằng hộp nhận xét bạn muốn theo dõi.
• Sau đó điền vào ô bình luận và gửi. Sau khi gửi thành công, Thẻ Google Analytics sẽ kích hoạt (thẻ này sẽ được hiển thị ở chế độ Xem trước và Gỡ lỗi. Bạn cũng có thể kiểm tra báo cáo sự kiện thời gian thực của Google Analytics ).

• Hạng mục sự kiện vẫn giữ nguyên, Comment submission
• Hành động sự kiện – từ {{URL trang}} đến Trang: {{dlv – pageTitle}}
• Đặt Nhãn sự kiện là {{URL trang}}

• Hạng mục sự kiện: Gửi bình luận
• Hành động sự kiện: Trang: Đây là tiêu đề trang
• Nhãn sự kiện: https://www.analyticsmania.com/mega-blog-post/

Phương pháp khác

• Trình kích hoạt khả năng hiển thị phần tử. Nó kích hoạt sự kiện Data Layer khi một phần tử cụ thể xuất hiện trên màn hình. Trong trường hợp của bạn, đó phải là thông báo “Nhận xét đã được gửi thành công”.
• Quét DOM. Đó là một kỹ thuật kiểm tra giá trị của một thành phần web cụ thể. Nếu một trang tải lại và thông báo “Cảm ơn” xuất hiện, bạn có thể trích xuất DOM để theo dõi nó.

Kết luận