Kiến thức Google Tag Manager
Theo dõi hành động Lịch (Calendly) bằng Google Tag Manager và GA4
Nếu bạn truy cập trang này, rất có thể bạn đã nhúng lịch Calendly vào trang web của mình. Người dùng truy cập vào trang web của bạn, họ có thể lên lịch các cuộc hẹn và bạn muốn xem dữ liệu đó trong số liệu phân tích của mình. Thì bài viết này sẽ hướng dẫn bạn theo dõi hành động Lịch bằng Google Tag Manager và GA4.
Video hướng dẫn
Có thể theo dõi những loại tương tác nào?
Bạn sẽ có thể nắm bắt được các sự kiện sau:
1. Khi trang hồ sơ được xem (có nghĩa là ai đó truy cập vào trang nơi lịch của bạn được nhúng và tải)
2. Khi ai đó xem loại sự kiện trong lịch được nhúng của bạn.
Ví dụ: bằng cách nhấp vào cái này:
3. Khi ai đó chọn ngày và giờ
4. Khi ai đó lên lịch một sự kiện
Lưu ý: Giải pháp mà tôi giải thích trong bài viết này sẽ không cung cấp cho bạn dữ liệu chi tiết hơn (chẳng hạn như ngày/giờ chính xác đã được chọn hoặc loại sự kiện nào đã được xem/lên lịch).
Phương pháp này phù hợp cho việc theo dõi chung (để biết liệu khách truy cập có xem và lên lịch bất kỳ sự kiện nào của bạn hay không)
Mã người nghe
Để bắt đầu theo dõi hành động Lịch bằng Google Tag Manager, bạn phải tạo thẻ HTML tùy chỉnh trong vùng chứa GTM của mình. Đi tới Thẻ –> Mới -> HTML tùy chỉnh và dán đoạn mã sau:
<kịch bản>
window.dataLayer = window.dataLayer ||[];
window.addEventListener('tin nhắn',
hàm(e) {
if (e.data.event && e.data.event.indexOf('calendly') === 0) {
window.dataLayer.push({
'sự kiện' : 'theo lịch',
'calendly_event' : e.data.event.split('.')[1]
});
}
}
);
</script>
Mã này là một trình nghe sẽ tìm kiếm các sự kiện Calendly trên một trang (được gửi đi bằng lịch nhúng) và sau đó sẽ cung cấp chúng trong Data Layer . Nó sẽ đẩy một trong bốn sự kiện:
-
profile_page_viewed : khi trang hồ sơ được xem
-
event_type_viewed : khi trang loại sự kiện được xem
-
date_and_time_selected : khi người được mời chọn ngày và giờ
-
event_scheduled : khi người được mời thành công đặt cuộc họp
Trong phần kích hoạt của thẻ, hãy nhấp vào bất kỳ đâu và chọn trình kích hoạt “Tất cả các trang”. Nếu lịch Calendly của bạn chỉ có sẵn trên một số trang nhất định thì bạn có thể tạo trình kích hoạt “Số lần xem trang” chính xác hơn trong đó điều kiện là URL trang chứa XXXX (thay thế XXX bằng URL của trang nơi lịch được nhúng).
Lưu thẻ. Đã đến lúc kiểm tra xem trình nghe này có hoạt động hay không. Nhấp vào nút Xem trước ở góc trên cùng bên phải của giao diện Google Tag Manager.
Sau đó nhập URL của trang nơi bạn đã nhúng lịch Calendly.
Nhấp vào kết nối. Thao tác này sẽ kích hoạt chế độ xem trước và gỡ lỗi, đồng thời sẽ mở một tab/cửa sổ khác với trang web của bạn. Trong đó, bạn có thể thấy cảnh báo này.
Hãy bỏ qua nó và đừng nhấp vào “bật” nó.
Bây giờ, hãy tương tác với lịch được nhúng đó trên trang web của bạn và lên lịch sự kiện.
Quay lại tab của chế độ xem trước GTM và ở phía bên trái, bạn sẽ thấy các sự kiện lịch . Nhấp vào một trong số chúng, mở rộng lệnh gọi API và bạn sẽ thấy nội dung như thế này:
Nếu bạn thấy các sự kiện, điều đó thật tuyệt. Trong ảnh chụp màn hình của tôi, có bốn sự kiện cho mọi loại tương tác với lịch:
-
Lượt xem trang hồ sơ (còn gọi là tiện ích Calendly đã được tải)
-
Lựa chọn loại sự kiện
-
Chọn ngày và giờ
-
Lên lịch sự kiện
Nếu bạn cũng thấy các sự kiện ở chế độ xem trước, hãy chuyển sang bước tiếp theo. Nếu không thể, hãy thử đóng và làm mới lại chế độ xem trước. Ngoài ra, hãy kiểm tra cấu hình của bạn. Có thể bạn đã vô tình để lại một số sai sót.
Trình kích hoạt sự kiện tùy chỉnh và Biến Data Layer
Trong trường hợp của chúng tôi, đó là khi sự kiện “calendly” hiển thị ở chế độ xem trước. Để làm điều đó, chúng ta phải tạo trình kích họat “Sự kiện tùy chỉnh”. Trong Google Tag Manager, hãy đi tới Trình kích hoạt -> Mới -> Sự kiện tùy chỉnh và nhập cấu hình sau.
Sau đó, hãy tạo một biến Data Layer để biết sự kiện nào đã xảy ra. Đó là profile_page_viewed hay event_scheduled ? Hoặc có thể cái gì khác?
Chuyển đến Biến -> Mới -> Biến Data Layer và nhập các cài đặt sau:
Tôi đã nhập “calendly_event ” vì đó là tên của tham số được đẩy lên Data Layer.
Tạo thẻ Google Analytics 4
Trong bài viết này, tôi đoán rằng bạn đã có thẻ cấu hình GA4 trong vùng chứa của mình và bạn biết chức năng của thẻ đó.
Bây giờ đã đến lúc gửi sự kiện Calendly tới Google Analytics 4. Trong Google Tag Manager, hãy chuyển đến Thẻ -> Mới -> Google Analytics -> Thẻ sự kiện GA4.
Nhập ID đo lường.
Tên có thể là Calendar_profile_page_viewed hoặc Calendar_event_scheduled . Việc có tên sự kiện duy nhất sẽ thuận tiện cho việc phân tích như khám phá đường dẫn. Ngoài ra, trong danh sách sự kiện, bạn có thể xem rõ ràng và nhanh chóng đó là loại sự kiện lịch nào.
Nếu quy ước đặt tên này phù hợp với bạn thì thẻ sự kiện GA4 của bạn có thể trông như thế này:
Trong phần kích hoạt của thẻ sự kiện GA4, hãy nhấp vào bất cứ đâu rồi chọn trình kích hoạt sự kiện tùy chỉnh mà bạn vừa tạo. Cấu hình cuối cùng của thẻ có thể trông như thế này:
Hãy kiểm tra
Lưu thẻ và nhấp vào nút xem trước trong giao diện GTM (để làm mới chế độ xem trước). Trang có lịch nhúng sẽ tải lại.
Lưu ý: bạn có nhớ cảnh báo đó ở chế độ xem trước về việc bật gỡ lỗi cho miền calendly.com không? Điều này có thể gây ra một số bất tiện trong khi bạn kiểm tra thiết lập. Nếu bạn cố gắng làm mới chế độ xem trước trong GTM, chế độ này sẽ cố gắng kết nối với miền calendly.com (thay vì miền trang web của bạn). Nếu bạn gặp phải vấn đề này, hãy đóng tab xem trước GTM và tab trang web của bạn. Sau đó nhấn vào nút Preview trong giao diện GTM một lần nữa để khởi động lại chế độ xem trước.
Tương tác với lịch đó và lên lịch sự kiện.
Bây giờ, hãy quay lại tab của chế độ Xem trước và kiểm tra xem bạn có thấy tất cả các sự kiện Calendly đó không. Nếu có, hãy nhấp vào từng thẻ một và bạn sẽ thấy thẻ GA4 của mình đã kích hoạt.
Bây giờ, hãy chuyển đến thuộc tính Google Analytics 4 -> Quản trị viên -> DebugView.
Tìm thiết bị của bạn ở góc trên bên trái.
Sau đó, trong luồng sự kiện, bạn sẽ thấy các sự kiện trên lịch của mình.
Nhấp vào những sự kiện đó để kiểm tra xem chúng chứa loại dữ liệu nào. Tất cả đều tốt chứ? Sau đó nhấn nút Gửi trong giao diện GTM của bạn và xuất bản phiên bản mới của vùng chứa.
Kết luận
Trong bài viết này, bạn đã tìm hiểu cách theo dõi hành động Lịch bằng Google Tag Manager và GA4. Nếu có bất kỳ thắc mắc hay câu hỏi nào hãy để lại bình luận ngay bên dưới nhé.
Nguồn tài liệu dịch: https://www.analyticsmania.com/post/how-to-track-calendly-with-google-tag-manager-and-google-analytics-4/