Question

我正在尝试使用DTM中基于事件的规则跟踪表单的表单提交。我知道理想的方法是通过直接调用规则进行操作，但需要通过数据元素跟踪表单字段，然后再进入eVar。

表单代码在页面上显示如下：

<div style='display:none'>
   <div id="popupform">
    <div class="form_container">
     <img src="/images/New-Offer-Pop-Up-Without-form_18-Jan-16.jpg" style="width: 100%;">
    <form class="offerform" accept-charset="UTF-8" action="/site/sendtohs">
      <div class="formrow"><input type="text" name="popup_fullname" class="new-input1 required" placeholder="Name" /></div>
      <div class="formrow"><input type="email" name="popup_email" class="new-input1 required" placeholder="Email" /></div>
      <div class="formrow"><input type="number" name="popup_phone" class="new-input1 required" placeholder="Mobile" 
      minlength="10" maxlength="15" /></div>
      <input type="hidden" name="popup_url" value="/"  /></br>
      <p align="right"><input class="tbn newtbn" type="submit" name="submit" value="Submit"  /></p>
    </form>
    </div>
    <div class="offerform_success" style="display: none">
        <img src="/images/Thank-you-pop-up-new-xyz.jpg" style="height:        440px; width: 100%; position: absolute;width: 99%;">
    </div>
    </div>
</div>

DTM中基于偶数的规则是： DTM Rule

单击“提交”按钮时会触发事件，但规则不会验证表单字段是否已填充。任何提示如何在DTM中向表单提交事件添加验证。

Answer 1

定位表格

首先，根据您的屏幕截图与发布的代码，您的事件不会触发，因为表单标记的id属性不是＆＃34; popupform＆＃34; （或任何id属性）（你确实将它作为父div中的id，但那不是你的目标）。所以，你需要删除它。

如果您只希望将表单定位到div中，则需要将其添加为规则条件。在规则条件＆gt;下标准，选择＆＃34; 数据＆gt;自定义＆＃34;，然后点击添加标准。

在代码框中，添加以下内容：

if ($(this).parents('#popupform').length)
  return true;
return false;

注意：我在这里使用jQuery语法，以简化和轻松实现跨浏览器兼容性。总体目标是this引用目标表单，并且您想要检查它是否在popupform id的html元素中。上面的jQuery遍历表单的祖先链来寻找它。如果找到了，我们会返回true。否则我们返回false。最终，如果您希望自定义规则条件通过，则应返回true，否则返回false。另请注意，如果您有多个规则条件（您将参见下文），所有条件必须返回true才能触发规则。如果您的站点不使用jQuery，或者您不想为此使用jQuery，那么您需要按照上述概念编写自己的代码。

验证表单字段

在我开始讨论之前，我应该注意的一件事是，您不应该依赖客户端表单验证表单。它非常容易禁用/绕过它。您应该在提交表单时使用服务器端代码进行表单验证，然后在服务器端验证后弹出您需要弹出的任何内容（形成完整跟踪或w / e）。

也许您已经有服务器端验证，但无论出于何种原因，您无法控制在验证后弹出dtm规则，这是您的下一个最佳选择。好吧，希望你唯一能做的就是弹出跟踪而不是使用dtm规则来实现真正的网站功能，但即使这样，也只是想让你意识到这是一个“小恶魔”＃34;解决方案，而不是＆＃34;好＆＃34;解。

话虽如此，您可以再次转到自定义条件以确保填写所有表单字段。这是一个快速而肮脏的自定义规则条件来演示。同样，在规则条件＆gt;下标准，选择＆＃34; 数据＆gt;自定义＆＃34;，然后点击添加条件（这样您现在将拥有另一个自定义代码框）。添加以下内容：

var isFieldsFilled=true;
$.each($(this).serializeArray(),function(i,v) {
  if (!v.value||v.value=='')
    isFieldsFilled=false;
});
return isFieldsFilled;

此代码再次使用jQuery来获取目标表单的表单字段并循环遍历它们，并在发现没有值的情况下将标志设置为false。同样，这有点快速和肮脏，并将根据您当前的表单示例工作，但您可能需要在实践中扩展它。

Adobe DTM：用于跟踪表单提交的基于事件的规则

1 个答案: