Question

我有form个onsubmit函数调用，尝试使用.append()向页面添加一些转换像素。

表单submit正在触发并在像素有机会触发之前将用户重定向到页面（在Chrome网络调试器中显示为已取消的请求）。

我曾尝试使用setTimeout()等一些东西，但我似乎无法正常工作。

我知道我可以使用onclick事件并检查输入密钥，然后在setTimeout电话上提交表单。然而，这看起来有些笨拙。

此外，我无法访问表单提交的页面。无法将像素添加到此页面。

有没有更好的方法？

Answer 1

我认为跟踪转化的最佳选择是在提交表单后从显示的页面中请求这些像素。但如果您无法控制该页面，请执行以下操作：

$('form').submit( function(e){
    e.preventDefault(); // do not submit the form just yet
    var $t = $(this), 
        trackingUrl = 'http://placekitten.com/20/10'; 
        $('<img />')
            .on('load', function(){ // when the image loads...
                $t.unbind('submit')  // ...unbind the event listener preventing an endless loop
               .submit() // and submit the form
        }).attr('src', trackingUrl );
});

编辑：如果跟踪图片无法加载，您还应该添加一些预防措施（例如onerror事件），否则表单将无法提交。

Answer 2

我遇到了类似的问题，因为我试图在用户看到表单时触发跟踪（img）像素（但还没有填写/提交它）。用户单击按钮后显示我的表单，从该站点上的多个帖子收集的解决方案是在我的代码中添加以下脚本。

<script>
function firepixel()
{
trackingUrl = 'http://mydomain/adopt.php?type=popup';
$('<img />').on('load').attr('src',trackingUrl);

}
</script>

然后，当用户点击触发弹出窗体的按钮时，我调用了该函数。

<a class="button" onclick="firepixel()" href="#" data-reveal-id="myModal">Click Here to     Download eBook</a>

jQuery .append（）表单提交上的一个像素

2 个答案: