Tracking đặt lịch bằng Google Tag Manager và GA4 chi tiết nhất

Tóm tắt các bước Tracking đặt lịch bằng Google Tag Manager và GA4

Quá trình thực hiện sẽ bao gồm các bước cơ bản như thế này:

• Tạo thẻ Custom HTML với listener code. Kích hoạt thẻ trên các trang có nhúng lịch Calendly
• Tạo Biến Data Layer và trình kích hoạt Custom Event
• Tạo thẻ sự kiện Google Analytics 4 để gửi dữ liệu đến Google Analytics
• Đừng quên kiểm tra mọi thứ bằng GA4 DebugView

Hướng dẫn chi tiết Tracking đặt lịch bằng Google Tag Manager và GA4

Google Tag Manager template

Tôi cũng đã chuẩn bị một bản mẫu của container Google Tag Manager (còn được gọi là công thức) để tiết kiệm thời gian cho bạn. Bạn có thể tải nó tại đây.

Chúng ta có thể theo dõi loại tương tác nào?

Bạn sẽ có thể nắm bắt được các events sau:

#1. Khi trang hồ sơ được xem (có nghĩa là ai đó truy cập vào trang nơi mà lịch của bạn được nhúng và tải lên)

#2. Khi người nào đó xem loại event trong lịch được nhúng của bạn. Ví dụ: bằng cách nhấp vào đâ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 đăng trên blog này sẽ không cung cấp cho bạn dữ liệu chi tiết hơn (như thời gian/ngày chính xác đã được chọn hoặc loại sự kiện nào đã được xem/ lên kế hoạch).

Phương pháp này phù hợp cho việc theo dõi chung chung (để biết rằng khách truy cập có xem và lên bất kỳ event nào trong lịch của bạn hay không).

XEM CÁC BÀI VIẾT LIÊN QUAN KHÁC:

• Tracking Single Page Applications
• Cách tắt chế độ xem trước trong Google Tag Manager
• Hướng dẫn cách Tracking Gravity Forms

Listener code

Để bắt đầu tracking Calendly bằng Google Tag Manager, bạn phải tạo thẻ Custom HTML trong GTM container của mình. Chuyển tới Tags > New > Custom HTML và dán đoạn mã sau:

  
     <script>
  window.dataLayer = window.dataLayer || [];
  window.addEventListener('message',
  function(e) {
    if (e.data.event && e.data.event.indexOf('calendly') === 0) {
      window.dataLayer.push({
        'event': 'calendly',
        'calendly_event': e.data.event.split('.')[1]
      });
    }
  });
</script>
  

Mã này là một listener sẽ tìm kiếm các sự kiện Calendly trên một trang (được gửi đi bởi lịch nhúng hay còn gọi là embedded calendar) và sau đó sẽ cung cấp chúng trong Data Layer. Nó sẽ đẩy một trong bốn event:

• profile_page_viewed – khi trang hồ sơ được xem
• event_scheduled – khi người được mời đặt cuộc họp thành công
• 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ờ

Trong phần kích hoạt của thẻ, nhấp vào bất kỳ đâu và chọn trình kích hoạt All Pages trigger. Nếu lịch Calendly của bạn chỉ khả dụng trên một số trang nhất định thì bạn có thể tạo trình kích hoạt Pageview chính xác hơn với điều kiện là Page URL chứa XXXX (thay XXX bằng URL của trang nhúng lịch).

Lưu thẻ. Đã đến lúc kiểm tra xem trình nghe listener này có hoạt động hay không. Nhấp vào nút Preview ở góc trên cùng bên phải của giao diện Google Tag Manager.

Sau đó, nhập URL của web, 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 preview and debug mode và sẽ mở một tab/window khác với trang web của bạn. Ở đó, bạn có thể thấy được cảnh báo này.

>>> Tham khảo: Khóa học tracking từ A - Z dành cho người mới

Hãy phớt lờ nó và đừng nhấp vào “enable” bạn nhé.

Bây giờ, hãy tương tác với lịch được nhúng đó trên website 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 calendly event. Nhấp vào một trong số chúng, mở rộng API call và bạn sẽ thấy nội dung như thế này:

Nếu bạn thấy các event, đó là dấu hiệu đáng mừng. Trong ảnh screenshot của tôi, có bốn sự kiện cho mọi loại tương tác với lịch:

• profile page view (còn gọi là Calendly widget đã được tải)
• event type selection
• choosing date and time
• scheduling the event

Nếu bạn cũng thấy các sự kiện ở preview mode, hãy chuyển sang bước tiếp theo. Nếu không thấy, hãy thử đóng và làm mới lại chế độ xem trước. Ngoài ra, bạn cũng nên kiểm tra cấu hình của mình. Có thể bạn đã vô tình mắc phải một số sai sót nào đó.

Nếu bạn loay hoay mãi mà vẫn không thể giải quyết được vấn đề này, bạn có thể hỏi ý kiến của các chuyên gia Tracking trên Askany. Liên hệ với chuyên gia website Tồn Nguyễn Đức

• Thông tin liên hệ: https://askany.com/seo-website/1680060798370797
• Thời gian tư vấn: Thứ 2 - CN (18:00 - 20:00)
• Giá tư vấn: 250.000/ 15 phút

Custom event trigger và Data Layer Variable

Ở phần sau của bài đăng trên blog này, chúng tôi sẽ tạo thẻ sự kiện Google Analytics 4 để gửi dữ liệu tới GA. Nhưng chúng ta cần xác định khi nào dữ liệu đó sẽ được gửi.

Trong trường hợp này, đó là khi sự kiện ‘calendly‘ hiển thị ở chế độ . Để làm điều đó, chúng tôi phải tạo Custom event trigger. Trong Google Tag Manager, hãy đi tới Triggers > New > Custom Event và nhập cấu hình sau.

Sau đó, hãy tạo một biến lớp dữ liệu để cho chúng tôi biết sự kiện nào đã xảy ra. Đó là profile_page_viewed  hay event_scheduled? Hoặc có thể là cái gì khác?

Đi tới Variables > New > Data Layer variable 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 lớp dữ liệu.

Tạo thẻ Google Analytics 4

Trong bài đăng trên blog này, tôi cho 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 các sự kiện Calendly tới Google Analytics 4. Trong Google Tag Manager, hãy truy cập Tags > New > Google Analytics > GA4 event .

Nhập measurement ID.

Tên sự kiện có thể là calendar_profile_page_viewed hoặc calendar_event_scheduled. Sử dụng một tên duy nhất cho sự kiện sẽ giúp bạn dễ dàng phân tích. 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 bạn chọn tên theo quy ước này, thẻ sự kiện GA4 của bạn sẽ có định dạng như sau:

Trong phần kích hoạt của thẻ sự kiện GA4, hãy chọn trình kích hoạt sự kiện tùy chỉnh bạn vừa tạo. Cấu hình cuối cùng của thẻ có thể nhìn như sau:

Kiểm tra lại

Sau đó, 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 ý: Hãy nhớ cảnh báo về việc bật tính năng debugging cho miền calendly.com trong chế độ xem trước. Nếu bạn gặp vấn đề khi làm mới chế độ xem trước trong GTM, đóng tab xem trước GTM và tab trang web của bạn. Sau đó, nhấp vào nút Preview trong giao diện GTM để 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

Quay lại tab chế độ Preview và kiểm tra xem bạn có thấy tất cả các sự kiện theo calendly không. Nếu có, nhấp vào từng thẻ để kiểm tra thẻ GA4 của bạn đã kích hoạt hay chưa.

Tiếp theo, điều hướng đến thuộc tính Google Analytics 4 property > Admin > DebugView. Tìm 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 từng sự kiện để kiểm tra xem chúng chứa loại dữ liệu chúng chứa. Tất cả đều tốt chứ? Sau đó nhấn nút Submit trong giao diện GTM của bạn và xuất bản phiên bản mới của container.