Google analytics 读取HTML元素

我试图在谷歌分析中创建一个事件，该事件基于使用tag manager提交的表单

我最初试图设置一个表单提交监听器，但由于存在JS验证，并且表单是通过JS提交的，所以我继续尝试单击监听器。（基本上是在不让开发团队参与的情况下解决这个问题。有人告诉我，这就是为什么标记没有启动的原因，b/c表单提交事件由JS执行。最终我将不得不这样做，b/c我不想在验证发生之前跟踪事件）

因此，我在表单提交按钮上有一个点击监听器，它可以很好地触发事件。但是，我尝试使用自定义JS宏来读取此表单中两个表单字段框的选定值

但出于测试目的，在我尝试读取这些特定值之前，我只是尝试从表单中读取任何数据。这是我正在启动的宏。我也将{{firstName}}和{{lastName}定义为宏。它们是HTML输入字段，具有唯一id。它们是定义为DOM元素的宏，具有各自的id：名字和姓氏

function() {
   var firstName = {{firstName}}.value;
   var lastName = {{lastName}}.value;

   var myForm = {{Ajax Contact Form}};

   console.log({{Ajax Contact Form}});
   console.log("Element Classes: " + myclass);
   console.log({{firstName}});
   console.log({{lastName}});

   return firstName + '-' + lastName;
}

但它没有捕获任何数据。直到表单提交后3秒，我才清除表单字段，并且这些数据已经写入。我已将打印内容的屏幕截图附加到控制台

同样，这里我没有使用表单提交监听器，我使用的是单击事件监听器，我只是尝试在单击按钮时从一些表单元素中读取一些值

图像链接

更新

---

我开始认为我需要一个自定义HTML标记。因此，当我的点击规则被触发时，它会找到我需要的表单值，创建一个虚拟URL，并通过这个新的自定义HTML标记将其推送到数据层。然后呢？创建另一个带有“事件”或其他跟踪类型的Google Analytics标签？还是我在这里偏离了方向？

我在使用DOM元素宏时遇到了问题

尝试使用js获取表单值：

function() {
   var firstName = document.getElementById('first-name').value;
   var lastName = document.getElementById('last-name').value;

   var myForm = {{Ajax Contact Form}};

   console.log({{Ajax Contact Form}});
   console.log("Element Classes: " + myclass);
   console.log(firstName);
   console.log(lastName);

   return firstName + '-' + lastName;
}

让我知道那有什么用