Kiến thức Google Tag Manager

Hướng dẫn DOM Ready trong Google Tag Manager

Khi phát triển Google Tag Manager để theo dõi và ghi dữ liệu trên trang web, việc sử dụng DOM Ready là một phương pháp quan trọng để đảm bảo rằng thẻ được kích hoạt sau khi toàn bộ cấu trúc DOM đã được tạo. Trong bài viết này, chúng tôi sẽ hướng dẫn DOM Ready trong Google Tag Manager để đảm bảo hiệu quả hoạt động của các thẻ trong trang web của bạn.

Trình kích hoạt DOM Ready trong Google Tag Manager là gì?

Sự kiện DOM Ready xuất hiện trong chế độ xem trước (và trong Data Layer) khi trình duyệt kết thúc việc xây dựng mô hình đối tượng tài liệu (DOM) của trang web từ HTML.
Hiểu một cách đơn giản rằng khi trình duyệt hiển thị các thành phần trang và giá trị của chúng có thể được truy cập (ví dụ: thu thập bằng Google Tag Manager), sau đó sự kiện DOM Ready xuất hiện.
Tuy nhiên, điều này không có nghĩa là trang được tải đầy đủ. Có thể vẫn có một số thành phần trên trang sẽ chỉ được tải sau khi các tập lệnh cụ thể thực hiện công việc của chúng.
Bạn có thể tìm thấy trình kích hoạt này bằng cách đi đến Trình kích hoạt (trong giao diện GTM) -> Mới -> Cấu hình kích hoạt -> DOM Ready. Nếu bạn muốn sử dụng ở bất kì trang nào, rời khỏi tất cả các cài đặt và lưu trình kích hoạt.
Nếu bạn muốn sử dụng trình kichs hoạt này chỉ trên trang nhất đinh, bạn có thể chọn Some DOME Ready Events và sau đó nhập điều kiện.

DOM là gì?

Để có thể hiểu trình kích hoạt DOM Ready trong Google Tag Manager, đầu tiên bạn cần phải hiểu ít nhất cơ bản về DOM là gì.
DOM (Document Object Model) là đại diện cho thứ bậc của tài liệu trnag web. Nó cho phép thao tác với tài liệu trang web, nhận giá trị của các thành phần trang web hiện tại, thêm mới, chỉnh sửa, hoặc xóa các thành phần đang tồn tại.
Nếu bạn truy cập bất kỳ trang web nào và mở nguồn nó (ví dụ CTRL+U trên Windows) bạn sẽ nhìn thấy mã code HTML của trang. Đây là mã mà nhà phát triển đã viết để làm website.
Nhưng nếu bạn trở lại trang web tương tự và mở công cụ nhà phát triển (Windows: F12, Mac: Command+Option+I), bạn sẽ thấy mã trình bày của website. Nếu không thấy, bật tab Elements
DOM không chỉ cho phép xem các thành phần trang web mà còn cho phép thao tác với chúng. Cách dễ dàng và thực tế nhất để chỉnh sửa các nút trong DOM là nhấp đúp vào một nút cụ thể rồi thay đổi giá trị của nó hoặc xóa, chỉnh sửa, thêm thuộc tính vào một phần tử.
Đối với việc đọc các giá trị, phương thức getElementById(“some_id”) sẽ trả về cho bạn phần tử trang web đầu tiên khớp với một some_id ID.
Một ví dụ khác có thể là querySelector() , trả về phần tử trang web đầu tiên khớp với Bộ chọn CSS nhất định do bạn xác định.
Khi trình duyệt xây dựng DOM, bạn có thể sử dụng nó để thao tác nội dung trên website (hoặc truy xuất một giá trị nhất định). Do đó, Khi DOM đã sẵn sàng được sử dụng, sự kiện DOM Ready được kích hoạt, và bạn có thể nhìn thấy nó trong chế độ Xem trước và Gỡ lỗi.

Khi nào nên sử dụng trình kích hoạt DOM Ready?

  • Trong trường hợp bạn yêu cầu nhà phát triển đẩy một số dữ liệu tùy chỉnh vào lớp Data Layer. Ví dụ: dữ liệu thương mại điện tử và dữ liệu đó được đặt dưới đoạn mã vùng chưa GTM và bạn dự định kích hoạt thẻ trên trình kích hoạt Lượt xem trang, sử dụng trình kích hoạt DOM Ready thay thế.
Bởi vì nếu đoạn mã dataLayer.push có dữ liệu tùy chỉnh được thêm vào bên dưới đoạn mã GTM thì dữ liệu tùy chỉnh sẽ không có trong sự kiện Lượt xem trang. Bạn có thể bắt đầu sử dụng nó từ DOM Ready và các sự kiện tiếp theo khác.
  • Trong trường hợp bạn muốn sử dụng Biến phần tử DOM hoặc các phương thức khác sẽ trả về giá trị của một phần tử trang cụ thể.
Nếu bạn muốn chuyển giá trị của thành phần trang web đó bằng một thẻ (ví dụ: thẻ Số lần xem trang GA), bạn không thể kích hoạt thẻ trước sự kiện DOM Ready. Sử dụng trình kích hoạt DOM Ready, nhưng không kích hoạt nó trên Số lần xem trang.

DOM Ready có cải thiện tốc độ tải trang không?

Không nhiều. Đối với tốc độ trang, việc trì hoãn các thẻ từ chế độ xem Trang sang trình kích hoạt DOM Ready sẽ không mang lại nhiều cải thiện. Bạn cần trì hoãn thẻ ít nhất đến trình kích hoạt Window Loaded để có kết quả tố hơn.

Trì hoãn việc kích hoạt thẻ trên DOM Ready có bị mất dữ liệu không?

Bạn sẽ bị mất một chút dữ liệu, nhưng không nhiều khi thẻ bị trì hoàn từ Window Loaded.
Bạn càng trì hoãn thời điểm thẻ kích hoạt trong GTM thì khả năng bạn bỏ lỡ một số dữ liệu càng cao. Bởi vì nếu trang của bạn tải siêu chậm, một số khách truy cập sẽ không chờ đợi và rời đi ngay cả trước khi bất kỳ nội dung nào xuất hiện trên trang. Trong trường hợp đó, thẻ kích hoạt trên DOM Ready sẽ không có cơ hội kích hoạt.
Tác giả đã thử nghiệm và đặt thẻ GA3 kích hoạt trên ba trình kích hoạt khác nhau:
  • Lượt xem trang
  • DOM đã sẵn sàng
  • Đã tải cửa sổ
Tất cả các sự kiện được đặt là lượt truy cập không tương tác. Sau một thời gian, đây là tổng số sự kiện từ báo cáo GA:

Kết luận

Đọc xong bài viết này, bạn đã hiểu cách sử dụng DOM Ready trong Google Tag Manager để đảm bảo rằng thẻ chỉ được kích hoạt sau khi trang web đã tải xuống hoàn toàn. Hy vọng rằng bài viết này đã giúp bạn có cái nhìn tổng quan về cách sử dụng DOM Ready trong Trình quản lý thẻ của Google và áp dụng nó vào công việc của mình.
Tham khảo các bài viết liên quan khác:

Nguồn tài liệu dịch: https://www.analyticsmania.com/post/dom-ready-trigger-in-google-tag-manager-quick-guide/
5/5 - (100 bình chọn)
Xem thêm  Cách cài đặt Google Tag Manager wordpress cho Newbie

Nguyễn Đức Hòa

Mình là Hòa. Mình là người viết những bài viết trên Blog này và Founder tại X3Sales.vn. Với kinh nghiệm 7+ năm nghiên cứu chuyên sâu về Google Ads. Và những chia sẻ của mình trên Website này đều là những trải nghiệm khi mình triển khai các chiến dịch với Google. Mong rằng sẽ giúp ích nhiều cho bạn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button