Giải thích nguyên lý hoạt động của DOM Ready Trigger trong Google Tag Manager

giai-thich-dom-ready-trigger-gtm

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Khi bạn mở Debug mode và load 1 trang page sẽ mặc định xuất hiện 3 events: Pageview, DOM Ready, Window Loaded.

Bài viết này sẽ giải thích cho bạn DOM Ready event là gì và tại sao nó lại quan trọng.

DOM Ready là gì trong Google Tag Manager (GTM)?

DOM Ready xuất hiện trong Debug Preview Mode của GTM khi trình duyệt Web browser của bạn vừa hoàn thành việc tải cấu trúc mô hình website (website’s document objective model) của bạn từ HTML.

Hiểu nôm na là khi trình duyệt web tải được phần lớn dữ liệu Web của bạn về khi đó DOM Ready xuất hiện. Các dữ liệu này bao gồm các đoạn script của bên thứ 3 như Google Tag Manager, Page elements…. Tuy nhiên trang web của bạn vẫn chưa được tải hết hoàn chỉnh khi DOM Ready xuất hiện. Phải đợi đến khi Window Loaded Event xuất hiện thì trình duyệt mới tải hết được Website của bạn.

Bạn có thể chọn Trigger là DOM Ready bằng cách vào GTM -> Trigger -> New -> Trigger Configuration -> DOM Ready

DOM-ready-trigger
DOM-ready-trigger

DOM là gì?

Để hiểu được DOM Ready thì bạn cần hiểu qua DOM là gì. DOM (Document Objective Model) là 1 dynamic tree  đại diện cho 1 file tài liệu của Website (các đoạn code trình bày theo kiểu thư mục mở ra thư mục nên nhìn giống cái cây nên nó gọi là tree còn gọi là dynamic vì nó là riêng biệt cho từng website khác nhau). Với DOM bạn có thể lấy dữ liệu từ website elements, thay đổi, thêm mới hoặc loại bỏ chúng.

Vậy bạn có thể thấy DOM ở đâu? Ở bất kỳ website nào bạn chỉ cần click chuột phải vào Inspect (Developer Tool) -> Elements, bạn sẽ thấy các nhánh được mở ra và đóng lại bằng các mũi tên tam giác gọi là các Nodes. Nó kiểu như là thư mục con của nhau -> Đây chính là DOM.

DOM-view
DOM-HTML-view

Như đã nói ở trên, DOM cho phép bạn điều chỉnh các elements vì vậy bạn có thể thử thay đổi một số elements như màu sắc của font chữ… để thấy sự thay đổi ngay. Đừng lo vì sự thay đổi này chỉ diễn ra trong trình duyệt của bạn và khi bạn tải lại trang thì mọi sự thay đổi sẽ biến mất.

Nếu bạn muốn xem các dữ liệu, bạn có thể chọn tab Console và gõ các câu lệnh tìm kiếm.

Ví dụ 1 là xem dữ liệu theo Element.

DOM-Element-query
DOM-Element-query

document.getElementById(“thêm_id_vào_đây”)

Kết quả sẽ trả về các Element có ID như bạn tìm kiếm ở trên.

Ví dụ 2 là xem dữ liệu theo CSS Selector.

DOM-css-selector-query

document.querySelector(“thêm_CSS_Selector_vào_đây”)

Tóm lại là DOM giúp bạn quản lý nội dung trong Website vì vậy khi DOM được tải xong và sẵn sàng để sử dụng thì DOM Ready event cũng fire và bạn có thể thấy được các dữ liệu trong GTM Preview và Debug Mode.

DOM-Ready-preview-debug-mode
DOM-Ready-preview-debug-mode

Khi nào nên sử dụng DOM Ready trigger

Theo mình có 2 trường hợp thường sử dụng DOM Ready trigger.

DOM Ready trigger làm tăng tốc độ tải trang?

Nếu bạn đang dùng PageView Event làm Trigger mà chuyển quả DOM Ready Trigger thì chắc chắn là có cải thiện về tốc độ tải trang nhưng trải nghiệm khi sử dụng web sẽ không nhận ra được. Ít nhất thì phải chờ sang Window Loaded Event thì may ra mới thấy được sự thay đổi rõ rệt hơn.

DOM Ready làm tăng khả năng mất dữ liệu khi phân tích?

Đúng nhưng có quan trọng không?

Đầu tiên là vì sao lại có thể mất dữ liệu. Vì trình duyệt sẽ tải theo thứ tự từ PageView -> DOM -> Window Loaded nên nếu bạn để Trigger ở PageView thì sẽ có được dữ liệu ở mức cao nhất và tuỳ theo tốc độ tải trang của bạn chậm đến mức nào thì mức độ mất dữ liệu càng lớn hơn.

Vậy nếu để Window Loaded Trigger thì có tỉ lệ thất thoát dữ liệu lớn nhất nhưng cũng sẽ tăng tốc độ tải trang nhất. Nói chung tuỳ vào bạn lựa chọn loại dữ liệu nào sẽ nên để trigger nào. Nếu user vừa vào xong out luôn thì ở 1 số trường hợp mình sẽ không cần quan tâm đến dữ liệu này. Và 1 điểm nữa là độ thất thoát dữ liệu cũng rất nhỏ, như bảng ví dụ minh hoạ dưới đây khi để lần lượt trigger là Page view -> DOM -> Window Loaded.

Tung Phan (Daniel)

Tung Phan (Daniel)

Digital Marketing Specialist. Chia sẻ những kiến thức về marketing trong quá trình làm việc và tự tìm tòi học hỏi qua các tài liệu. Hy vọng mọi người cảm thấy có ích!

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore