Tại sao thẻ của tôi không kích hoạt? Tôi có thể gửi dữ liệu nào tới Google Analytics? Tại sao trình kích hoạt này không hoạt động? Khi nói đến Google Tag Manager, đôi khi chúng tôi gặp phải sự cố cần phải điều tra thêm về những gì đang diễn ra. Chế độ Xem trước là một trong những bước quan trọng nhất nhưng thường bị bỏ qua trong quy trình GTM. Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách sử dụng chế độ Xem trước của Google Tag Manager để có thể thấy được tầm quan trọng của nó.
Video Hướng Dẫn
Chế độ Xem trước của Google Tag Manager là gì?
Chế độ xem trước của Google Tag Manager (còn gọi là chế độ Xem trước và gỡ lỗi, hay còn gọi là P&D) cho phép bạn duyệt qua trang web nơi mã vùng chứa GTM của bạn được triển khai và xem trước thẻ nào đang kích hoạt, loại dữ liệu nào chúng gửi đến nền tảng phân tích v.v.
Khi bật chế độ xem trước trong giao diện Google Tag Manager, bạn sẽ kết thúc với ba tab trình duyệt (hoặc hai tab và một cửa sổ bổ sung):
Một tab có giao diện Google Tag Manager
Một tab mới cho tagassistant.google.com nơi hiển thị bảng điều khiển xem trước thực tế
Một tab (hoặc cửa sổ) mới nơi bạn nhìn thấy trang web của mình và huy hiệu của chế độ xem trước ở góc dưới bên phải màn hình.
Chế độ xem trước của Google Tag Manager cho phép bạn:
- Xem thẻ nào đã kích hoạt các tương tác cụ thể trên trang web (ví dụ: nhấp vào liên kết hoặc gửi biểu mẫu)
- Những thẻ nào không kích hoạt
- Lý do khiến một số thẻ được kích hoạt hoặc không kích hoạt
- Loại biến nào (và giá trị của chúng) có sẵn trên trang
- Data Layer đã thay đổi như thế nào trên trang khi có nhiều tương tác khác nhau đang diễn ra
Bật chế độ xem trước và gỡ lỗi
Để bật chế độ Gỡ lỗi Google Tag Manager, hãy nhấp vào nút Preview ở góc trên cùng bên phải giao diện GTM của bạn (gần nút Submit).
Sau khi bạn nhấp vào nút Xem trước, tab trình duyệt mới sẽ mở ra với tagassistant.google.com.
Một cửa sổ bật lên sẽ yêu cầu bạn nhập URL mà bạn muốn kiểm tra và gỡ lỗi. Đó có thể là địa chỉ của trang chủ hoặc có thể là URL của một trang cụ thể, sau đó nhấn Bắt đầu.
Một tab (hoặc cửa sổ) trình duyệt mới sẽ xuất hiện nơi bạn sẽ thấy URL bạn đã nhập trong cửa sổ bật lên trước đó. Nếu trang không hoạt động, hãy thử bật lại chế độ xem trước rồi tắt hộp kiểm này trong cửa sổ bật lên của bản xem trước:
Ở cuối trang/tab đó, bạn phải thấy huy hiệu sau:
Và nếu bạn quay lại tab tagassistant.google.com , bạn phải thấy thông báo thành công này.
Nếu bạn không thấy thông báo thành công hoặc nếu huy hiệu xem trước cho thấy trình gỡ lỗi chưa được kết nối.
Bố cục của trang Xem trước của Google Tag Manager
Chế độ gỡ lỗi của Google Tag Manager (còn gọi là bảng điều khiển Google Tag Manager) bao gồm sáu phần chính:
- Dòng thời gian sự kiện. Hiển thị tất cả các sự kiện trong Data Layer (ví dụ: lượt xem trang, gửi biểu mẫu, số lần nhấp, v.v.). Một mục = một sự kiện (còn gọi là dataLayer.push). Đừng nhầm chúng với các sự kiện Google Analytics.
- Thẻ (Tags). Hiển thị thẻ nào đã kích hoạt trên sự kiện data layer đã chọn và thẻ nào không.
- Các biến (Variables). Hiển thị thông tin chi tiết về các biến trong sự kiện đã chọn, bao gồm loại biến, loại dữ liệu được trả về và giá trị được giải quyết.
- Data Layer. Hiển thị đối tượng tin nhắn chính xác khi nó được đẩy lên data layer cho sự kiện đã chọn và data layer trông như thế nào sau khi giao dịch tin nhắn hoàn tất. Tất cả các điểm dữ liệu có sẵn ở đây có thể được chuyển thành biến (sẽ xuất hiện trong tab Biến ).
- Errors. Nếu bạn nhận thấy bất kỳ số nào trong tab (chứ không phải 0), hãy nhấp vào số đó và xem nguyên nhân.
- Header. Tại đây bạn có thể xem trạng thái của chế độ Xem trước (có kết nối với cửa sổ trang web mới mở hay không).
Dòng thời gian sự kiện
Tất cả các sự kiện trong Data Layer được hiển thị ở phía bên trái của Bảng điều khiển Xem trước và Gỡ lỗi. Mỗi lần tải trang, phải có ba sự kiện được hiển thị trong danh sách – Đã tải vùng chứa (trước đây gọi là Số lần xem trang), DOM Ready và Window Loaded .
Nếu bạn thấy nhiều sự kiện hơn (ví dụ: Message ) thì không sao. Nhưng cả ba sự kiện đều phải xuất hiện trong danh sách của mỗi trang.
Ngoài ra, khi bạn điều hướng từ trang này sang trang khác trên trang web của mình (bạn đang gỡ lỗi), tất cả các sự kiện ở chế độ xem trước sẽ được nhóm dựa trên các trang đó.
Tại sao luôn có ba sự kiện trên mỗi trang?
- Container Loaded (còn gọi là gtm.js ) là thời điểm sớm nhất khi GTM bắt đầu tải và khi tập lệnh theo dõi có thể được kích hoạt. Ví dụ: đó là lúc bạn nên kích hoạt thẻ theo dõi lượt xem trang Google Analytics. Ngay cả khi trang chưa tải xong, tập lệnh theo dõi của bạn vẫn sẽ khởi chạy. Trước đây, sự kiện này được gọi là Pageview .
- Sự kiện DOM Ready (còn gọi là gtm.dom ) xảy ra khi HTML của trang web được tải xuống, tài liệu của trang được hiển thị và khách truy cập bắt đầu thấy các thành phần trên trang web của bạn.
- Sự kiện Window Loaded (còn gọi là gtm.load ) chỉ kích hoạt khi mọi thứ khác (bao gồm cả Javascript) tải xong.
Các sự kiện khác của Google Tag Manager
Trên thực tế, danh sách các sự kiện của Google Tag Manager là vô tận.
Google Tag Manager cung cấp danh sách các trình kích hoạt được tích hợp sẵn, chẳng hạn như lượt xem trang (bao gồm Chế độ xem trang, DOM Ready và Window Loaded ), nhấp chuột ( nhấp vào liên kết và nhấp chuột vào bất kỳ phần tử nào ), gửi biểu mẫu, hẹn giờ, lỗi Javascript,..
Sau khi trình kích hoạt được bật, nó sẽ tìm kiếm các tương tác cụ thể trên trang web của bạn. Ví dụ: trình kích hoạt Gửi biểu mẫu tìm kiếm các lần gửi biểu mẫu và trình kích hoạt Nhấp chuột vào liên kết chờ tương tác khi khách truy cập nhấp vào bất kỳ liên kết nào.
Khi tương tác mong muốn xảy ra, sự kiện đó sẽ xuất hiện trong Dòng thời gian sự kiện.
Vậy tại sao danh sách các sự kiện GTM là vô tận? Đó là do loại trình kích hoạt cuối cùng, được gọi là Tùy chỉnh.
Nếu bạn muốn tìm hiểu thêm về theo dõi sự kiện tùy chỉnh, hãy xem video bên dưới (nhưng hãy nhớ rằng trong video này, tôi đang sử dụng phiên bản cũ hơn của chế độ xem trước):
Khi nhấp vào bất kỳ sự kiện nào trong dòng thời gian, bạn có thể xem thẻ nào đã kích hoạt và thẻ nào không. Đó là lúc tab Thẻ trở nên cực kỳ quan trọng.
Tags
Tab này hiển thị tất cả các thẻ có sẵn được chia thành hai nhóm: những thẻ đã kích hoạt sự kiện đã chọn và những thẻ không kích hoạt.
Chọn bất kỳ sự kiện nào trong Dòng thời gian sự kiện (1) rồi nhấp vào thẻ bạn quan tâm (2).
Những gì bạn sẽ thấy là cái nhìn chi tiết hơn nhiều về những gì xảy ra với thẻ đó:
- Thuộc tính của thẻ.
- Kích hoạt của thẻ.
- Chặn trình kích hoạt.
Nếu đang sử dụng trình kích hoạt phức tạp hơn với nhiều điều kiện, bạn có thể xem trạng thái của từng điều kiện. Hộp kiểm màu xanh lá cây cho biết điều kiện đã được đáp ứng. Nếu không, dấu X màu đỏ sẽ xuất hiện.
Ngoài ra, ở góc trên bên phải của chế độ xem trước, bạn có thể chuyển đổi giữa “Tên” và “Giá trị”. Điều này sẽ ảnh hưởng đến cách hiển thị các biến trong thẻ của bạn.
Nếu chọn Names , bạn sẽ thấy tên thật của chúng nhưng nếu muốn xem giá trị của chúng tại thời điểm đó, hãy chuyển sang Values .
Bật “Values” sẽ thuận tiện hơn. Nó cho phép bạn nhanh chóng xác định giá trị được gửi đến công cụ phân tích.
Ngoài ra, bạn có thể nhanh chóng xác minh xem các giá trị trong trình kích hoạt có phù hợp với yêu cầu của bạn hay không.
Lưu ý: Không gỡ lỗi từng thẻ riêng lẻ khi đã chọn Tóm tắt phía trên dòng thời gian sự kiện. Đây là một cách làm không đúng. Luôn chọn sự kiện trong luồng sự kiện trước rồi chỉ sau đó nhấp vào thẻ để gỡ lỗi.
Biến
Biến hiển thị thông tin chi tiết về các biến trong sự kiện đã chọn , bao gồm loại biến, loại dữ liệu được trả về và giá trị được giải quyết.
Những biến này phục vụ bạn. Bạn có thể chèn chúng vào bất kỳ thẻ hoặc trình kích hoạt nào bạn muốn (hoặc thậm chí một biến khác) , cho dù đó là thẻ sự kiện Google Analytics, hay bất kỳ thứ gì khác. Các biến có thể được bao gồm bằng cách đặt chúng trong dấu ngoặc nhọn {{ }}. Hãy xem ví dụ dưới đây.
Chuyển đổi giữa các sự kiện GTM (trong dòng thời gian) và bạn sẽ thấy giá trị của các biến thay đổi như thế nào tùy theo ngữ cảnh.
Lớp dữ liệu (Data Layer)
Tab Data Layer có lẽ là phần bị đánh giá thấp nhất trong bảng điều khiển xem trước GTM đối với những người mới bắt đầu (và khá thường xuyên đối với những người dùng mới ở trình độ trung cấp).
Tab này hiển thị đối tượng thông báo chính xác đã được đẩy lên lớp dữ liệu cho sự kiện đã chọn và data layer trông như thế nào sau khi giao dịch thông báo hoàn tất.
Nói cách khác, bạn có thể xem tất cả dữ liệu hiện có trong data layer và những giá trị nào có sẵn sau mỗi sự kiện Google Tag Manager. Mọi điểm dữ liệu (được đẩy vào data layer) đều có thể được chuyển thành một biến trong Google Tag Manager.
Ngay cả khi bạn thấy một số thông tin hữu ích trong tab Data Layer, bạn không thể sử dụng thông tin đó trong GTM cho đến khi bạn tạo biến cho chúng.
Tab biến (của ngăn Gỡ lỗi Google Tag Manager) chỉ hiển thị những biến được định cấu hình trong giao diện Google Tag Manager, ví dụ: Đường dẫn trang, URL trang,.. Vì vậy, nếu bạn có thông tin trong lớp dữ liệu mà bạn muốn chuyển với Google Analytics, bạn sẽ cần tạo biến Data Layer trong giao diện GTM.
Trong tài khoản Google Tag Manager, bạn nên truy cập Biến và tạo một biến mới với các cài đặt sau ( dlv là viết tắt của data layer variable)
Sau khi làm mới chế độ P&D và trang web của bạn trong cửa sổ trình duyệt, bạn sẽ thấy một biến mới trong tab Biến với mỗi lần tải trang mới. Sau này, bạn có thể đưa biến {{dlv – Post Author}} đó vào thẻ Google Analytics (hoặc bất kỳ thẻ nào khác).
Tab đồng ý
Tab này hiển thị trạng thái đồng ý (ví dụ: bị từ chối hoặc được chấp thuận) nếu bạn đã triển khai Chế độ đồng ý của Google .
Nó cũng có thể hiển thị lỗi nếu một thẻ cụ thể cố gắng đọc trạng thái đồng ý trước khi chế độ đồng ý thực sự được kích hoạt.
Tab lỗi
Nếu bạn nhận thấy bất kỳ số nào trong tab (chứ không phải 0), hãy nhấp vào số đó và xem nguyên nhân. Tab này hiển thị nếu Mẫu thẻ GTM không kích hoạt được do lỗi.
Tiêu đề
Tiêu đề hiển thị tên máy chủ của trang web mà bạn hiện đang gỡ lỗi, trạng thái (Đã kết nối hay chưa) và thẻ Google nào đã được tìm thấy trên trang đó (ví dụ: Google Tag Manager, GA4, Google Ads, v.v.).
Bạn có thể nhấp vào ID thẻ (ví dụ: ID phép đo GA4) để xem dữ liệu nào đã được gửi đến thuộc tính/nền tảng đó.
Nếu bạn không thấy ID vùng chứa GTM trong hàng đó, điều đó có nghĩa là GTM chưa được cài đặt đúng cách trên trang web và bạn (hoặc nhà phát triển của bạn) nên kiểm tra thiết lập.
Nếu bạn chọn ID không phải GTM trong hàng đó, bạn sẽ thấy loại yêu cầu nào đã được gửi đến nền tảng đó (ví dụ: Lượt xem trang hoặc sự kiện cuộn). Nhấp vào các lượt truy cập đó để xem thêm chi tiết (danh sách các tham số có trong yêu cầu).
Làm mới chế độ xem trước
Nếu bạn thực hiện một số thay đổi trong vùng chứa và muốn xem trước chúng trên trang web, bạn phải làm mới chế độ xem trước.
Để làm được điều đó, bạn phải vào giao diện Google Tag Manager và nhấn Preview lần nữa. Sau đó hoàn thành các bước và chế độ xem trước sẽ được tải lại.
Chia sẻ chế độ Xem trước GTM
Để chia sẻ chế độ xem trước với ai đó, trước tiên, bạn cần tự bật chế độ xem trước, sau đó ở góc trên cùng bên phải, nhấp vào ba dấu chấm -> Chia sẻ .
Sau đó, một cửa sổ bật lên sẽ xuất hiện nơi bạn sẽ phải:
- Nhập liên kết của trang web nơi cần bật chế độ xem trước
- Chọn vùng chứa sẽ bật (nếu có nhiều Vùng chứa GTM hoặc GTAG). Lưu ý: bạn phải chọn vùng chứa GTM trong danh sách thả xuống
Sao chép liên kết và chia sẻ nó với người mà bạn muốn
Một tùy chọn khác là nhấp vào biểu tượng X ở góc trên cùng bên trái (trong khi bạn đang ở chế độ xem trước), sau đó bật hộp kiểm Keep the domain…enabled for debugging và nhấp vào Đóng trình gỡ lỗi.
Sau đó, bạn sẽ thấy danh sách tất cả các chế độ xem trước mà bạn đã bật. Bên cạnh bản xem trước mà bạn muốn chia sẻ, hãy nhấp vào ba dấu chấm rồi nhấp vào Chia sẻ.
Sau khi bạn nhấp vào nó, cửa sổ bật lên nói trên sẽ xuất hiện.
Nếu trước đây bạn đã bật chế độ xem trước, chỉ cần truy cập tagassistant.google.com và hoàn thành các bước tương tự đã mô tả ở trên.
Thoát khỏi chế độ xem trước
Nếu bạn muốn thoát khỏi chế độ xem trước, cách tốt nhất là nhấp vào nút Finish trong huy hiệu của chế độ Xem trước (hiển thị ở góc dưới cùng bên phải trang web của bạn).
Gỡ lỗi nhiều tên miền (có cùng một vùng chứa)
Nếu bạn đang làm việc với nhiều miền (nằm trong cùng một hành trình của khách hàng) và những miền đó đang sử dụng cùng một vùng chứa Google Tag Manager, bạn sẽ cần bật chế độ xem trước trên cả hai miền.
Đầu tiên bạn mở tagassistant.google.com (hoặc chỉ cần nhấn vào nút Preview trong Giao diện GTM) và nhập domain của website thứ 2 vào. Hoàn thành tất cả các bước cần thiết để kích hoạt chế độ xem trước.
Sau đó (cũng trên tagassistant.google.com) nhấp vào biểu tượng X ở góc trên cùng bên trái + chọn Keep the domain XXXXX enabled for debugging. Nhấp vào Đóng trình gỡ lỗi. Bằng cách đó, bạn sẽ giữ trang web thứ 2 ở chế độ xem trước.
Sau đó nhấn nút Xem trước trong giao diện GTM HOẶC nút Thêm tên miền trong tagassistant.google.com và thêm tên miền của trang web đầu tiên. Hoàn thành tất cả các bước cần thiết cho đến khi Trang web 1 được mở trong tab hoặc cửa sổ mới.
Gỡ lỗi gtag.js
Nếu bạn có GTAG (mã theo dõi Google Analytics/Google Ads mới hơn) đang chạy trên trang web của mình (hoặc nếu bạn đã triển khai Google Analytics 4), bạn cũng sẽ có thể xem các lần truy cập bằng chế độ Xem trước mới (vì chúng được gửi cùng với gtag () ).
Sau khi bật chế độ Xem trước và Gỡ lỗi trên một miền nhất định, bạn có thể chuyển sang một số ID GTAG trong menu thả xuống (ở góc trên bên trái).
Ngoài ra, nếu bạn đang làm việc với Vùng (đó là tính năng GTM360), bạn cũng có thể tìm thấy vùng chứa ở đó.
Nếu chuyển sang gỡ lỗi GTAG, bạn có thể thấy nội dung khác của dòng thời gian sự kiện. Ngoài ra, một số tab sẽ biến mất (như Thẻ và Biến). Thay vào đó, bạn sẽ thấy các lần truy cập đã được gửi, Data Layer, và Errors
Nhấp vào các lần truy cập đó và xem thông số nào đã được gửi cùng với yêu cầu gtag.js.
Các cải tiến với tiện ích mở rộng Hỗ trợ thẻ của Chrome
Bạn có thể cải thiện chế độ Xem trước bằng cách cài đặt tiện ích mở rộng trình duyệt có tên Tag Assistant Companion. Điều này đặc biệt hữu ích nếu bạn ghét việc trang web của mình (trong quá trình gỡ lỗi) được mở trong một cửa sổ mới (ít nhất, đây là những gì xảy ra trên Google Chrome).
Khi tiện ích mở rộng được cài đặt, trang web của bạn sẽ được mở trong tab mới (thay vì cửa sổ) khi bạn bật chế độ xem trước. Điều này có nghĩa là bạn có thể sử dụng lại những thứ như gỡ lỗi di động.
Ngoài ra, bạn sẽ có thể gỡ lỗi nhiều tab cùng một lúc.
Hơn nữa, một số biểu tượng cảm xúc xuất hiện trong dòng thời gian sự kiện và trong huy hiệu của chế độ Xem trước (trên trang web của bạn). Chúng được thêm vào để giúp bạn nhanh chóng phân biệt cửa sổ nào hiện đang được gỡ lỗi.
Loại trừ tagassistant.google.com và xóa gtm_debug=x khỏi URL
Bằng cách sử dụng chế độ xem trước của GTM, bạn sẽ bắt đầu thấy lưu lượng truy cập từ tagassistant.google.com (điều đó có nghĩa là các phiên của bạn có thể đến từ đó). Ngoài ra, trong báo cáo GA của bạn, bạn sẽ bắt đầu thấy số lần xem trang có chứa gtm_debug=x.
Trong cả hai trường hợp, nếu đây là vấn đề đối với bạn, bạn nên loại trừ lưu lượng truy cập của mình khỏi báo cáo GA. Để làm điều đó, hãy chuyển đến Quản trị -> Thuộc tính -> Luồng dữ liệu -> Chọn luồng dữ liệu web của bạn -> Định cấu hình cài đặt thẻ -> Hiển thị tất cả -> Liệt kê các giới thiệu không mong muốn và thêm tagassitant.google.com vào đó.
Một số lời khuyên về chế độ Xem trước của Google Tag Manager
- Nếu bạn thấy sự kiện “Message” trước sự kiện Xem trang trong Dòng thời gian sự kiện của Bảng điều khiển xem trước và gỡ lỗi, đừng lo lắng. Điều này có nghĩa là nhà phát triển, plugin hoặc giải pháp bên thứ 3 cụ thể của bạn đã đẩy một số dữ liệu vào Lớp dữ liệu nhưng dataLayer.push đó không chứa khóa “sự kiện”. Sử dụng chế độ gỡ lỗi GTM để khám phá dữ liệu chính xác nào được đẩy vào thời điểm đó. Có thể bạn sẽ tìm thấy điều gì đó hữu ích!
- Mặc dù chế độ gỡ lỗi Google Tag Manager là một phần rất quan trọng trong việc triển khai thẻ nhưng đây không phải là công cụ duy nhất bạn nên sử dụng. Bạn có thểm tham khảo về các tiện ích mở rộng Chrome của Google Tag Manager
- Nếu bạn đang gỡ lỗi sự kiện Google Analytics, luôn kiểm tra chúng trong báo cáo thực của GA. Đây là cách tốt nhất để xác minh và phản hồi các lỗi ngay lập tức.
Kết luận
Chế độ XEM TRƯỚC của Google Tag Manager là một phần thiết yếu của việc triển khai thẻ, giúp bạn đảm bảo rằng trải nghiệm của người dùng có thể xảy ra đều được kiểm tra và tính nhất quán của dữ liệu được xác thực.
Nguồn tài liệu dịch: https://www.analyticsmania.com/post/google-tag-manager-debug-mode/
