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

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

14/12/2023

333

0

Chia sẻ lên Facebook
Tracking đặt lịch bằng Google Tag Manager và GA4 chi tiết nhất

Bạn đang tìm cách Tracking đặt lịch bằng Google Tag Manager và GA4? Khi tích hợp Calendly với Google Tag Manager, bạn có thể theo dõi những sự kiện như việc người dùng đặt cuộc hẹn, hoặc bắt đầu một cuộc trò chuyện trực tuyến. Điều này giúp bạn hiểu rõ hơn về hành vi của người dùng và cung cấp dữ liệu quan trọng để phân tích hiệu suất và tối ưu hóa chiến lược Marketing.


Quy trình cụ thể để thiết lập Calendly Tracking trong GTM có thể khác nhau tùy thuộc vào yêu cầu cụ thể của dự án và cách bạn đã cấu hình Calendly của mình. Bài viết này sẽ giải thích cho bạn cách track Calendly with Google Tag Manager và sau đó chuyển data tới Google Analytics 4 dưới dạng event.


Nếu cách này không phù hợp với dự án của bạn, hãy liên hệ với chuyên gia Tracking của chúng tôi trên Askany để tìm ra phương án tối ưu nhất cho website của bạn.

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)

tracking đặt lịch bằng google tag manager và ga4

#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:

tracking đặt lịch bằng google tag manager và ga4

#3. Khi ai đó chọn ngày và giờ

tracking đặt lịch bằng google tag manager và ga4

#4. Khi ai đó lên lịch một sự kiện

tracking đặt lịch bằng google tag manager và ga4

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:

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).

tracking đặt lịch bằng google tag manager và ga4

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.

tracking đặt lịch bằng google tag manager và ga4

Sau đó, nhập URL của web, nơi bạn đã nhúng lịch Calendly.

tracking đặt lịch bằng google tag manager và ga4

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

tracking đặt lịch bằng google tag manager và ga4

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:

tracking đặt lịch bằng google tag manager và ga4

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.

tracking đặt lịch bằng google tag manager và ga4

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:

tracking đặt lịch bằng google tag manager và ga4

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:

tracking đặt lịch bằng google tag manager và ga4

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:

tracking đặt lịch bằng google tag manager và ga4

 

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.

tracking đặt lịch bằng google tag manager và ga4

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.

tracking đặt lịch bằng google tag manager và ga4

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.

tracking đặt lịch bằng google tag manager và ga4

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.

Video hướng dẫn

Bạn có thể xem video hướng dẫn Tracking đặt lịch Bằng Google Tag Manager Và GA4 tại đây:

Như vậy bạn đã biết cách Tracking đặt lịch bằng Google Tag Manager và GA4 sau khi tham khảo bài viết bên trên. Tuy nhiên, quá trình tiến hành đòi hỏi bạn phải có kinh nghiệm về tracking, phân tích dữ liệu, digital marketing,... Nếu bạn hoặc đội ngũ của mình chưa tự tin về dự án hoặc có bất cứ điểm nào muốn được tư vấn, cho lời khuyên từ các chuyên gia. Hãy đặt lịch hẹn để được gặp gỡ và trò chuyện trực tiếp với họ trên Askany bạn nhé.

Tôi là Tô Lãm với hơn 4 năm kinh nghiệm trong lĩnh vực IT, Business Analyst, Data Analyst, Tracking,... cho rất nhiều doanh nghiệp SME. Tôi tốt nghiệp trường Công nghệ Thông tin cùng với kỹ năng và kiến thức trau dồi của mình, tôi mong muốn được chia sẻ các thông tin hữu ích dến với người đọc thông qua các bài viết trên Topchuyengia, mọi người hãy follow mình nhé.

Kinh nghiệm thực tế

Tư vấn 1:1

Uy tín

Đây là 3 tiêu chí mà TOPCHUYENGIA luôn muốn hướng tới để đem lại những thông tin hữu ích cho cộng đồng