在 gtm.formsubmit 上访问 Google 跟踪代码管理器数据层字段值

Question

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

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

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

Answer 1

我相信你想要完成的事情是不可能的。您在第一个屏幕截图中看到的这种表示不是 GTM 独有的东西。如果您在 Javascript 中的任何数组中添加一个表单，您将获得该格式。并不是元素被转换成数组，只是在控制台上显示的那样。

应该仍然可以使用您提供的代码访问该元素，因为 HTML 元素仍将被视为数组，但我相信这不是您想要实现的目标. （我在这里猜测被选中的元素不会总是数组中的第二个）

也就是说，您应该可以通过元素本身访问您想要的值。我不能确定你需要使用什么结构，因为我没有可用的 HTML，但你可以使用 querySelector 来获取你想要的元素。

您可以使用“表单元素”GTM 变量通过自定义 HTML 标签访问表单，然后通过它查询选定的值。

Answer 2

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

是的，当直接显示一个 DOM 元素时，控制台更喜欢呈现它的 HTML/XML 视图，但是在 JS 中你正在为这个 DOM 元素使用一个对象，在这里HTMLFormElement.

例如，在使用 dir 和 dirxml 的 chrome 控制台中，您可以将每个元素分别检查为 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
}

在 gtm.formsubmit 上访问 Google 跟踪代码管理器数据层字段值

Access Google Tag Manager dataLayer field values on gtm.formsubmit

javascript

google-tag-manager

google-datalayer