javascript - 访问 gtm.formsubmit 上的 Google 跟踪代码管理器 dataLayer 字段值

Question

我试图在提交表单时获取表单上下拉字段的选定值。通过Chrome中的开发者控制台，我可以在GTM dataLayer中看到我想要的值。它位于屏幕截图中的 gtm.element[1] 内。

但是，当我使用 dataLayer[5]["gtm.element"] 访问该内容时，控制台返回表单本身的 HTML，而没有 JSON 结构或我需要访问的其余数据.

有没有办法访问 gtm.element 并保留第一个屏幕截图中的 JSON 结构？

Answer 1

Is there a way to access gtm.element and keep the JSON structure in the first screenshot?

是的，当直接显示 DOM 元素时，控制台更喜欢渲染其 HTML/XML View ，但在 JS 中，您正在使用此 DOM 元素的对象，这里是 HTMLFormElement .

例如，在 Chrome 控制台中使用 dir和 dirxml，您可以分别以 JSON 或 XML 形式检查每个元素:

 > f=document.querySelector("form");
 // or f = dataLayer[5]["gtm.element"]
 > typeof f
 > console.dir(f)
 > console.dirxml(f)
 > console.dir(f[1])
 > console.dir(f.elements[1])
 

(HTMLFormElement[#] 语法是 HTMLFormElement.elements[#] 的快捷方式，因为表单本身并不是直接的类似数组的集合。)

因此 dataLayer[5]["gtm.element"][1] 是所需的 select 元素，并且可以使用一个简单的 GTM JS 变量来获取其值像:

// MyformSubject requires the corresponding auto event variable
function(){
   return {{Form Element}}[1].value
}