Khi làm việc với Google Tag Manager, đôi khi chúng ta sẽ gặp những vấn đề cần điều tra kỹ hơn để hiểu điều gì đang thực sự diễn ra. Debug (gỡ lỗi) là một trong những bước quan trọng nhất nhưng lại thường bị bỏ qua trong quy trình làm việc với GTM. Việc này giúp bạn kiểm tra mọi kịch bản trải nghiệm người dùng có thể xảy ra và đảm bảo tính nhất quán của dữ liệu được thu thập.
Chế độ Preview của Google Tag Manager là một tính năng tích hợp sẵn, cho phép bạn kiểm tra container GTM ngay trên website của mình trước khi xuất bản thay đổi lên môi trường live. Nó mở ra một bảng điều khiển debug, nơi bạn có thể xem theo thời gian thực những thẻ (tag) nào đang được kích hoạt, dữ liệu nào đang được thu thập và lý do vì sao trigger của bạn có hoặc không được kích hoạt. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng chế độ Preview của Google Tag Manager (còn được gọi là Preview and Debug mode) và chia sẻ một số phương pháp thực hành tốt nhất khi làm việc với tính năng này.
Google Tag Manager Debug Mode là gì?
Chế độ Preview của Google Tag Manager (còn gọi là Preview and Debug mode hoặc P&D) cho phép bạn duyệt website đã cài đặt container GTM và xem trước những thẻ (tag) nào đang được kích hoạt, chúng gửi loại dữ liệu nào đến các nền tảng phân tích/marketing, v.v.
Khi bạn bật chế độ Preview trong giao diện Google Tag Manager, bạn sẽ thấy ba tab trình duyệt (hoặc hai tab và một cửa sổ bổ sung):
- Một tab chứa giao diện Google Tag Manager của bạn.
- Một tab mới mở tại tagassistant.google.com, nơi hiển thị bảng điều khiển preview thực tế.
- Một tab (hoặc cửa sổ) mới hiển thị website của bạn, kèm theo huy hiệu (badge) của chế độ preview ở góc dưới bên phải màn hình.
Vì sao chế độ preview lại cần thiết? Bởi vì không có gì tệ hơn việc làm việc với GTM trong “mù mờ” và cố gắng đoán xem cấu hình của mình có hoạt động hay không.
Chế độ preview của Google Tag Manager giúp bạn:
- Xem những tag nào đã được kích hoạt trong từng tương tác cụ thể trên website (ví dụ: click vào link hoặc gửi form)
- Biết được tag nào không được kích hoạt
- Hiểu lý do vì sao một số tag được kích hoạt hoặc không được kích hoạt
- Kiểm tra các biến (variables) nào khả dụng trên trang và giá trị của chúng
- Theo dõi sự thay đổi của Data Layer khi các tương tác khác nhau diễn ra trên trang
Cá nhân tôi thường không bao giờ tin hoàn toàn vào cảm giác khi chỉnh sửa cấu hình GTM. Tôi luôn kiểm tra lại, kể cả những thay đổi nhỏ. Bởi sẽ rất tệ nếu sau vài ngày (hoặc thậm chí vài tuần) bạn mới phát hiện ra rằng một thay đổi gần đây đã làm hỏng hệ thống tracking analytics. Hãy luôn kiểm tra trước. Sau đó mới Publish thay đổi lên môi trường live. Bây giờ, chúng ta hãy cùng tìm hiểu cách chế độ preview hoạt động và cách làm việc với nó.
Bật chế độ Preview và Debug
Để bật chế độ Debug trong Google Tag Manager, hãy nhấp vào nút Preview ở góc trên bên phải giao diện GTM (gần nút Submit). Sau khi bạn nhấp vào nút Preview, một tab trình duyệt mới sẽ mở tại tagassistant.google.com. Nếu tab này không tự động mở, hãy tham khảo hướng dẫn khắc phục tương ứng. Tại đó, một cửa sổ popup sẽ yêu cầu bạn nhập URL mà bạn muốn kiểm tra và debug. Đây có thể là trang chủ hoặc một URL cụ thể bất kỳ trên website. Sau đó, nhấn Start. Một tab (hoặc cửa sổ) mới sẽ xuất hiện, hiển thị URL mà bạn đã nhập ở bước trước. Nếu trang không tải đúng cách, hãy thử bật lại chế độ preview một lần nữa và bỏ chọn checkbox trong cửa sổ popup của preview trước khi tiếp tục.
Ở phía dưới của trang (hoặc tab) đó, bạn phải nhìn thấy một huy hiệu (badge) của chế độ preview. Khi quay lại tab tagassistant.google.com, bạn sẽ thấy thông báo kết nối thành công. Nếu bạn không thấy thông báo thành công hoặc huy hiệu preview hiển thị rằng debugger chưa được kết nối, hãy tham khảo hướng dẫn xử lý sự cố tương ứng.
Bố cục của trang Preview trong Google Tag Manager
Chế độ Debug của Google Tag Manager (còn gọi là Google Tag Manager Console hoặc đơn giản là GTM console) bao gồm 8 phần chính:
Event Timeline
Hiển thị tất cả các sự kiện trong Data Layer (ví dụ: page view, gửi form, click, v.v.). Mỗi mục tương ứng với một event (hay còn gọi là một lần dataLayer.push). Đừng nhầm lẫn chúng với event trong Google Analytics – đây là hai khái niệm hoàn toàn khác nhau mà tôi đã giải thích trong một bài viết khác.
Tags
Hiển thị những tag nào đã được kích hoạt (fired) ở event Data Layer đang chọn và những tag nào không được kích hoạt.
Variables
Hiển thị thông tin chi tiết về các biến trong event đang chọn, bao gồm loại biến, kiểu dữ liệu trả về và giá trị thực tế (resolved value).
Data Layer
Hiển thị chính xác object message đã được đẩy vào Data Layer tại event đang chọn, cũng như trạng thái của Data Layer sau khi message đó được xử lý xong. Tất cả các điểm dữ liệu xuất hiện ở đây đều có thể được chuyển thành biến (và sẽ hiển thị trong tab Variables).
Consent
Hiển thị trạng thái đồng ý (consent status) nếu bạn đang sử dụng Google Consent Mode.
Errors
Nếu bạn thấy một con số khác 0 trong tab này, hãy nhấp vào để xem nguyên nhân lỗi.
Header
Tại đây, bạn có thể xem trạng thái của chế độ Preview (đã kết nối với cửa sổ website vừa mở hay chưa). Ngoài ra, nếu bạn đang triển khai Universal Google Analytics qua gtag.js hoặc đang chạy Google Analytics 4, bạn sẽ thấy một menu dropdown để chuyển đổi giữa các chế độ hiển thị phù hợp.
Container details
Hiển thị tên container, ID container, cách container được triển khai, cùng với Conversion Version và Environment.
Event Timeline
Tất cả các event trong Data Layer sẽ được hiển thị ở phía bên trái của bảng điều khiển Preview và Debug, trong mục Event Timeline. Mỗi khi một trang được tải, bạn sẽ thấy tối thiểu 5 event sau:
- Consent Initialization
- Initialization
- Container Loaded (trước đây gọi là Pageview)
- DOM Ready
- Window Loaded
Nếu bạn thấy thêm các event khác (ví dụ: Message), điều đó hoàn toàn bình thường. Tuy nhiên, cả 5 event nêu trên bắt buộc phải xuất hiện trên mỗi trang. Nếu bạn không thấy event Container Loaded, rất có thể Data Layer của bạn đang gặp lỗi. Có những trường hợp Data Layer bị ghi đè hoặc cấu hình sai khiến event này không xuất hiện trong chế độ Preview & Debug của GTM. Ngoài ra, khi bạn điều hướng từ trang này sang trang khác trên website (trong quá trình debug), các event trong preview mode sẽ được nhóm lại theo từng trang tương ứng.
Nếu chế độ Preview của Google Tag Manager không hoạt động
Nếu bạn gặp sự cố với chế độ Preview & Debug (ví dụ: không hiển thị giao diện debug hoặc không kết nối được), bạn nên tham khảo tài liệu hướng dẫn khắc phục lỗi tương ứng và kiểm tra lại từng bước thiết lập. Các vấn đề này thường liên quan đến cấu hình container, cookie, extension trình duyệt hoặc quyền truy cập domain.
Event “Message” trong timeline là gì?
Thỉnh thoảng bạn sẽ thấy một event có tên “Message” xuất hiện trong Event Timeline, đôi khi còn trước cả event Container Loaded. Bạn không cần lo lắng về điều này.
Điều đó đơn giản có nghĩa là đã có một lệnh dataLayer.push() được thực thi trên trang, nhưng push đó không chứa key event.
-
Nếu push có key
event(ví dụ:{'event': 'login'}), GTM sẽ đặt tên event trong timeline là “login”. -
Nếu không có key
event(ví dụ:{'user_id': '123'}), GTM vẫn ghi nhận rằng dữ liệu đã được đẩy vào Data Layer, nhưng sẽ đặt tên chung là “Message”.
Bạn có thể nhấp vào event “Message” đó và mở tab Data Layer để kiểm tra chính xác dữ liệu nào đã được đẩy lên tại thời điểm đó.
Khi sử dụng thành thạo Preview mode, bạn không chỉ biết tag có kích hoạt hay không mà còn hiểu rõ lý do phía sau. Điều đó giúp giảm đáng kể thời gian xử lý lỗi và hạn chế rủi ro khi publish container. Hãy luôn kiểm tra kỹ trước khi đưa thay đổi lên môi trường live. Debug cẩn thận hôm nay sẽ giúp bạn tránh những vấn đề dữ liệu nghiêm trọng về sau.
Tài liệu tham khảo