Google Tag Manager cung cấp rất nhiều biến mà bạn có thể tùy ý sử dụng, những biến được tích hợp sẵn và do người dùng xác định. Và Click Element là một trong các biến có tính năng mạnh mẽ nhất. Trong bài viết này, tôi sẽ đề cập tất tần tật thông tin về Click Element Variable trong Google Tag Manager.
Video hướng dẫn
Click Element Variable trong Google Tag Manager là gì?
Click Element Variable trong Google Tag Manager là một biến được trả về khi một phần tử nhấp vào. Mặc định, nó bị tắt trong tất cả vùng chứa GTM mới và cần được bật bằng cách đi đến Biến -> Cấu hình (trong phần Biến tích hợp). Sau đó nhấp vào hộp kiểm bên cạnh Click Element.
Nhưng chỉ bật biến sẽ không làm được gì trong chế độ Xem trước và Gỡ lỗi. Bạn cũng phải bật ít nhất một trình kích hoạt “Just Link” hoặc “All element clicks”. Nếu bạn không quen với quy trình này, có thể tìm hiểu thêm về theo dõi nhấp chuột trong Google Tag Manager.
Trong chế độ Xem trước và gỡ lỗi GTM, biến này trông thực sự gây hiểu nhầm và đôi khi thậm chí giống với URL nhấp chuột, nhưng điều này khác xa sự thật.
Click Element trả về một đối tượng được nhấp. Nếu bạn nhấp vào liên kết, biến này sẽ trả về phần tử thực tế mà đã được nhấp. Không chỉ địa chỉ của nó (nếu có) mà còn các thuộc tính và các dữ liệu khác mà nó chứa.
Nhưng bảng điều khiển gỡ lỗi và xem trước Google Tag Manager không hiển thị các thuộc tính bổ sung đó. Do đó, đôi khi, bằng chứng duy nhất cho thấy hai biến này khác nhau là loại của chúng:
Chú ý: Chế độ xem trước GTM hiện có thể hiển thị biến này dưới dạng “chuỗi (string)”.
Dữ liệu Click Element đến từ đâu?
Nó đến từ một số trình sự kiện tự động mặc định của Google Tag Manager. Nếu bạn có ít nhất một trình kích hoạt Just links, All Elements Clicks, Form Submission hoặc Element Visibility, nó cũng được kích hoạt (ở đâu đó trong nền) trình nghe sự kiện tự động tương ứng của nó để bắt đầu nghe một số tương tác nhất định xảy ra trên một trang.
Trình nghe Just links nghe các nhấp chuột vào liên kết. Trình nghe All Element Clicks đang lắng các nhấp chuột của bất kỳ phần tử nào trên một trang (không có trong iFrame). Trình nghe Form Submission đến việc gửi biểu mẫu. Và, như bạn có thể đoán, Element Visibility đang lắng nghe khi một phần tử cụ thể xuất hiện trên màn hình.
Khi những người nghe đó phát hiện ra sự tương tác, họ sẽ đẩy một số dữ liệu nhất định lên Data Layer. Dữ liệu đó có liên quan đến phần tử mà người dùng vừa tương tác. DataLayer.push đó bao gồm các từ khóa sau:
-
gtm.element
-
gtm.elementClasses
-
gtm.elementTarget
-
gtm.elementUrl
-
gtm.elementId
Nếu bạn chuyển đến chế độ Xem trước và gỡ lỗi GTM -> Data Layer, bạn có thể thấy một cái gì đó như thế này (tất nhiên, các giá trị sẽ khác nhau).
Mỗi một trong những khóa đó trong các biến Data Layer có thể được truy cập bằng các biến tích hợp trong GTM (Click Element, Click Classes, Click Target, Click URL, Click ID). gtm.elementClasses, gtm.elementTarget, gtm.elementUrl và gtm.elementId là các chuỗi (đọc “nội dung văn bản”) nhưng gtm.element là một đối tượng chứa nhiều thông tin hơn.
Đến bây giờ, bạn nên ghi nhớ những điều sau:
-
Khi trình xử lý sự kiện tự động (điều này áp dụng cho các lượt nhấp, gửi biểu mẫu hoặc khả năng hiển thị phần tử) đẩy dữ liệu đến Data Layer, một trong các phím được đẩy là gtm.element
-
Biến Click Element có thể truy cập giá trị này trong Data Layer trong GTM
Biến Click Element không phải duy nhất của loại này
Vì vậy, như bạn đã biết, Click Element trả về giá trị được lưu trữ trong Data Layer như dạng khóa gtm.element. Nếu không có khóa tồn tại, biến sẽ trả về không xác định.
Trên thực tế, tất cả các cặp biến Biểu mẫu và Nhấp chuột đều giống hệt nhau. Họ truy cập vào các khóa giống nhau:
-
gtm.elementTarget được truy cập bởi các biến Click Target và Form Target
-
gtm.elementUrl được truy cập bởi các biến Click URL và Form URL
-
gtm.elementClasses được truy cập bởi các biến Click Classes và Form Classes
-
gtm.elementId được truy cập bởi các biến Click ID và Form URL
-
gtm.element được truy cập bởi các biến Click Element và P Form Element.
Để theo dõi số lần nhấp chuột, người dùng GTM phải bật trình kích hoạt nhấp chuột và sau đó kích hoạt các biến nhấp chuột. Quá trình tương tự cũng xảy ra với việc theo dõi biểu mẫu. Nếu muốn sử dụng trình kích hoạt gửi biểu mẫu GTM tích hợp sẵn, bạn cần bật nó rồi bật các biến biểu mẫu.
Tạo các biến tùy chỉnh truy cập cùng giá trị
Bạn có thể tạo các biến do người dùng xác định sẽ hoạt động giống như các biến nhấp chuột và biểu mẫu. Nếu bạn muốn tạo biến thay thế của riêng mình cho biến Click Element, chuyển đến Biến -> Mới -> Biến Data Layer và nhập gtm.element. Đó là tên của khóa được lưu trữ trong Data Layer
Cả hai biến Click Element và Form Element cũng truy cập vào cùng một khóa đó. Vậy là bạn đã hiểu, 3 biến khác nhau trả về cùng một thứ.
Tại sao bạn lại cần sử dụng biến Click Element?
Bạn đã biết rằng biến Click Element trả về một đối tượng mà người dùng đã tương tác (ví dụ: clicked element, displayed element or submitted form). Vậy biến này hữu ích ở đâu? Khi mà bạn cần làm việc với phần tử thực tế.
Trường hợp sử dụng phổ biến nhất là “cùng với bộ chọn CSS”. Nếu bạn muốn theo dõi nhấp chuột cụ thể vào các thành phần trang web nhưng không có thành phần nào trong số đó có ID duy nhất, thì bộ chọn CSS có thể là một giải pháp.
CSS là gì? Bộ chọn CSS là các mẫu cho phép bạn chọn bất kỳ thành phần nào trên một trang. Ví dụ: nếu bạn chỉ muốn theo dõi số lần nhấp chuột của những phần tử có lớp “white-button” nhưng cũng thuộc tiện ích thanh bên màu đỏ của trang web của bạn thì biến Click Classes thông thường sẽ không hoạt động.
Tuy nhiên, nếu bạn kết hợp biếnClick Element cùng với Matches CSS Selector thì điều đó có thể thực hiện được.
Click Element + Matches CSS Selector
Giả sử bạn đang làm việc cho website thương mại điện tử, và bạn muốn theo dõi lượt nhấp của nút Thêm vào dỏ hàng (AddToCart). Nút này không có bất kỳ liên kết nào (do đó trình kích hoạt Just Link không hoạt động). Tất cả những gì chúng ta còn lại trình kích All Element Clicks.
Thật không may, không phải mọi thứ đều dễ dàng như vậy. Một nút bao gồm hai thành phần: văn bản nút và nền/hình chữ nhật của nút.
Nếu hai phần tử đó có ID hoặc Lớp tương tự nhau thì việc sử dụng các biến Click ID hoặc Click Classe vẫn có thể hoạt động. Hãy nhìn vào ảnh chụp màn hình bên dưới.
Văn bản của nút có ID AddToCartText, trong khi nền (hộp) của nút có ID AddToCart .
Tình huống này vẫn rất thuận tiện và bạn có thể tạo trình kích hoạt với một điều kiện duy nhất ( ID lượt nhấp bắt đầu bằng “AddToCart”). Tuy nhiên, đôi khi, mọi thứ có thể trở nên phức tạp hơn khi không có ID hoặc Click Classes hữu ích (đọc: CSS Classes). Điều gì sẽ xảy ra nếu một phần tử thực sự bao gồm 5 phần tử trở lên?
Bạn có thể tạo nhiều trình kích hoạt cho mọi thành phần và gán nó cho một thẻ duy nhất, nhưng đó không phải là cách bạn nên làm. Vùng chứa của bạn phải tối ưu nhất có thể, đó là lý do tại sao chúng ta nên giải quyết vấn đề đó bằng cách tạo một trình kích hoạt nhấp chuột duy nhất và sử dụng Bộ chọn CSS (nếu có thể).
Hãy xem cách thức hoạt động của nó. Chúng tôi sẽ áp dụng bộ chọn CSS để theo dõi số lần nhấp vào nút Thêm vào giỏ hàng (Add To Cart) . Hãy xem mã của nút đó (trong ảnh chụp màn hình bên dưới).
Nút này được tạo bằng phần tử HTML được gọi là button (với ID AddToCart), và phần tử con trực tiếp của nó là <span> chứa văn bản nút
Với một bộ chọn CSS duy nhất, tôi có thể hướng dẫn Google Tag Manager rằng tôi muốn theo dõi lượt nhấp của một phần tử có ID là AddToCart và cũng muốn theo dõi tất cả các phần tử con của nó.
Trong GTM, hãy chuyển đến Trình kích hoạt -> Mới -> Số nhấp chuột -> Tất cả các thành phần và nhập các cài đặt sau:
Hãy lưu ý rằng chúng tôi đang sử dụng Click Element làm biến vì chúng tôi đang kiểm tra toàn bộ phần tử HTML được nhấp dựa trên Bộ chọn CSS. Matches CSS Selector chỉ hoạt động với biến Click Element.
Dấu phẩy có nghĩa là “HOẶC”.
#AddToCart * Bộ chọn CSS có nghĩa là chúng tôi quan tâm đến lượt nhấp chuột của TẤT CẢ các thành phần con của các phần tử có ID AddToCart (khớp chính xác).
Sẽ không dễ dàng để nắm bắt khái niệm về Bộ chọn CSS nếu bạn không có kiến thức trước đó hoặc thậm chí không biết chúng là gì. Tuy nhiên, biết ít nhất những điều cơ bản sẽ thực sự giúp ích cho bạn trong GTM.
Nhưng mặt khác, hãy nhớ rằng Bộ chọn CSS nên được sử dụng một cách thận trọng, nếu không, việc triển khai theo dõi của bạn sẽ rất không ổn định và dễ bị hỏng.
Khám phá đối tượng gtm.element
Vậy dữ liệu khác được lưu trữ trong đối tượng gtm.element là gì? Làm cách nào có thể xem nó nếu chế độ Xem trước và gỡ lỗi GTM không cho phép? Bạn phải sử dụng bảng điều khiển trong các công cụ dành cho nhà phát triển của trình duyệt.
Điều kiện quyết định trước hết để làm việc này:
-
Đã bật ít nhất một trình kích hoạt All Element Clicks trên một trang (mọi cài đặt sẽ hoạt động). Just Links, Form Submission, hoặc Element Visibility cũng sẽ hoạt động.
-
(tùy chọn) Bật chế độ Xem trước và Gỡ lỗi. Điều này không cần thiết nhưng sẽ làm mọi việc dễ dàng hơn một chút.
Nếu bạn đã bật trình kích hoạt nhấp chuột, hãy nhấp vào bất kỳ thành phần nào trên trang để sự kiện Nhấp chuột (Click) xuất hiện trong bảng điều khiển gỡ lỗi GTM. Nó có xuất hiện không? KHÔNG? Sau đó làm mới chế độ xem trước và đảm bảo rằng bạn đã thực sự bật ít nhất một trình kích hoạt nhấp chuột.
Nếu sự kiện Click thực sự xuất hiện thì thật tuyệt. Bây giờ hãy truy cập Công cụ dành cho nhà phát triển của trình duyệt và mở Bảng điều khiển. Trên Chrome (Windows), nhấn F12 rồi vào Console.
Nhập dataLayer . Và nhấn Enter
Nhấp vào hình tam giác màu đen để mở rộng. Đây là danh sách của tất cả dataLayer.push đã xảy ra trong một trang.
Chọn tùy chọn gtm.click (nếu bạn đang làm với trình kích hoạt All Element Clicks). Nếu bạn đang làm với trình kích hoạt Just Links, tên sự kiện là gtm.linkClick. Tên sự kiện The Form Submission là gtm.formSubmit. Tên sự kiện Element Visibility là gtm.elementVisibility.
Bạn thấy nhiều sự kiện gtm.click? Đó là vì bạn đã nhấp vào nhiều thành phần trên một trang. Nếu bạn muốn kiểm tra một sự kiện cụ thể mà bạn cũng thấy trong chế độ gỡ lỗi GTM, hãy xem xét kỹ hơn con số đó. Trong chế độ xem trước và gỡ lỗi con số đó sẽ lớn hơn 1. Ít nhất đó là cách mọi thứ thường diễn ra nếu nhà phả triển không thực hiện một số sửa đổi với DataLayer.
Dù sao, khi bạn phát hiện đúng sự kiện, hãy mở rộng sự kiện đó bằng cách nhấp vào hình tam giác màu đen bên cạnh sự kiện đó.
Mở rộng đối tượng gtm.element
Đây là nội dung được trình nghe đẩy tới Data Layer khi bạn nhấp vào phần tử.
Nhấp vào hình tam giác màu đen (bên cạnh gtm.element) và bạn sẽ thấy RẤT NHIỀU phím mà bạn có thể truy cập. Mặc dù phần lớn trong số chúng có vẻ không sử dụng được đối với bạn nhưng vẫn có một số điều đáng nói.
Nếu đi sâu hơn vào khóa gtm.element đó và mở rộng parentElement rồi đến className, thì bạn sẽ có thể truy cập vào lớp của phần tử gốc (ví dụ: nếu phần tử đó được nhấp vào)
Có thể áp dụng tương tự cho parentElement và chọn id.
Vậy làm thế nào để bạn có thể sử dụng thông tin đó trong Google Tag Manager? Bạn chỉ cần tạo một biến Data Layer và xác định đường dẫn đầy đủ đến khóa mà bạn truy cập (bắt đầu với gtm.element).
Trong trường hợp ví dụ nêu trên, bạn nên nhập gtm.element.parentElement.className.
Điều này cũng có thể áp dụng cho phần tử có giao diện được theo dõi bởi trình kích hoạt khả năng hiển thị phần tử hoặc biểu mẫu, được theo dõi bởi trình kích hoạt GTM Form Submission.
Kết luận
Bài viết trên đã giúp bạn cập nhật thêm thông tin về Click Element Variable trong Google Tag Manager. Hãy nghiên cứu thật kỹ để có thể tận dụng được những tính năng hữu ích của biến này. Có bất kỳ câu hỏi gì, bạn hãy để lại bình luận ngay bên dưới.
Nguồn tài liệu dịch: https://www.analyticsmania.com/post/click-element-variable-in-google-tag-manager/
