Kiến thức Google Tag Manager
Hướng dẫn sử dụng Hotjar và Google Tag Manager
Nếu bạn quan tâm đến khách truy cập website và muốn xem dữ liệu thi Hotjar là công cụ dành cho bạn. Hotjar cho phép bạn xem mọi thứ nhự cuộn chuột, tạo kênh và nhiều tính năng hơn nữa. Chúng ta sẽ cùng tìm hiểu rõ hơn về Hotjar và sử dụng Hotjar Google Tag Manager.
Hotjar là gì?
Hotjar là công cụ phân tích và phản hồi phổ biến được các công ty công nghệ hàng đầu sử dụng như Autodesk, Microsoft,… Đặc điểm chính:
Phân tích
- Ghi lại heatmaps (dựa trên lượt nhấp, cuộn và di chuyển chuột)
- Ghi lại phiên người dùng thực tế, xem chúng ở cấp độ cá nhân và nơi họ đã nhấp vào, thoát ra,..
- Theo dõi kênh (tính năng này chỉ dựa trên lượt xem trang)
- Theo dõi biểu mẫu tương tác
Feedback
- Thu nhập feedback
- Chạy các cuộc thăm dò và khảo sát
- Mời khách truy cập thử nghiệm người dùng trực tiếp thông qua chia sẻ màn hình để xem họ thực sự sử dụng trang của bạn như thế nào và họ đang nghĩ gì (một tính năng được gọi là Nhà tuyển dụng).
Cách kích hoạt Hotjar thông qua Google Tag Manager
Việc cài đặt Hotjar thông qua Google Tag Manager khá dễ (nếu bạn chỉ muốn chức năng tiêu chuẩn, như bản ghi và heatmaps). Nó thậm chí có sẵn mẫu thẻ trong Google Tag Manager.
Bắt đầu, đăng ký tài khoản Hotjar. Họ cung cấp cả gói trả phí và miễn phí. Sau khi hoàn thành đăng ký, bạn sẽ được yêu cầu thêm mã theo dõi của họ vào trang web của mình.
Bạn có thể tạo thẻ HTML tùy chỉnh và dán toàn bộ mã theo dõi hoặc chỉ lấy ID trang web và sử dụng Tag Template thay thế. Sau đó sao chép ID trang web Hotjar (góc dưới cùng bên phải)
Đăng nhập vào tài khoản Google Tag Manager, đi đến Thẻ -> Mới. Trong cấu hình thẻ, chọn Mã theo dõi Hotjar và dán ID trang web bạn đã sao chép trước đó.
Trong phần kích hoạt, chọn All Pages.
Lưu thẻ và kiểm tra nó. Bật chế độ Xem trước và gỡ lỗi, điều hướng đến website của bạn đang hoạt động và làm mới trang. Sau khi bảng điều khiển Xem trước và gỡ lỗi xuất hiện, nhấp sự kiện Page View và kiểm tra nếu Thẻ Hotjar đã kích hoạt
Bây giờ hãy truy cập một trang khác trên trang web của bạn và lặp lại hành động. Thẻ Hotjar phải kích hoạt trên tất cả các trang, do đó, bạn nên thử nghiệm thẻ này trên ít nhất 2-3 trang.
Nếu mọi thứ đều ổn, hãy xuất bản vùng chứa, quay lại Hotjar và nhấp vào nút màu xanh lá cây. Hotjar sẽ xác minh việc triển khai.
Cách theo dõi Page views trên một trang web bằng Hotjar và GTM
Ứng dụng một trang (Single Page Application) là một ứng dụng web hoặc trang web tải tất cả các tài nguyên cần thiết để điều hướng khắp trang web trong lần tải trang đầu tiên. Khi người dùng nhấp vào liên kết và tương tác với trang, nội dung tiếp theo sẽ được tải tự động.
Trong trang web một trang, tất cả mã cần thiết chỉ được tải một lần và trang không tải lại trong toàn bộ phiên của người dùng. Đó là lý do tại sao các công cụ phân tích thông thường chỉ theo dõi một lượt xem trang, ngay cả khi người dùng đã xem nhiều trang hoặc đã cuộn xuống nhiều phần của một trang.
Đây là điều phổ biến trong trang web một trang để sử dụng các đoạn URL trong URL của chúng. Khi bạn điều hướng đến trang web, xem xét kỹ hơn địa chỉ của trình duyệt
Ví dụ: https://www.mywebsite.com/home#pricing.
Hotjar có chức năng tích hợp sẵn có thể theo dõi các thay đổi của một đoạn URL nhưng nó không được bật theo mặc định.
Để bật tính năng theo dõi đoạn URL, đi tới cài đặt của tài khoản Hotjar, chọn Trang web & Tổ chức, rồi nhấp vào biểu tượng bánh răng (Cài đặt trang web)
Bật Tự động theo dõi các thay đổi, bao gồm các đoạn. Nhấp Lưu
Ngoài ra, Hotjar còn cho phép người dùng gửi dữ liệu lượt xem trang theo cách thủ công. Để làm điều đó, bạn cần kích hoạt thẻ HTML tùy chỉnh bằng mã này
<script> hj('stateChange', 'some/relative/path'); </script>
some/relative/path nên được thay thế với một số giá trị ý nghĩa hơn. Ví dụ: ‘contact-us’, ‘pages/pricing’. Những giá trị này sẽ được hiển thị như Page Paths trong báo cáo và ghi lại của Hotjar.
Các bước theo dõi trang web một trang
- Trước tiên, cần trình kích hoạt (một điều kiện sẽ gửi thẻ Hotjar thay đổi trạng thái).
- Sau đó, cần chuyển một số dữ liệu có ý nghĩa dưới dạng page path (còn gọi là thay thế phần ‘some/relative/path’ của đoạn mã nói trên). Điều này có thể đạt được bằng biến Data Layer.
- Cuối cùng, tạo một thẻ.
Trình kích hoạt
Yêu cầu nhà phát triển sử dụng phương thức dataLayer.push bất cứ khi nào trạng thái xem thay đổi trên màn hình. Bạn có thể sử dụng lần đẩy đó làm trình kích hoạt, sau đó sẽ kích hoạt thẻ HTML tùy chỉnh với mã thay đổi trạng thái của Hotjar .
Cung cấp cho nhà phát triển mã này và yêu cầu họ gửi mã đó bất cứ khi nào một trang, trạng thái, lượt xem thay đổi trong ứng dụng, trang web một trang.
window.dataLayer = window.dataLayer || []; window.dataLayer.push ({ 'event':'stateChange', 'pagePath': 'somePagePath/page' // replace this value with the actual path of a page })
Mã này sẽ gửi một sự kiện đến Data Layer và sẽ chứa khóa bổ sung, pagePath. Chúng ta sẽ sử dụng sự kiện như là một điều kiện kích hoạt và PagePath sẽ thay thế some/relative/path trong mã Hotjar.
Sau đó, tạo một trình kích hoạt. Trong Google Tag Manager đi dến Kích hoạt -> Mới -> Sự kiện tùy chỉnh. Nhập các cài đặt sau.
Biến
Trong Google Tag Manager, hãy chuyển đến Biến -> Biến do người dùng xác định -> Mới -> Biến Data Layer. Nhập pagePath. Để nguyên tất cả các cài đặt khác
Thẻ HTML tùy chỉnh
Bước cuối cùng trong theo dõi website một trang là kích hoạt thẻ HTML Tùy chỉnh với pagePath.
Đi đến Thẻ -> thẻ HTML Tùy chỉnh -> Cấu hình thẻ và dán đoạn mã sau:
<script> hj('stateChange', '{{dlv - pagePath}}'); </script>
Trong phần cấu hình thẻ, hãy chọn Trình kích hoạt sự kiện tùy chỉnh mà bạn đã tạo trước đó. Lưu các thay đổi, làm mới chế độ Xem trước và gỡ lỗi GTM và bắt đầu thử nghiệm.
Tuy nhiên Hotjar không có tính năng báo cáo theo thời gian thực (như Google Analytics), vì vậy bạn sẽ phải đợi khoảng vài phút để xem kết quả trong báo cáo của họ. Và đừng quên rằng Hotjar cung cấp tính năng loại trừ IP, vì vậy đừng rơi vào bẫy khi bạn không thể xem các phiên của mình do địa chỉ IP bị loại trừ.
Cách theo dõi sự kiện với Hotjar Tag Manager
Hotjar cung cấp theo dõi kênh nhưng chỉ hỗ trợ trên kênh lượt theo dõi trang.
Mặc dù không có thứ nào trong giao diện hoặc tài liệu của Hotjar được coi là Sự kiện , nhưng chúng ta có thể áp dụng kỹ thuật tương tự là theo dõi lượt xem trang.
Đi tới Thẻ -> HTML tùy chỉnh -> Nhấp vào Cấu hình thẻ và dán mã sau:
<script> hj('stateChange', 'formSubmission'); //this will be tracked as https://www.example.com/formSubmission </script>
Sau đó, chỉ định trình kích hoạt cho thẻ. Và một thẻ sẽ trông như thế này.
Làm mới chế độ Xem trước và Gỡ lỗi và kiểm tra xem thẻ chỉ kích hoạt khi cần thiết hay không. Ngoài ra, hãy kiểm tra kỹ xem dữ liệu có xuất hiện trong báo cáo của Hotjar hay không. Có thể mất vài phút để xử lý.
Tạo một kênh trong Hotjar
Trong Hotjar, đi tới Kênh và nhấp Kênh mới.
Tạo kênh gồm 3 bước sau:
- Đã Truy cập trang chủ
- Đã truy cập trang với một biểu mẫu
- Biểu mẫu đã gửi
Không giống như kênh Google Analytics, Hotjar cho phép bạn xây dựng chúng trở về trước. Điều này có nghĩa là nếu bạn quyết định thêm, xóa hay chỉnh sửa một bước trong kênh, Hotjar sẽ phân tích dữ liệu hiện có trước đó.
Nhấp Lưu và đợi vài phút để kết quả xuất hiện.
Cách gắn thẻ các phiên Hotjar với Google Tag Manager
Lưu ý: Tính năng này chỉ có sẵn trong gói Hotjar trả phí
Một trong những tính năng của Hotjar là ghi phiên. Nếu trang web thu hút nhiều lưu lượng truy cập, chắc chắn việc tìm đúng phiên để xem sẽ trở nên quá khó khăn và bạn sẽ lãng phí thời gian trong danh sách hàng ngàn bản ghi.
Đó là lý do tại sao bạn nên sử dụng tính năng lọc. Ở bên phải danh sách, có một loạt tùy chọn khác nhau có thể giúp bạn thu hẹp kết quả tìm kiếm
Bạn có thể lọc phiên theo các trang đã truy cập, phạm vi ngày, thời lượng phiên,…
Gắn thẻ bản ghi của bạn là một cách tuyệt vời để ghi chú các hành động cụ thể, như nhấp chuột CTA, đăng ký hoặc trạng thái khách truy cập. Sau khi bắt đầu gắn thẻ bản ghi của mình, bạn sẽ có thể sử dụng bộ lọc Thẻ trong bảng bộ lọc Bản ghi (ở bên phải). Điều này cho phép bạn lọc qua Bản ghi của mình và nhanh chóng xác định các vấn đề mà khách truy cập đang gặp phải.
Để gắn thẻ vào một phiên, bạn sẽ cần những “thành phần” sau:
- Một số dữ liệudưới dạng một biến (hoặc nhiều biến)
- Kích hoạt (điều kiện kích hoạt)
- Thẻ HTML tùy chỉnh
Đặt và truy cập dữ liệu trong Data Layer
Thông thường, không thể truy cập dữ liệu về người dùng bằng JavaScript (vì nó được lưu trữ trong cơ sở dữ liệu), do đó, một số loại quét web sẽ không giúp ích được gì. Giải pháp mạnh mẽ nhất là yêu cầu nhà phát triển đẩy dữ liệu đó lên Data Layer
Đây là mẫu mã mà nhà phát triển sẽ thêm vào mã của trang web.
window.dataLayer = window.dataLayer || []; window.dataLayer.push ({ 'pricingPlan': 'Premium' // the value should be based on the actual plan of the user })
Đoạn mã này phải được thêm phía trên mã vùng chứa Google Tag Manager nếu bạn muốn truy cập dữ liệu này bằng sự kiện Lượt xem trang.
Google Tag Manager không nhận ra dữ liệu được lưu trữ trong Data Layer, trừ khi bạn tạo các biến thích hợp. Để truy cập giá trị của Định giá trong Lớp dữ liệu , bạn cần tạo Biến Data Layer với các cài đặt sau:
Điều kiện kích hoạt
Trình tự thẻ GTM rất hữu ích vì nó cho phép bạn:
- Kích hoạt một thẻ (trong trường hợp này là mã theo dõi chính của Hotjar)
- Nếu thẻ nói trên được kích hoạt thành công, hãy kích hoạt một thẻ khác (lần này thẻ HTML tùy chỉnh sẽ gắn thẻ phiên của Hotjar).
Nếu bạn muốn theo dõi các tương tác khác, như gửi biểu mẫu, nhấp chuột,…, thì không cần sắp xếp trình tự thẻ và bạn chỉ có thể sử dụng trình kích hoạt thông thường được gán cho Thẻ HTML tùy chỉnh.
Thẻ và trình tự thẻ
Theo tài liệu của Hotjar, đây là một đoạn mã ví dụ cần được kích hoạt để gắn thẻ phiên có dữ liệu bổ sung.
<script> hj('tagRecording', ['tag1', 'tag2']); </script>
Bạn thực sự có thể thêm nhiều hơn một thẻ bằng một yêu cầu (chỉ cần thay thế tag1 và tag2 bằng một số dữ liệu hoặc biến có ý nghĩa).
<script> hj('tagRecording', ['tag1', 'tag2', 'tag3', 'tag4', 'tag5']); </script>
Vì vậy, trong ví dụ này, chỉ giữ lại một thẻ và thay thế bằng biến Data Layer
<script> hj('tagRecording', ['Pricing plan: {{dlv - pricingPlan}}']); </script>
Khi thẻ HTML tùy chỉnh này được kích hoạt, GTM sẽ tự động thay thế {{dlv –pricePlan}} bằng giá trị thực tế có sẵn tại thời điểm đó trong Lớp dữ liệu.
Tạo thẻ HTML tùy chỉnh với các cài đặt sau. Đừng đặt bất kỳ trình kích hoạt nào vì thay vào đó chúng tôi sẽ sử dụng trình tự thẻ.
Bây giờ, hãy quay lại thẻ GTM đầu tiên mà chúng tôi đã tạo trong bài đăng blog này, Mã theo dõi Hotjar. Mở nó và nhấp vào Cài đặt nâng cao > Trình tự thẻ.
Nhấp vào hộp kiểm thứ 2 Kích hoạt thẻ sau và chọn thẻ HTML tùy chỉnh vừa tạo.
Nhấn lưu, làm mới chế độ Xem trước và Gỡ lỗi rồi kiểm tra xem mọi thứ có hoạt động như mong đợi không.
Đợi vài phút và kiểm tra bản ghi phiên của Hotjar. Thẻ của bạn sẽ được thêm vào phiên.
Nếu bạn bắt đầu nhận thấy có nhiều phiên không có pricingPlan , bạn có thể xem xét kích hoạt thẻ tagRecording trên trình kích hoạt Window Loaded .
Hãy nhớ rằng thẻ phiên Hotjar chỉ có thể được sử dụng trong bản ghi phiên. Bạn không thể tạo kênh dựa trên chúng vì kênh Hotjar chỉ sử dụng URL trang.
Lưu ý : Nếu bạn không muốn sử dụng Trình tự thẻ, bạn luôn có thể sử dụng thẻ HTML tùy chỉnh để phát huy hết tiềm năng của nó. Trong trường hợp đó:
- Xóa thẻ Mã theo dõi Hotjar đã tạo sẵn
- Tạo Thẻ HTML tùy chỉnh mới và dán mã Theo dõi Hotjar đầy đủ mà bạn có thể tìm thấy trong tài khoản Hotjar của mình.
- Cập nhật mã bằng cách thêm một dòng mã bổ sung (ngay trước thẻ đóng </script>).
hj('tagRecording', ['Pricing plan: {{dlv - pricingPlan}}']);
Kết quả cuối cùng có thể trông như thế này:
Đặt thẻ để kích hoạt trên Tất cả các trang.
Tối ưu hóa nhỏ
Trong trường hợp bạn muốn theo dõi các sự kiện dưới dạng lượt xem trang (đối với kênh) và cũng gắn thẻ các phiên có những tương tác đó (đối với bản ghi phiên). Nó sẽ hoạt động hoàn toàn bình thường nếu bạn kích hoạt cả hai đoạn mã dưới dạng thẻ GTM riêng biệt.
Page view:
<script> hj('stateChange', 'signup'); </script>
Thẻ phiên:
<script> hj('tagRecording', ['Signup completed']); </script>
Vì cả hai mã đều theo dõi cùng một tương tác (chỉ gửi đến các báo cáo khác nhau), nên bạn có thể kết hợp chúng thành một đoạn mã và kích hoạt dưới dạng một thẻ GTM duy nhất. Kết quả cuối cùng có thể trông như thế này. Đó chỉ là một tối ưu hóa nhỏ, nhưng bằng cách này, bạn sẽ giảm 50% số lượng thẻ HTML tùy chỉnh GTM.
<script> hj('stateChange', 'signup'); hj('tagRecording', ['Signup completed']); </script>
Kết luận
Bài viết trên đã hướng dẫn sử dụng Hotjar Google Tag Manager để giúp bạn theo dõi hành vi của người dùng dễ dàng. Hotjar là một công cụ phân tích và phản hồi rất phổ biến dành cho các nhà tiếp thị kỹ thuật số muốn phân tích cách khách truy cập duyệt trang web hay ứng dụng và chuyển đổi.
Nguồn tài liệu dịch: https://www.analyticsmania.com/post/hotjar-and-google-tag-manager/