Google Tag Manager là một công cụ mạnh mẽ giúp quản lý các đoạn mã theo dõi và theo dõi tương tác của người dùng trên trang web. Trong GTM, Biến phần tử DOM là một tính năng quan trọng giúp lấy thông tin từ các phần tử trên trang web để sử dụng trong quá trình theo dõi mã hóa đoạn. Bài viết này sẽ tìm hiểu về DOM Element Variable trong Google Tag Manager.
Video Hướng Dẫn
DOM là gì?
DOM (Document Object Model) là cách trình bày phân cấp giống như cây động của tài liệu của trang web. Nó cho phép thao tác với tài liệu của trang web, lấy 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 hiện có.
Nếu bạn truy cập bất kỳ trang web nào và mở nguồn của trang web đó (ví dụ: CTRL+U trên Chrome (WIN)), bạn sẽ thấy mã HTML của trang. Đây là mã mà một nhà phát triển đã viết để tạo ra trang web như hiện tại.
Nhưng nếu bạn quay lại chính trang web đó và mở các công cụ dành cho nhà phát triển (Chrome trên Windows: nhấn F12, Chrome trên Mac: Command + Option + I), bạn sẽ thấy mã của trang web được trình bày linh hoạt hơn. Nếu không, hãy chuyển sang tab Elements.
DOM không chỉ cho phép xem/kiểm tra 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 nhất định rồi thay đổi giá trị của nút đó 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 ID some_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.
Và đó là thời điểm thích hợp để giới thiệu DOM Element Variable trong Google Tag Manager. Loại biến này có thể truy cập giá trị của thành phần trang web khớp với điều kiện do bạn xác định.
Định cấu hình DOM Element Variable trong Google Tag Manager
Để tạo biến DOM Element Variable mới, chuyển đến Biến -> Cuộn xuống -> Mới -> Phần tử DOM. Nhấp vào nó.
Điều đầu tiên bạn cần thiết lập là phương pháp lựa chọn. Bằng cách nào đó, bạn cần phải cho Google Tag Manager biết thành phần trang web cụ thể nào mà bạn quan tâm. Các thành phần có thể được chọn bằng ID hoặc bằng Bộ chọn CSS. Đầu tiên, hãy thử ID.
Ví dụ bạn có một trang có một sản phẩm cụ thể và bạn muốn lấy tên của sản phẩm đó. Một trong những cách để làm điều đó là đọc văn bản của một thành phần trang web, đó là Tiêu đề sản phẩm. Hãy nhấp chuột phải vào tiêu đề sản phẩm.
Nhấp đúp vào ID đó, sao chép và dán nó vào trường ID phần tử trong biến GTM của bạn.
Nếu bạn để trống trường Tên thuộc tính, biến Phần tử DOM sẽ trả về văn bản của phần tử trang web. Tuy nhiên, trong một số trường hợp, việc tìm nạp không phải văn bản của một phần tử mà là thuộc tính nhất định của nó có thể hữu ích hơn. Bạn có thể tìm hiểu xem một thành phần web nhất định có thuộc tính gì bằng cách kiểm tra nó
Vì vậy, nếu bạn muốn nhận giá trị của một thuộc tính cụ thể, bạn cần chỉ định tên của thuộc tính đó trong trường Tên thuộc tính.
Để xem biến của bạn đã được tạo đúng cách hay chưa, hãy lưu biến đó, bậthoặc àm mới chế độ Xem trước và Gỡ lỗi, đồng thời kiểm tra giá trị của biến trong tab Biến.
Nhập vùng Bộ chọn CSS nếu không có ID
CSS Selectors cho phép nhắm mục tiêu các thành phần trang web cụ thể để áp dụng kiểu cho chúng (xét cho cùng, CSS là để tạo kiểu cho trang web). Đây là một ví dụ cơ bản về CSS:
.red-button { color: #FF0000; }Đoạn CSS này nêu rõ rằng tất cả các thành phần chứa thuộc tính red-button sẽ có màu đỏ (mã màu #FF0000). Có thể nhắm mục tiêu các phần tử trong CSS nhờ Bộ chọn CSS. Trong ví dụ trên, Bộ chọn CSS là .red-button và nó nhắm mục tiêu tất cả các thành phần thuộc lớp red-button (dấu chấm trong CSS có nghĩa là “lớp”).
Nhưng bộ chọn CSS rất linh hoạt nên chúng cũng có thể được sử dụng trong Phương thức DOM. Nếu muốn chọn một thành phần trang web nhất định và đọc giá trị của nó, bạn có thể viết bộ chọn CSS phức tạp hơn, ví dụ: div.call_to_action > .someClass.
document.querySelector("div.call_to_action > .someClass")Điều gì sẽ xảy ra nếu bạn không tạo được Bộ chọn CSS thích hợp trong lần đầu tiên?
Một giải pháp thay thế nhanh hơn là sử dụng phương thức document.querySelector() trong bảng điều khiển JavaScript của trình duyệt. Chỉ cần mở nó và nhập lệnh sau:
document.querySelector("your_css_selector")Thay thế phần your_css_selector bằng bộ chọn thực tế của bạn. Nhấn enter và (nếu bộ chọn của bạn đúng), nó sẽ trả về phần tử mà bạn muốn nhắm mục tiêu. Nếu bạn nhận được một số kết quả không mong muốn, hãy điều chỉnh Bộ chọn CSS và thử lại.
Cuối cùng thực hiện kiểm tra bằng cách nhập Bộ chọn CSS trong cài đặt của DOM Element Variable (trong giao diện người dùng GTM).
Một số Rủi ro
Nếu bạn định loại bỏ nhiều DOM trong quá trình triển khai theo dõi của mình, bạn cần lưu ý rằng nhà phát triển có thể vô tình thay đổi nội dung nào đó trong nội dung của trang web và có thể phá vỡ các DOM Element variables của bạn trong GTM. Bộ chọn CSS của bạn càng phức tạp thì khả năng phá vỡ các bản cập nhật sẽ càng cao.
Nếu nhà phát triển thay đổi một loại phần tử nhất định (và bạn đang sử dụng nó trong bộ chọn của mình), thì các DOM Element variables của bạn sẽ bắt đầu trả về giá trị rỗng. Do đó, quá trình theo dõi của bạn sẽ bị hỏng.
Vì vậy, trước khi sử dụng Bộ chọn CSS (và biến Phần tử DOM nói chung), bạn cần cân nhắc các lựa chọn của mình và tình hình hiện tại. Khả năng phá vỡ các thay đổi sẽ thấp hơn nếu trang web không được cập nhật liên tục.
Nhưng nếu các nhà phát triển thường xuyên đưa ra một số cải tiến và các thử nghiệm A/B đang chạy hàng ngày. Khi đó bạn có thể lấy dữ liệu bằng cách chọn Data Layer. Kahr năng phá vỡ các thay đổi của Data Layer thấp hơn nhiều so với việc quét DOM.
Biến phần tử DOM khác với biến Sự kiện tự động như thế nào?
Có thể bạn đã nghe đến Biến sự kiện tự động và thắc mắc rằng DOM Element Variable khác với Auto-event Variable như thế nào? Hãy đọc ngay bảng dưới đây:
|
DOM Element Variable
|
Auto-event Variable
|
|
Cho phép bạn tìm nạp văn bản (hoặc thuộc tính) của một phần tử mà khách truy cập đã tương tác. Nếu khách truy cập nhấp vào liên kết, bạn có thể truy cập thuộc tính của phần tử đó.
|
Cho phép bạn truy cập bất kỳ phần tử nào có trên một trang. Bằng cách đó, bạn có thể lấy văn bản hoặc giá trị của một thuộc tính nhất định. Không cần tương tác.
|
Kết luận
Qua bài viết này, bạn đã tìm hiểu về DOM Element Variable trong Google Tag Manager và cách sử dụng nó để lấy thông tin từ các phần tử trên trang web. DOM Element là một công cụ hay trong bộ công cụ GTM của bạn, tuy nhiên, bạn không nên lạm dụng nó. Bạn có điều thắc mắc? Hãy để lại bình luận ngay bên dưới nhé!
Tìm hiểu bài viết liên quan khác:
Nguồn tài liệu dịch: https://www.analyticsmania.com/post/dom-element-variable-in-google-tag-manager/
