Trước khi tiếp tục
Trong bài viết này, chúng ta chỉ mới “chạm nhẹ” vào việc làm việc với JavaScript. Nếu bạn muốn tìm hiểu sâu hơn và nâng kỹ năng Google Tag Manager (GTM) của mình lên một tầm cao mới, hãy tham khảo khóa học JavaScript for Google Tag Manager của tôi.
Đây không phải là Custom JavaScript Variable
Tôi nhận thấy rằng một số người thường nhầm lẫn giữa JavaScript variables và Custom JavaScript variables trong Google Tag Manager. Đây là hai khái niệm hoàn toàn khác nhau.
JavaScript Variable dùng để lấy giá trị của một biến toàn cục (global variable), ví dụ như Page Title, Page URL, v.v.
Trong khi đó, Custom JavaScript Variable là một hàm (function) có thể phức tạp hơn nhiều, ví dụ: trả về nội dung được click nhưng chuyển thành chữ thường, hoặc lấy giá trị của một trường trong form, v.v.
Mô tả ngắn gọn
Một mô tả khá phổ biến trên Internet: JavaScript variable trả về giá trị được lưu trong biến JavaScript toàn cục mà bạn chỉ định.
Thừa nhận đi, nếu bạn mới làm quen với JavaScript hoặc chưa có kiến thức nền tảng, câu mô tả này có thể khiến bạn có thêm nhiều câu hỏi hơn là câu trả lời.
Biến JavaScript toàn cục (Global JavaScript Variable) là gì?
Tôi hứa sẽ cố gắng giải thích đơn giản nhất có thể, vì vậy hãy kiên nhẫn nhé. Trước khi đi sâu hơn, bạn cần hiểu về phạm vi (scope). Trong JavaScript, có hai loại phạm vi:
- Local scope (phạm vi cục bộ)
- Global scope (phạm vi toàn cục)
Các biến được khai báo bên trong một hàm JavaScript sẽ trở thành biến cục bộ (local), nghĩa là chúng không thể được truy cập (không nhìn thấy được) từ bên ngoài hàm đó. Hãy xem ví dụ dưới đây:
// code ở đây không thể sử dụng biến authorName
function myFunction() {
var authorName = “Julius”;
// code ở đây có thể sử dụng biến authorName
}
Biến authorName chỉ có thể được truy cập bên trong hàm myFunction.
Ngược lại, nếu một biến được khai báo bên ngoài hàm, nó sẽ trở thành biến toàn cục (global). Biến toàn cục có phạm vi toàn cục, nghĩa là tất cả các script và hàm trên trang web đều có thể truy cập được. Hãy sử dụng lại ví dụ trên nhưng đặt biến bên ngoài hàm:
var authorName = “Julius”;function myFunction() {
// code ở đây có thể sử dụng biến authorName
}
Điều này liên quan gì đến JavaScript Variable trong Google Tag Manager?
JavaScript Variable trong Google Tag Manager có thể lấy (fetch) giá trị của bất kỳ biến toàn cục nào đang tồn tại tại thời điểm đó trên trang.
Có những ví dụ hữu ích nào về JavaScript Variable không?
Nếu bạn đã từng làm việc với Google Tag Manager trước đây, rất có thể bạn đã sử dụng biến Page Title (cũng đã được đề cập trong bài viết này). Tất cả những gì bạn cần làm là nhập document.title vào phần cài đặt của JavaScript Variable và… xong!
JavaScript Variable – Page Title
Nhưng đó không phải là ví dụ hữu ích duy nhất. Dưới đây là một vài ví dụ khác:
navigator.language(Ngôn ngữ trình duyệt).navigator.userAgent(Đúng vậy, chính là user agent của bạn).document.referrer(Địa chỉ của trang trước đó — hoặc chỉ hostname, tùy vào cấu hình của trang đã truy cập trước đó. Biến này có cùng mục đích với biến HTTP Referrer được tích hợp sẵn).document.URL(URL đầy đủ của trang hiện tại, bao gồm cổng, fragment, tham số truy vấn, v.v.).
Bạn có thể tìm danh sách các biến toàn cục (global variables) tiêu chuẩn khác tại trang tài liệu chính thức của JavaScript. Trên trang đó có một bảng liệt kê nhiều thuộc tính (properties) khác nhau, bạn có thể tự do khám phá.
Ví dụ, nếu bạn quan tâm đến đối tượng document, hãy nhấp vào liên kết See Document Object.
document object
Bạn sẽ thấy rất nhiều thuộc tính và phương thức (properties/methods) thuộc về đối tượng document. Trong số đó có document.title và document.URL.
document.title và document.URL
Bạn chỉ cần nhập các tên thuộc tính này vào phần cài đặt của JavaScript Variable trong Google Tag Manager.
JavaScript Variable – Page Title
CẬP NHẬT: Tôi đã đăng một hướng dẫn khác về biến này, mở rộng thêm nhiều khả năng trong việc lấy dữ liệu. Bài viết đó có tên là: How to get more data about the user with JavaScript variable.
Liên kết hữu ích
Nếu bạn hoàn toàn mới với JavaScript, những tài nguyên sau đây sẽ là điểm khởi đầu tốt để hiểu rõ hơn về khái niệm scope trong JavaScript:
- Video hướng dẫn 5 phút về sự khác nhau giữa biến local và global (Cấp độ: người mới bắt đầu).
- Bài viết về JavaScript scope trên W3Schools.com (Cấp độ: người mới bắt đầu).
- Danh sách các biến toàn cục tiêu chuẩn (đây là cùng một liên kết đã được đề cập trước đó trong bài viết này).
Thêm các Global Variables
À, còn một điều nữa. Nếu bạn muốn xem những Global Variables nào đang có sẵn trên website của mình, hãy mở Developer Console của trình duyệt (ví dụ trên Chrome), sau đó gõ window và nhấn Enter.
Khi đó, bạn sẽ thấy một đối tượng Window. Nhấp vào biểu tượng tam giác màu đen bên cạnh Window, bạn sẽ thấy danh sách các biến JavaScript toàn cục (global variables).
Giả sử vì một lý do nào đó, bạn quan tâm đến giá trị của vid, đây là một key nằm trong đối tượng gaGlobal.
Trong trường hợp đó, bạn cần nhập gaGlobal.vid làm tên biến toàn cục trong phần cài đặt của JavaScript Variable trong Google Tag Manager.
Vậy là xong. Bạn có biết thêm ví dụ hữu ích nào khác về biến này mà chưa được đề cập trong bài viết không? Tôi rất mong được nghe ý tưởng hoặc quan điểm của bạn. Phần bình luận luôn sẵn sàng chào đón bạn.
Tài liệu tham khảo:
