无需更改网址即可提交 Google 跟踪代码管理器表单

Question

场景：

页面上的基于Ajax的"联系我们"表单www.example.com/contact-us

表单提交成功：页面保持不变，显示感谢文本。(在事物的HTML方面，style=display：none的属性从div中删除，它显示了感谢页面。

<div id="123" style="display:none"> Thank you </div>

方法 1：我尝试了表单提交触发器，但是，每次用户单击"提交"按钮时都会触发。此外，它还会触发无效表单提交尝试的代码

方法 2：我在 GTM 中选择了表单验证。但是，不会触发gtm.FormSubmit事件。因此，代码永远不会被触发。

方法3：我创建了一个DOM元素变量，在初始页面加载时，它为我提供了divid="123"的样式属性值。

我的期望是在表单提交时，我将获得div id 123 的样式属性的更新值。但是，该值永远不会更新。

如何使触发器仅在单击提交按钮后style="display:none"不存在时触发？

Answer 1

执行此操作的最佳方法是在表单提交成功时手动显式地将事件推送到 GTM 数据层。您通常会在 Ajax 回调中执行此操作，如下所示

dataLayer.push({'event' : 'form_submitted'});

然后，在 GTM 中，您将创建一个类型为自定义事件的触发器，并输入事件名称 (form_submitted)。这将导致您的代码在将此事件推送到数据层时触发。