Adob​​e DTM：基于事件的规则来跟踪表单提交

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

瞄准形式

首先，根据你的截图贴主场迎战代码，你的事件将不会触发，因为格式标记没有“PopupForm类”（或任何id属性的id属性在所有）（你确实有作为一个父div的ID，但这不是你的目标）。所以，你需要删除它。

如果您只想定位表单，如果它位于div内，则需要将其添加为规则条件。 规则条件>准则，选择“数据>自定义”，然后单击添加准则。

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

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规则来实现实际的网站功能，但即使如此，也只是希望你意识到这是一个“小恶”解决方案，而不是“好”的解决方案。

话虽如此，您可以再次转向自定义条件，以确保填写所有表单域。这是一个快速和肮脏的自定义规则条件来演示。同样，在规则条件>标准，选择“数据>自定义”，然后单击添加条件（所以你现在有另一个自定义代码框）。添加以下内容：

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

这段代码再次使用jQuery来抓住目标形式的表单域，并通过他们循环，如果一个被发现，但有一个值设置一个标志设置为false。再次，这是一种快速和肮脏，并将根据您当前的形式示例工作，但您可能需要在实践中进行扩展。