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.

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.

Để 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.

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.

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.

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.

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:

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:

Đọ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.