Theo dõi trang đơn webiste (Single Page Web App) với Google Tag Manager

0
165
2 theo doi trang don webiste

Bạn có 1 trang web đơn hoặc ứng dụng web, bạn có cài mã theo dõi lượt xem cho google analytics, tuy nhiên bạn chỉ thấy có 1 lượt xem duy nhất, mặc dù trên trang của bạn có nhiều trang khách nhau, bạn có click chuyển trang nhưng chỉ thống kê là 1 lượt xem duy nhất.  Bất kể người dùng / khách truy cập làm gì trên trang web của bạn, chỉ có một lượt xem trang được theo dõi (lần đầu tiên). Có gì đó sai sai ở đây phải không?

Lý do tại sao điều này xảy ra? Tôi sẽ chia sẻ lý do cho bạn ngay sau đây thôi!

  1. Ứng dụng / Trang web đơn là gì?

Như bận đã biết Theo dõi Google Analytics mặc định hoạt động tốt với các trang web được xây dựng có nhiều trang con ở bên trong vì đoạn mã theo dõi sẽ được ghi nhận mỗi lần tải 1 trang mới. Để giúp bạn hiểu thêm về trang web, bạn có thể vào trang Suna.vn, đây là 1 trang có nhiều trang con, mỗi lần bạn tải 1 bài viết, Google analytics sẽ đếm là 1 lần xem trang.

Tuy nhiên các các web đơn/ứng dụng một trang web thì lại khác. Cũng là một trang có nhiều cấp menu khách nhau như: Trang chủ/Giới thiệu/Liên hệ/Sản phẩm. Nhưng khi bạn tải từ trang chủ, đến trang giới thiệu hay trang sản phẩm, Google analytics chỉ đếm được 1 lần xem duy nhất. Đó là lý do tại sao bạn chỉ thấy một lượt xem trang trong các báo cáo GA của mình . Các URL có thể thay đổi nhưng đó chỉ là để cung cấp về các trang riêng biệt.

Vậy trang đơn/ứng dụng trang đơn website là gì? Đó là 1 trang có nhiều cấp menu khách nhau tuy nhiên khi bạn click vào các trang con khác, lượt xem chỉ được tính 1 lần duy nhất mà không tính cho lượt xem khi tải trang mới.

Để hiểu dõ hơn, bạn có thể tìm hiểu thêm định của của Google nhé Theo Google

Hoặc bạn có thể tham khảo một số trang đơn sau: https://khuyenmai.baoxuan.vn/ hoặc bạn hiểu đơn giản những trang có cấu trúc như sau:

  • /#about.html
  • /home.html#about.html
  1. Cài đặt Trình quản lý thẻ của Google

Để xem cài đặt cho Google tag manager, bạn có thể tham khảo bài viết hướng dẫn này tại đây

Thật tuyệt, chúng ta đã cài đặt GTM được rồi, chúng ta cùng đến với bước tiếp theo.

  1. Cách theo dõi trang đơn/ứng dụng web qua GTM

Tôi sẽ hướng dẫn bạn 2 cách để theo dõi lượt xem trang đơn/ứng dụng web trang đơn. Thứ nhất bạn có thể theo dõi hoạt động với trình sự kiện Lịch sử thay đổi (trong GTM) hoặc yêu cầu kỹ thuật website của bạn đẩy dữ liệu số lần xem trang sang theo Lớp dữ liệu mỗi khi khách truy cập điều hướng từ trang này sang trang khác. Trong phần đầu của bài viết này tôi sẽ nói cách theo dõi hoạt động qua trình kiện lịch sử trong GTM và phần sau tôi sẽ hướng dẫn bạn cách theo dõi qua lớp dữ liệu có sự hỗ trợ của kỹ thuật website.

URL trang có thay đổi không (khi bạn điều hướng từ trang A đến B)?

Đến đây bạn đã hiểu một trang web đơn, ứng dụng trang đơn là gì rồi đúng không. Để tiếp tục, trước tiên bạn kiểm tra xem Url trang đơn của bạn  có thay đổi url khi bạn chuyển sang trang khách không.

Chúng ta cùng lấy 1 ví dụ để bạn hiểu thêm nhé

Ví dụ như trang https://khuyenmai.baoxuan.vn/  bạn hãy click chuột vào menu và để ý xem URL có thay đổi không. Không thay đổi phải không bạn.

Nếu URL không thay đổi, bạn sẽ phải yêu cầu trợ giúp của bộ phận kỹ thuật website. Nếu như vậy bạn có thể tham khảo thêm các theo dõi sự kiện lịch sử, chứ không thể áp dụng cách đó với trang đơn không thay đổi URL bạn nhé. Nếu URL thực sự thay đổi, điều này có nghĩa là bạn vẫn sử dụng trình Lịch sử thay đổi theo cách riêng của mình qua GTM

Thay đổi URL có thể trông khác nhau dựa trên một trang web bạn đang truy cập. Trên một số trang web, đoạn URL thay đổi (đó là một phần của URL sau dấu thăng #).  Nếu bạn xác nhận rằng URL thay đổi, hãy chuyển sang bước tiếp theo cùng tôi nhé.

Tìm hiểu xem trình sự kiện thay đổi lịch sử (History change) giúp gì cho bạn.

Trước tiên, bạn cần kích hoạt ít nhất một Trình kích hoạt thay đổi lịch sử trên một trang. Về mặt lý thuyết, nó sẽ có thể bắt được những thay đổi URL như vậy. Khi kích hoạt được kích hoạt trên một trang, nó kích hoạt trình Lịch sử thay đổi.

Khi người dùng chuyển hướng đến url khác, nó sẽ đẩy Sự kiện Lịch sử đến Lớp Dữ liệu (và bạn sẽ thấy nó trong chế độ Xem trước và Gỡ lỗi).

2 trinh thay doi su kien lich su

Để kích hoạt hãy đi tới Kích hoạt (Trigger) > Mới  và nhập các tùy chọn sau.

Tiếp theo, đi đến biến (Variables) . Trình quản lý thẻ của Google tag manager cung cấp một loạt các biến tích hợp liên quan đến Trình kích hoạt thay đổi lịch sử. Trong phần Biến, bấm Cấu hình (bên dưới  Biến tích hợp ) và bật tất cả các  biến liên quan đến Lịch sử  .

https://suna.vn/wp-content/uploads/2019/12/2-bien-trong-trinh-thay-doi-su-kien-lich-su.jpg

Bạn có thấy các sự kiện Lịch sử trong chế độ Xem trước Preview của GTM không

Bây giờ, hãy bật chế độ Xem trước preview của Trình quản lý thẻ Google tag manager và xem liệu trình sự kiện lịch sử có hoạt động không. Một thanh thông báo màu cam sẽ xuất hiện trong tài khoản của bạn.

Khi chế độ xem trước được bật, hãy điều hướng đến trang web nơi chứa container và bạn sẽ thấy cửa sổ bảng điều khiển previews ở cuối trình duyệt hiển thị thông tin chi tiết về thẻ của bạn, bao gồm trạng thái gửi lên và dữ liệu nào đang được xử lý.

Nhấp (hoặc cuộn) qua các phần khác nhau của ứng dụng web trang (hoặc trang web) để tạo URL Trang (nói cách khác, chỉ cần duyệt ứng dụng / trang web trang duy nhất của bạn). Sau khi thay đổi xảy ra, hãy xem xét kỹ hơn luồng sự kiện trong bảng điều khiển Xem trước preview

Có phải Lịch sử  sự kiện xuất hiện? Nếu có, bạn đã bật được lên rồi. Thật tuyệt! Nếu không, bỏ qua phần bài viết  tôi giải thích và tìm đến nhờ sự hỗ trợ từ đội ngũ kỹ thuật website.

2 trinh thay doi su kien lich su bien cai dat

Mỗi khi khách truy cập điều hướng đến một phần nhất định của ứng dụng / trang web đơn của bạn, sự kiện Lịch sử sẽ kích hoạt.

Khi bạn điều hướng từ Trang A đến B, bạn thấy bao nhiêu sự kiện Lịch sử?

Lý do tại sao tôi hỏi câu hỏi này là vì câu trả lời không phải lúc nào cũng là một. Đôi khi các Ứng dụng Trang đơn được mã hóa theo cách mà trình thay đổi Lịch sử bắt được hai hoặc nhiều sự kiện. Ví dụ: tôi đã thấy một số trường hợp khách truy cập điều hướng từ / home / đến / page / contact / .

Kết quả là hai sự kiện Lịch sử đã xảy ra:

  • Một người theo dõi sự thay đổi từ / home / sang / page / 
  • Và một cái khác đã bắt được sự thay đổi từ  / page / sang  / page / contact / .

Điều này có nghĩa là với GTM, bạn sẽ theo dõi hai lần xem trang thay vì một lần xem.  Một ví dụ khác là trong một dự án mà tôi đã thấy các sự kiện Lịch sử  tương tự  xuất hiện nhiều lần.

Trong trường hợp đó, nếu bạn sử dụng trình Thay đổi Lịch sử mà không có bất kỳ sửa đổi nào đối với trình kích hoạt Lịch sử, dữ liệu của bạn sẽ bị sai lệch và không thực tế.

Bạn có ba tùy chọn ở đây và hai trong số chúng liên quan đến sự hỗ trợ từ kỹ thuật webiste

  • Tùy chọn A:  Tham khảo ý kiến ​​với đội kỹ thuật web và hỏi liệu có thể khắc phục sự cố sự kiện lịch sử kép hoặc ba lần bằng cách giảm luôn xuống còn 1. Có thể kỹ thuật website sẽ không chắc chắn bạn đang nói về điều gì.
  •  Tùy chọn B: Một lần nữa, bỏ qua phần này, chuyển tới hướng dẫn theo dõi có sự hỗ trợ từ kỹ thuật website.
  • Tùy chọn C:  Cố gắng lọc ra một số Sự kiện Lịch sử .

Có bất kỳ biến lịch sử nào trả về dữ liệu hữu ích không?

Vì có một số cách có thể thay đổi URL một cách linh hoạt, có nhiều cách khác nhau để bạn có thể truy xuất thông tin lịch sử về trang vừa tải. Hãy xem hai ví dụ.

Khi sự kiện Lịch sử xuất hiện trong bảng điều khiển Xem trước previews GTM, nhấp vào nó và chuyển đến  tab Biến . Cuộn xuống cho đến khi bạn thấy các biến liên quan đến Lịch sử (nếu không, bạn cần bật chúng trong Bộ chứa GTM bằng cách đi tới Biến> Biến tích hợp> Cấu hình ).

Bạn thấy gì?

Đoạn lịch sử mới có chứa một số dữ liệu không? Nếu thay đổi URL liên quan đến dấu thăng #, thì biến này thực sự sẽ trả về một số giá trị. Thật tuyệt! Sau này chúng ta sẽ cần sử dụng biến đó trong Biến cài đặt GA.

2 che do xem trinh thay doi su kien lich su

Nếu URL (có #) thay đổi nhưng biến Đoạn lịch sử mới trả về không xác định

Nếu thay đổi URL không liên quan đến Phân đoạn URL (#), thì hãy kiểm tra một biến khác là Trạng thái Lịch sử Mới . Nó có chứa một số thông tin? Một ví dụ có thể trông như thế này:

2 che do xem trinh thay doi su kien lich su 1

Mặc dù đây là một dấu hiệu tốt, chúng tôi không cần tất cả giá trị của nó. Chúng ta sẽ chỉ cần một biến . Tuy nhiên, các biến GTM tích hợp không cho phép bạn truy cập tham số cụ thể đó, do đó, chúng tôi sẽ cần tạo Biến dữ liệu lớp với các cài đặt sau:

2 che do xem trinh thay doi su kien lich su 2

Tuy nhiên, nếu không có Biến lịch sử trả về dữ liệu về trang mà khách truy cập đã đến, hãy tham khảo ý kiến ​​của đội ngũ phát triển website

Thành thật mà nói, tôi chưa từng thấy một tình huống mà không có Biến lịch sử nào chứa thứ gì đó, thậm chí có thể là không thể.

Sử dụng Trình nghe lịch sử để theo dõi ứng dụng trang đơn với Google Analytics

Vậy là chúng ta đã kích hoạt trình sự kiện thay đổi lịch sử rồi! Tiếp theo, tôi sẽ hướng dẫn bạn theo dõi lượt xem thay đổi trên Google Analytics. Chúng ta cùng tiếp tục thôi!

Nếu thay đổi URL liên quan đến Đoạn URL (#)

Thông thường, thẻ Google Analytics tự động tìm nạp giá trị của URL Trang đầy đủ và chuyển nó đến các máy chủ Google Analytics. Nhưng nếu các thay đổi URL của bạn liên quan đến dấu thăng (#), Google Analytics sẽ không bắt được nó theo mặc định.

Chúng ta sẽ cần thực hiện một số cấu hình bổ sung trong Biến cài đặt GA  để gửi giá trị Phân đoạn URL qua GA (đó là lý do tại sao việc kiểm tra xem các biến Lịch sử có chứa một số dữ liệu hữu ích hay không).

Mở Biến cài đặt GA của bạn Tới  More Settings> Fields để Set>  trang và nhập  {{New History Fragment}} .

2 cau hinh bien lich su

Nếu địa chỉ của ứng dụng / trang web không chỉ chứa đoạn URL mà cả Đường dẫn trang (ví dụ: https://www.example.com/ category1 / product2 / # contact-us), giải pháp tôi đã mô tả ở trên sẽ chỉ gửi  liên hệ với chúng tôi đến Google Analytics và category1 / sản phẩm2 sẽ bị bỏ qua.

Vì vậy, nếu địa chỉ trang web / ứng dụng trang duy nhất của bạn không chỉ chứa Đoạn URL mà còn cả Đường dẫn trang, bạn nên cập nhật cài đặt Universal Analytics thành này (trong tất cả các thẻ GA hoặc trong Biến cài đặt GA):

  • Thay vì  trang >>> {{Đoạn lịch sử mới}}
  • Nhập  trang >>> {{Đường dẫn trang}} {{Đoạn lịch sử mới}}

2 nhap cac tuy chon bien lich su

Theo cả hai cách, chúng tôi yêu cầu Google Analytics bỏ qua giá trị URL Toàn trang mà nó tìm nạp theo mặc định và sử dụng giá trị mới của trang mà chúng tôi đang gửi.

Nếu thay đổi URL liên quan đến Phân đoạn URL (#) và cũng có thể chứa Tham số truy vấn

Trong một số ứng dụng trang đơn, có thể các URL cũng có thể bao gồm một số tham số truy vấn (ví dụ: ví dụ.com /? Q = products # search). Nếu đó là trường hợp của bạn, bạn có thể chuyển một biến bổ sung với trường  trang  cho Google Analytics. Biến đó sẽ trả về tất cả các tham số truy vấn có trong URL.

Tạo một biến JavaScript  với các cài đặt sau  window.location.search.

2 tao bien js su kien lich su

Sau đó, đi đến Biến cài đặt GA và chèn biến này  trước biến Biến . Kết quả cuối cùng: {{Tên máy chủ trang}} {{js – window.location.search}} {{Đoạn lịch sử mới}}.

Nếu các tham số truy vấn duy nhất có thể có trong trang đơn của bạn là các tham số UTM, thì đừng lo lắng. Không cần phải gửi thêm trong một  trường trang  . GA sẽ chăm sóc phân bổ lưu lượng truy cập của bạn theo một cách khác.

Nếu biến Đoạn lịch sử mới trống và bạn đang sử dụng Trạng thái lịch sử mới

Như tôi đã đề cập điều này trong một trong các phần trước đây, hoàn toàn có thể  biến Biến lịch sử mới sẽ không có giá trị. Nếu đó là trường hợp của bạn, bạn cần tìm hiểu sâu hơn về những gì có trong Lớp dữ liệu. Dưới đây là ví dụ về một Sự kiện Lịch sử trong chế độ Xem trước. Sau khi tôi nhấp vào sự kiện Lịch sử , tôi chuyển sang  tab Lớp dữ liệu  .

2 tai bien lich su

Như bạn có thể thấy,  gtm.oldUrlFragment và  gtm.newUrlFragment trống. Nhưng có rất nhiều thông tin hữu ích khác, ví dụ, một trong hai thông tin sau:

Đó là lý do tại sao nên tạo Biến dữ liệu lớp  truy cập một trong những giá trị đó trong Lớp dữ liệu

Nếu bạn quyết định sử dụng  submitUrl , bạn cần nhập toàn bộ đường dẫn từ cấp cao nhất xuống dưới cùng. Trong trường hợp này, nó sẽ là  gtm.newHistoryState.props.submitUrl (hãy nhớ, nó phân biệt chữ hoa chữ thường).

Sử dụng nó trong trường  page (của Biến cài đặt GA của bạn), thay vì {{Đường dẫn trang}} và {{Đoạn lịch sử mới}} (và tham số truy vấn nếu bạn đã nhập chúng).

Cấu hình trigger cho sự kiện thay đổi lịch sử

Nếu bạn đã hoàn toàn làm theo hướng dẫn này, bạn đã tạo một trình kích hoạt Thay đổi Lịch sử tất cả các sự kiện.

Chỉ định kích hoạt Lịch sử cho thẻ GA Pageview của bạn.

Bạn cũng có thể cần chỉ định kích hoạt Tất cả các trang  mặc định cho thẻ xem Trang GA nếu  sự kiện Lịch sử KHÔNG xuất hiện trong chế độ Xem trước và Gỡ lỗi khi tải trang ban đầu xảy ra.

Đầu tiên, bạn thấy  chế độ xem Trang,  sau đó là  sự kiện DOM Ready  và sau đó là  Lịch sử. Nếu đó là trường hợp của bạn, bạn nên sử dụng chỉ Lịch sử thay đổi kích hoạt trong việc theo dõi xem trang của bạn (và tránh Tất cả các trang ). Mặt khác, lần xem trang đầu tiên sẽ được theo dõi hai lần, 1 lần vì kích hoạt Tất cả các trang  và lần thứ 2 vì  sự kiện Lịch sử  .

Bây giờ, hãy lưu thẻ Universal Analytics, làm mới chế độ Xem trước và Gỡ lỗi và thử tương tác với các phần khác nhau của một ứng dụng / trang web. Mỗi khi bạn điều hướng ở đâu đó, Thẻ xem trang phân tích toàn cầu sẽ kích hoạt.

Đừng quên kiểm tra dữ liệu trong các báo cáo thời gian thực GA.

Tùy chọn thay thế: Theo dõi các ứng dụng trang đơn với Trình quản lý thẻ của Google và trợ giúp kỹ thuật website

Chào mừng bạn đến phần thứ 2 của hướng dẫn này. Rất có thể, bạn đã đạt đến điểm này vì các lần thử theo dõi Thay đổi Lịch sử của bạn không thành công hoặc bạn chỉ đơn giản là tò mò muốn tìm hiểu thêm.

Nếu (vì một số lý do) Trình kích hoạt Lịch sử thay đổi không hoạt động với bạn (hoặc có một lý do khác đưa bạn đến phần này), có một tùy chọn khác về cách theo dõi ứng dụng web một trang bằng Trình quản lý thẻ của Google. Yêu cầu kỹ thuật website kích hoạt mã dataLayer.push bất cứ khi nào người dùng điều hướng giữa các trang / trạng thái của trang web / ứng dụng web.

Đây là đoạn mã mẫu mà kỹ thuật website có thể sử dụng:

1

2

3

4

5

6

7

8

<script>

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

‘event’: ‘Pageview’,

‘pagePath’: ‘https://www.example.com/something/contact-us’,

‘pageTitle’: ‘Contact us’ //some arbitrary name for the page/state

});

</script>

Lưu ý:  Các tham số ‘pagePath’ và ‘pageTitle’ (trong đoạn mã đó) phải được thay đổi động thành địa chỉ (và tiêu đề) của trang mà khách truy cập hiện đang xem.

 Mã đó có nghĩa là gì?

Mỗi khi người dùng đi đến một phần cụ thể trên trang của bạn, kỹ thuật website nên kích hoạt đoạn mã JavaScript nhỏ đó. Nó chỉ ra rằng một số lượt xem trang cá nhân đã xảy ra và URL trang mới là  https://www.example.com/s Something / contact-us. Nếu địa chỉ trang chứa một số tham số truy vấn quan trọng đối với báo cáo của bạn (không bao gồm các tham số UTM), hãy yêu cầu kỹ thuật website đưa các tham số đó vào  pagePath .

Dù sao, bạn nên sử dụng dataLayer.push này làm điều kiện kích hoạt (kích hoạt thẻ GA Pageview) và sau đó gửi tiêu đề và đường dẫn trang qua GA.

Để đạt được điều này, hãy hoàn thành các bước sau:

  • Tạo hai biến (và bao gồm chúng trong Biến cài đặt GA)
  • Tạo trình kích hoạt (và gán nó vào thẻ Số lượt xem phân tích chung).

 

Biến

  • Tiêu đề:  dlv – pagePath  (dlv là viết tắt của Biến dữ liệu lớp dữ liệu)
  • Kiểu biến:  Biến lớp dữ liệu
  • Tên biến của lớp dữ liệu:  pagePath
    Biến này sẽ đọc giá trị của pagePath được kỹ thuật website đẩy lên Lớp dữ liệu.

Tạo một biến thứ 2:

  • Tiêu đề:  dlv – pageTitle 
  • Kiểu biến:  Biến lớp dữ liệu
  • Tên biến lớp dữ liệu:  pageTitle

Cài đặt cấu hình trigger

  • Tiêu đề:  Tùy chỉnh – Số lượt xem
  • Loại:  Sự kiện tùy chỉnh
  • Tên sự kiện:  Số lượt xem
  • Kích hoạt trình kích hoạt:  Tất cả các sự kiện

Cập nhật thẻ Biến cài đặt và biến phân tích GA

Chuyển đến biến cài đặt Google Analytics mà bạn đang sử dụng trong bộ chứa GTM của trang đơn và bao gồm các biến pagePath và pageTitle  .

  • Các trường cần đặt:  page  = {{dlv – pagePath}} và title = {{dlv – pageTitle}}

Sau đó, đi đến thẻ Số lần xem trang phân tích chung và thêm trình kích hoạt được tạo gần đây, Số lần xem trang.

Kết luận

Vấn đề với các ứng dụng web hoặc trang web đơn là theo dõi số lần xem trang thông thường không hoạt động. Tất cả các mã cần thiết được tải một lần và trang không tải lại trong toàn bộ phiên người dùng. Đây là lý do tại sao bạn chỉ thấy một lượt xem trang trong các báo cáo GA của mình.

Tuy nhiên, đây không phải là một vấn đề. Với một số cấu hình nhất định trong Trình quản lý thẻ của Google (và có thể một số đầu vào từ kỹ thuật website của bạn), bạn hoàn toàn có thể theo dõi. Trong bài đăng trên blog này, tôi đã giải thích hai tùy chọn về cách theo dõi các trang web đơn: sử dụng trình kích hoạt Thay đổi Lịch sử tích hợp của GTM hoặc hợp tác với kỹ thuật website.

Nếu bạn không chắc chắn nên chọn phương pháp nào, thì đây là quy tắc chung:

  • Nếu bạn có tài nguyên phát triển, chọn đường dẫn với kỹ thuật website là một tùy chọn mạnh mẽ hơn. Nhưng nếu những tài nguyên đó không có sẵn ngay bây giờ, hãy kiểm tra biểu đồ luồng mà tôi đã đưa vào phần đầu của hướng dẫn này. Tuy nhiên, cuối cùng vẫn có cơ hội, cuối cùng, bạn sẽ yêu cầu đầu vào của kỹ thuật website.

 

LEAVE A REPLY