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

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

21/12/2023

318

0

Chia sẻ lên Facebook
Tracking Single Page Applications (SPAs) bằng 2 cách phổ biến nhất

Trong những năm gần đây, Tracking Single Page Applications (SPAs) đã trở nên ngày càng phổ biến. SPAs là các ứng dụng web được tải chỉ một lần, sau đó cập nhật nội dung động mà không cần tải lại toàn bộ trang. Nó mang lại cho người dùng trải nghiệm mượt mà và liền mạch hơn.


Tuy nhiên, 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. Nguyên nhân là do SPAs không có các sự kiện trang thông thường như tải trang và rời khỏi trang.


Trong bài viết này, chúng ta sẽ tìm hiểu các cách khác nhau để theo dõi SPAs. Nếu bạn muốn biết thêm các ưu và nhược điểm của từng phương pháp và lựa chọn phương pháp phù hợp nhất cho nhu cầu của mình. Hãy liên hệ với đội ngũ chuyên gia Tracking của chúng tôi trên Askany.

Cách 1: Sử dụng Google Analytics' Enhanced Measurement

Google Analytics' Enhanced Measurement là một tính năng mới được công bố trong Google Analytics 4. Tính năng này cho phép bạn tự động theo dõi các lượt xem trang và sự kiện trong SPA mà không cần phải thực hiện bất kỳ cấu hình bổ sung nào. Tuy nhiên bạn cũng nên

 

Lưu ý:  Enhanced Measurement cung cấp nhiều khả năng theo dõi event, nhưng có khả năng trong số đó hoạt động không chính xác (ví dụ: scroll tracking). Do đó, sẽ hợp lý hơn nếu tắt tất cả tính năng theo dõi không liên quan đến số lần xem trang (scroll, site search, click tracking,..)

 

Hãy xem liệu tính năng theo dõi lượt xem trang tích hợp trong GA4 có phù hợp với bạn hay không.

 

Trong Google Analytics 4, hãy truy cập Admin > Data Streams và nhấp vào luồng dữ liệu web của bạn.

Tracking Single Page Applications

Sau đó, hãy nhấp vào biểu tượng bánh răng bên cạnh Enhanced Measurement (đồng thời, hãy đảm bảo bạn đã bật Enhanced Measurement).

Tracking Single Page Applications

Sau đó nhấp vào Show advanced settings trong Page views và kiểm tra xem hộp kiểm Page changes based on browser history events có được bật hay không. Điều này sẽ cho phép GA4 tự động thử mỗi khi URL thay đổi.

Tracking Single Page Applications

Sau đó, lưu tất cả thay đổi trong GA4. Trong Google Tag Manager, hãy bật chế độ Preview and Debug rồi điều hướng đến single-page application/website của bạn. Hãy thử điều hướng từ trang này sang trang khác.

 

Trong chế độ xem trước của GTM, bạn sẽ bắt đầu thấy các sự kiện History Change, và tên sự kiện kỹ thuật của chúng là gtm.historyChange-v2. Bạn sẽ nhìn thấy nó khi chọn vùng chứa GTM ở đầu chế độ preview mode.

>>> Tham khảo: Dạy tracking từ A - Z dành cho người mới cùng chuyên gia

Tracking Single Page Applications

Nếu bạn thấy điều đó, hãy nhấp vào measurement ID của bạn ở đầu chế độ xem trước. Rồi kiểm tra xem bạn có thấy nhiều Page View events đang được gửi tới Google Analytics 4 hay không. Nếu có thì đó là tin tốt. GA4 sẽ có thể tự động theo dõi số lượt xem trang của single-page application, và bạn không cần bất kỳ cấu hình bổ sung nào.

Tracking Single Page Applications

Ngoài ra, hãy kiểm tra DebugView của GA4 để đảm bảo rằng page_view các sự kiện sắp diễn ra với các thông số page_title và page_location thích hợp.

 

Nếu bạn không thể thấy các sự kiện History Change (hoặc các sự kiện page_view không được gửi tới GA4), thì hãy chuyển sang chương tiếp theo của bài viết blog này.

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:

Tracking Single Page Applications

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

Tracking Single Page Applications

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.

Tracking Single Page Applications

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:

Tracking Single Page Applications

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

Tracking Single Page Applications

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

Tracking Single Page Applications

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.

Tracking Single Page Applications

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.

Tracking Single Page Applications

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

Tracking Single Page Applications

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:

Tracking Single Page Applications

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

Tracking Single Page Applications

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:

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ả

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