Kiến thức Google Tag Manager

Theo dõi Comment bằng Google Tag Manager

Nếu bạn đang điều hành một blog, diễn đàn hoặc một trang web khác nơi người đọc có thể bày tỏ ý kiến và thảo luận, bạn chắc chắn nên đo lường số lượt gửi nhận xét. Nhờ Google Tag Manager, điều đó có thể thực hiện được và bạn có thể gửi dữ liệu đó đến các công cụ phân tích trang web khác như Google Analytics. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách theo dõi nhận xét bằng Google Tag Manager.

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

Khi bạn đã quen với Google Tag Manager thì bạn biết rằng nếu muốn theo dõi thì cần một thẻ và một trình kích hoạt. Nếu bạn muốn theo dõi tất cả comment với Google Analytics, bạn sẽ cần tạo một thẻ Google Analytics và Trình kích hoạt khi thẻ đó phải kích hoạt.
Quá trình tạo thẻ dưới đây:
  • Đ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ó một số lựa chọn giúp bạn biết nhà cung cấp nào đã phát triển hộp comment bạn đang sử dụng:
  • 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.
  • Thử kiểm tra hộp nhận xét bằng các công cụ dành cho nhà phát triển của trình duyệt. Có thể có một số dấu hiệu cho thấy công ty đã phát triển hộp comment này. Ví dụ: đây là những gì tìm thấy sau khi nhấp chuột phải vào hộp Nhận xét Disqus và tìm kiếm một số tên hoặc liên kết.

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

Comment boxes không có gì khác ngoài các biểu mẫu, do đó bạn phải theo dõi chúng dưới dạng biểu mẫu. Bạn nên dùng thử trình nghe biểu mẫu tích hợp của GTM .
Mở danh sách Biến trong tài khoản GTM của bạn. Trong các biến tích hợp, hãy nhấp vào Định cấu hình và bật tất cả các biến Biểu mẫu ở thanh bên phải (tất cả các thay đổi sẽ được lưu tự động).
Sau đó mở danh sách tất cả các trình kích hoạt (bằng cách nhấp vào Trình kích hoạt ở thanh bên trái). Tạo trình kích hoạt mới:
  • 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.
Bây giờ, hãy sử dụng chế độ Xem trước và gỡ lỗi của GTM để tìm hiểu xem trình nghe sự kiện tự động ở dạng mặc định có phù hợp không. Ở góc trên bên phải của tài khoản Google Tag Manager, hãy nhấp vào “Xem trước”.
Khi chế độ xem trước được bật, hãy điều hướng đến trang web nơi hộp nhận xét được nhúng và bạn sẽ thấy bảng điều khiển gỡ lỗi ở cuối trình duyệt hiển thị thông tin chi tiết về thẻ của bạn, bao gồm trạng thái kích hoạt của chúng và dữ liệu nào đang được xử lý. Cửa sổ bảng điều khiển này sẽ chỉ xuất hiện trên máy tính của bạn khi bạn xem trước trang web và không hiển thị với những khách truy cập trang web khác của bạn. Nó sẽ trông giống như thế này:
Nếu bạn đã mở trang đó bằng comment box nhưng không thấy bảng điều khiển gỡ lỗi GTM, hãy làm mới trang.
Sau đó Điền vào Comment box (cố gắng không để trống bất kỳ trường nào):
  • Nhấn nút gửi. nếu Sự kiện gtm.formSubmit không xuất hiện trong bảng điều khiển Xem trước và Gỡ lỗi, trình xử lý sự kiện tự động Biểu mẫu của GTM sẽ không hoạt động với hộp Comment này và bạn nên chuyển sang tùy chọn theo dõi nhận xét tiếp theo được mô tả trong hướng dẫn này.
  • Nếu sự kiện gtm.formSubmit đã xuất hiện trong bảng điều khiển Xem trước và gỡ lỗi thì bạn nên thực hiện một thử nghiệm khác – thử để trống ít nhất một trường nhận xét bắt buộc (ví dụ: tên) và gửi lại nhận xét.
Hãy tạo một trình kích hoạt cụ thể cho loại biểu mẫu tức là hộp comment. Nhấp vào gtm.formSubmit (ở chế độ Xem trước và Gỡ lỗi), sau đó nhấp vào Biến.
Sau đó cuộn xuống và bắt đầu tìm kiếm bất kỳ biến Biểu mẫu nào dành riêng cho hộp nhận xét . Thông thường, các hộp bình luận có một Lớp biểu mẫu riêng biệt (ví dụ: comment_box ). Sử dụng điều đó như một điều kiện kích hoạt.
Bây giờ, hãy sử dụng nó trong trình kích hoạt:
  • Đ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.
Kiểm tra
  • 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

Đây là mã của trình nghe AJAX. Sao chép và dán vào thẻ HTML tùy chỉnh Google Tag Manager.
<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>
Sau khi kích hoạt trình nghe AJAX thông qua thẻ HTML Tùy chỉnh, kiểm tra xem hộp comment của bạn có đang sử dụng công nghệ AJAX bằng cách
  • 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?
Nhấp vào sự kiện ajaxComplete ở chế độ Xem trước và Gỡ lỗi, sau đó nhấp vào Data Layer:
Đây là dữ liệu được chuyển đến lớp dữ liệu sau khi gửi nhận xét thành công, mỗi dòng là một điểm dữ liệu DataLayer riêng biệt có thể được sử dụng làm biến dataLayer trong GTM.
Một số biểu mẫu hoặc hộp comment kích hoạt nhiều yêu cầu AJAX, do đó bạn cần kiểm tra cả hai sự kiện trong Tab Data Layer và cố gắng xác định sự kiện nào chứa thông tin nhận xét được gửi thành công.
Đầu tiên, tạo biến Data Layer trong Google Tag Manager.
  • Đ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).
Ở dòng 2, bạn có thể thấy tên sự kiện, ajaxComplete, chính là tên xuất hiện trong bảng điều khiển Xem trước và gỡ lỗi ở phía bên trái. Sau đó, chúng ta thấy các thuộc tính là một mảng gồm nhiều điểm dữ liệu khác nhau.
Vì vậy, khi bạn muốn thông báo cho Google Tag Manager rằng chúng tôi quan tâm đến giá trị của phản hồi, bạn cần cho biết đường dẫn chính xác đến dữ liệu đó. Trong trường hợp này, đó là thuộc tính ->phản hồi. Mỗi cấp độ của đường dẫn phải được phân tách bằng dấu chấm: thuộc tính.response.
Sau khi tạo biến Data Layer attribute.response trong Google Tag Manager, hãy gỡ lỗi. Làm mới chế độ Xem trước và Gỡ lỗi và làm mới trang có hộp nhận xét AJAX. Điền vào bình luận và gửi. Nhấp vào sự kiện ajaxComplete gần đây nhất trong bảng điều khiển Xem trước và gỡ lỗi, sau đó điều hướng đến tab Biến và tìm biến dlv mới của bạn – attribute.response . Nếu bạn làm mọi thứ chính xác, nó sẽ trông như thế này:
Đó là thông báo đã gửi bình luận thành công. Nếu giá trị của biến đó không được xác định thì bạn nên bắt đầu tìm kiếm lỗi. Những lỗi phổ biến nhất là lỗi chính tả trong tên biến hoặc đường dẫn của biến được xác định không chính xác. Một số người chỉ thử sử dụng phản hồi thay vì attributes.response.
Bây giờ, hãy tạo trình kích hoạt khi sự kiện là ajaxComplete và biến dataLayer mới của chúng tôi chứa văn bản Tin nhắn đã được gửi thành công .
  • Đ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.
Kiểm tra
  • 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 ).
Những điều cần lưu ý khi theo dõi các hộp bình luận AJAX:
  • 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

Nếu trình nghe Biểu mẫu Google Tag Manager tiêu chuẩn không hoạt động với hộp comment của bạn thì điều tốt nhất tiếp theo là yêu cầu nhà phát triển triển khai window.dataLayer.push() tùy chỉnh vào hàm gọi lại khi gửi comment thành công. Đoạn mã có thể giống như:
<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>
Bạn sẽ cần chuẩn bị một nhiệm vụ ngắn gọn nhưng được viết tốt và rõ ràng cho nhà phát triển:
  • Đầ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.
Sau khi nhà phát triển triển khai window.dataLayer.push trong tất cả các hộp nhận xét, bạn nên kiểm tra nó:
  • 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.
      • Kiểm tra xem tất cả dữ liệu có được đẩy chính xác tới dataLayer hay không bằng cách nhấp vào sự kiện commentSubmission rồi mở tab Data Layer trong Bảng điều khiển xem trước. Dữ liệu sẽ trông như thế này:
Thiết lập các biến và trình kích hoạt trong GTM. Trong ví dụ window.dataLayer.push có một điểm dữ liệu muốn sử dụng làm biến – pageTitle, vì vậy cần đưa nó vào Google Tag Manager bằng cách tạo biến Data Layer.
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
Bây giờ, hãy tạo một trình kích hoạt. Đi tới Trình kích hoạt và nhấp vào Mới. Nhập các cài đặt sau:
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.
Sau đó kiểm tra:
  • 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 ).
Mẹo: Trong chương này, tôi khuyên bạn nên thực hiện một số thay đổi đối với Thẻ sự kiện Google Analytics.
Vì tác giả đã yêu cầu nhà phát triển của mình cung cấp một biến bổ sung thông qua window.dataLayer.push nên họ có thể sử dụng dữ liệu này và đẩy nó vào GA. Chúng ta có thể thay đổi:
  • 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}}
Ví dụ:
  • 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

Bài viết trên tôi đã hướng dẫn bạn theo dõi Comment bằng Google Tag Manager đầy đủ nhất. Bằng cách theo dõi nhận xét, bạn sẽ có thể biết nội dung nào thúc đẩy mức độ tương tác nhiều nhất và do đó hiểu rõ hơn những gì độc giả của bạn thích hoặc không thích vì số lượt xem trang không nhất thiết là một dấu hiệu tốt về nội dung có chất lượng đáng yêu. Bạn có bất kỳ câu hỏi nào về theo dõi Comment bằng Google Tag Manager không? Hãy để lại bình luận bên dưới nhé.

Nguồn tài liệu dịch: https://www.analyticsmania.com/post/track-comments-with-google-tag-manager/
5/5 - (100 bình chọn)
Xem thêm  [Full 2023] Cài đặt chuyển đổi Google Ads mới nhất

Nguyễn Đức Hòa

Mình là Hòa. Mình là người viết những bài viết trên Blog này và Founder tại X3Sales.vn. Với kinh nghiệm 7+ năm nghiên cứu chuyên sâu về Google Ads. Và những chia sẻ của mình trên Website này đều là những trải nghiệm khi mình triển khai các chiến dịch với Google. Mong rằng sẽ giúp ích nhiều cho bạn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button