Tracking Single Page Applications (SPAs) bằng 2 cách phổ biến nhất

Cách 2: Sử dụng Google Tag Manager's History Change Trigger

Phương pháp này hoạt động bằng cách kích hoạt thẻ khi lịch sử trình duyệt của người dùng thay đổi. Nó cho phép bạn theo dõi các lượt xem trang và sự kiện trong SPA, nhưng bạn cần phải cấu hình một số trigger và thẻ trong GTM.

Giải pháp mạnh mẽ nhất để theo dõi các ứng dụng một trang là hợp tác với nhà phát triển (developer). Tuy nhiên, đôi khi các nhà phát triển không có mặt, vì vậy chúng tôi có thể phải làm việc với những gì chúng tôi có. Đó là lý do tại sao phương pháp này cũng có sẵn để thay thế.

Trong Google Tag Manager, hãy đi tới Triggers > New > History Change và tạo trình kích hoạt với các cài đặt sau:

Sau đó chúng ta cần kiểm tra xem nó có hoạt động không. Bật Google Tag Manager Debug mode. Nhấp vào nút Preview ở góc trên cùng bên phải của giao diện GTM của bạn (gần nút Submit).

Sau khi bạn nhấp vào nút Preview, một 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 bạn muốn kiểm tra và gỡ lỗi. Đó có thể là địa chỉ trang chủ hoặc URL của một trang cụ thể, sau đó nhấn vào Start.

Một tab (hoặc cửa sổ) mới sẽ xuất hiện, tại đây bạn sẽ thấy URL mình đã nhập trong cửa sổ bật lên trước đó. Ở cuối trang/tab đó, bạn sẽ thấy huy hiệu sau:

Nhấp (hoặc cuộn) qua các phần khác nhau của Start (hoặc trang web) một trang để thay đổi URL. Sau khi thay đổi xảy ra, hãy xem kỹ luồng sự kiện trong bảng điều khiển Preview and Debug.

Sự kiện History có xuất hiện không? Nếu có thì đó là tin tốt! Nếu không, hãy hỏi ý kiến chuyên gia tracking trên Askany để được giải quyết vấn đề 1:1 hiệu quả nhất.

Một trong số chuyên gia website phải kể đến là Trần Chí Quyết

• Profile: https://askany.com/seo-website/1671511605959853
• Thời gian tư vấn: T2 - CN (8:00 - 20:00)
• Giá tư vấn: 300.000 VND / 60 phút

Trên một single-page application, bạn có thể thấy một số sự kiện History xảy ra đồng thời. Đó là lý do tại sao bạn cần trả lời thêm một câu hỏi nữa.

Bạn thấy bao nhiêu History events khi điều hướng từ Trang A đến Trang B?

Một số trang web được code theo cách cụ thể khiến nhiều sự kiện lịch sử xuất hiện đồng thời ở chế độ xem trước GTM. Nếu bạn gặp phải tình huống này, hãy đọc hướng dẫn này, trong đó có giải thích cách định cấu hình trình kích hoạt của bạn để chỉ hoạt động với một số sự kiện History Change nhất định (và do đó tránh được trùng lặp)

Gửi dữ liệu tới Google Analytics (nhờ trình History Change trigger)

Sau khi đảm bảo rằng trình kích hoạt History Change hoạt động tốt, bạn sẽ phải gửi những lượt xem trang đó tới Google Analytics.

Google Analytics 4 là một nền tảng phân tích dựa trên sự kiện. Nó có nghĩa là mọi thứ đều là một sự kiện. Lượt xem trang, nhấp chuột, mua hàng, v.v.

Vì muốn gửi số pageviews mỗi khi xảy ra History event, nên chúng tôi sẽ thực hiện việc đó bằng thẻ sự kiện GA4. Nhưng cấu hình của nó phụ thuộc vào cấu trúc URL của trang web của bạn.

Lưu ý quan trọng:Trên một số trang web, bạn có thể nhận thấy rằng số lần xem trang SPAs của bạn được theo dõi chính xác. NHƯNG trong báo cáo, bạn có thể nhận thấy rằng tiêu đề của trang được track luôn thuộc về trang trước đó. Nếu nhận thấy điều này, bạn sẽ cần triển khai tính năng theo dõi single-page app với sự trợ giúp của IT.

Nếu URL trang web của bạn chứa #

Phần này của bài đăng blog áp dụng cho bạn nếu URL trang web của bạn chứa #, ví dụ: www.mywebsite.com/#/something.

Đi tới Tags > New > GA4 event tag rồi nhập cấu hình sau. Tôi đoán rằng bạn đã biết GA4 configuration tag là gì nên tôi sẽ không giới thiệu ở đây.

Quan trọng: Google đã thay thế GA4 configuration tag bằng Google Tag. Vì vậy, nó đã làm thay đổi một số phần của giao diện GTM.

Bản thân Google Analytics 4 (và các phiên bản tiền nhiệm của nó) không có khả năng tự động theo dõi các đoạn URL (đó là phần URL đứng sau #). Đó là lý do tại sao chúng tôi cần ghi đè page_location. Quan trọng: bạn cũng sẽ cần phải thực hiện điều đó trong tất cả các GA4 event tags tương lai khác.

Tôi đã sử dụng loại biến nào ở đây?

Một trong những cách để chuyển toàn bộ URL (bao gồm cả phần fragment) đến GA4 là tạo một biến JavaScript có tên là window.location.href.

Lưu thẻ.

Nếu URL của trang web không chứa #

Trong phần trước, chúng ta đã ghi đè tham số page_location vì URL chứa dấu thăng (#). Nhưng nếu URL của trang web không có #, bạn KHÔNG CẦN ghi đè tham số page_location. GA4 sẽ tự động lấy URL chính xác.

Trigger (Trình kích hoạt)

Nếu bạn đã làm theo hướng dẫn này một cách cẩn thận, bạn đã tạo một trigger History Change để theo dõi tất cả các sự kiện. Nếu có, hãy giữ nguyên như vậy. Nếu chưa tạo, hãy tạo ngay bây giờ.

Gán trigger History này cho thẻ sự kiện GA4 dành cho page_view.

Nên để thẻ cấu hình GA4 tự động theo dõi page_view đầu tiên không?

Nếu bạn mở thẻ cấu hình GA4 (không phải thẻ sự kiện), bạn sẽ thấy một hộp kiểm "Send a page view event when this configuration loads" (Gửi sự kiện page view khi cấu hình này tải). Vậy nên bật hay tắt nó?

Câu trả lời là: tùy thuộc vào trường hợp của bạn.

Bạn nên kiểm tra điều gì xảy ra sau khi bạn tải/tải lại trang của ứng dụng một trang (Single-Page Application - SPA) của mình.

Bạn nên kiểm tra xem điều gì xảy ra sau khi bạn load/reload trang SPAs của mình.

Sự kiện History có xuất hiện ở chế độ xem trước mỗi khi bạn tải lại trang không?

Nếu bạn tải lại trang (mà không nhấp vào bất kỳ nơi nào khác trên trang web của mình) và bạn thấy điều này:

... thì bạn nên tắt hộp kiểm trong thẻ cấu hình GA4.

Nếu các sự kiện History không xuất hiện ngay sau khi bạn làm mới trang và chúng chỉ hiển thị khi bạn bắt đầu điều hướng trang web/ứng dụng web của mình, thì bạn nên giữ hộp kiểm được bật.

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

• Cách tắt chế độ xem trước trong Google Tag Manager
• Hướng dẫn cách Tracking Gravity Forms
• Cách Tracking Convertkit Forms chi tiết từ A - Z

Bài viết đã hướng dẫn bạn tracking Single Page Applications bằng 2 cách phổ biến nhất. Việc theo dõi SPAs có thể phức tạp hơn so với theo dõi các trang web truyền thống. Tuy nhiên, có một số giải pháp có thể giúp bạn theo dõi SPAs một cách chính xác. Nếu bạn đang gặp khó khăn trong việc theo dõi SPAs của mình, hãy liên hệ với một chuyên gia tracking trên ứng dụng Askany. Các chuyên gia tracking có thể giúp bạn thiết lập và triển khai các tag theo dõi SPAs một cách chính xác và hiệu quả