Question

我正在尝试获取Javascript像素

<script language='JavaScript1.1' src='http://pixel.tag.com/event/js?mt_id=123456789&mt_adid=123456&v1=&v2=&v3=&s1=&s2=&s3='></script>

点击提交按钮后点击，类似于此page上的内容。（我知道这可能需要构建一个简单的“谢谢”页面，这没关系，但像素无法点击onClick。

另外，我需要传入v1，v2等变量的不同字段的文本才能被像素捕获。

First Name * <input type="text" name="first-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> 

我对此有点新意并且不是开发人员，但是从概念上理解它是如何工作的，所以非常感谢任何帮助！

Answer 1

从使用像素开始，这是我推荐的广泛解决方案。从一个JavaScript字符串变量开始，该变量收集适当的信息以便与之一起使用？mt_id = 123456789＆amp; mt_adid = 123456＆amp; v1 =＆amp; v2 =＆amp; v3 =＆amp; s1 =＆amp; s2 =＆amp; s3 =。如果你已经建好了，那很好。

<script type='text/javascript'>
    var track = new Image();
    track.src="http://pixel.tag.com/event/js?self=" + dataString;
</script>

如果看到另一个解决同一问题的人的例子会有所帮助。请仔细阅读this forum post。

Answer 2

这里的技巧不在“跟踪像素”中，而在于填充参数的值。

你将要遇到的问题是你现在必须构建一个指向.js文件的字符串，然后将参数和值构建到字符串中，将它们连接起来，构建一个脚本标记并将url指向您的构建值，因此丑陋（通过JS纯粹标准）解决方案可能如下所示：

<form id="ContactForm">
    <input name="first-name">
    <input name="last-name">
    <button id="my-button" type="submit">sign up</button>
</form>

<script>

    // the button you want to listen to
var button = document.getElementById("my-button"),
    // assuming your form has the id "ContactForm"
    contact = window.ContactForm,

    // create a <script> tag, like the one that's hard-coded now
    script = document.createElement("script"),
    // find whatever element contains the first <script> on the page -- usually <head> or <body>
    parent = document.getElementsByTagName("script")[0],

    // as much of the tracking URL that you know will NEVER change
    url = "//analytics.tag.com/event/tracking.js?mt_id=123456&mt_adid=123abc";


button.onclick = function () {

    var full_url = "",
        v1,
        v2;

    v1 = contact["first-name"];
    v2 = contact["last-name"];

    full_url = url + "&v1=" + v1 + "&v2=" + v2;

    script.src = full_url;
    parent.appendChild(script);

};

</script>

单击该按钮时，将从表单中收集值，它们将被添加到URL中，并且脚本将添加到页面中。

这是下一个问题：

如果这是一个并且您正在捕获一个单击，它将您带到下一页，默认情况下，您必须取消表单提交，否则，将忽略对JS文件的请求（为什么当您告诉浏览器要转到下一页时加载新内容？）。

那么你需要将button.onclick修改为：

button.onclick = function (e) {
    // IE < 9 supports "window.event", instead of an event-object as a parameter
    e = e || window.event;

    if (e.preventDefault) {
        e.preventDefault();
        e.stopPropagation();
    } else {
        // IE < 9
        e.cancelBubble = true;
        e.returnValue  = false;
    }


    /*  DO ALL OF YOUR DATA-COLLECTION AND STRING-BUILDING HERE
        ie: most of the first version of this function (all before `script.src =...`)
     */


    // after the script loads, fire contact.submit
    script.onload = contact.submit;
    // if the script errors out (404/etc) fire contact.submit
    script.onerror = contact.submit;
    // GhettoIE fix, for when scripts don't support "onload"
    script.onreadystatechange = function () {
        if (script.readyState === 4) { contact.submit(); }
    };

    /* SET THE SCRIPT URL HERE */
    script.src = full_url;
    parent.appendChild(script);
};

现在，当您单击该按钮时，它将阻止表单提交（带您到下一页），直到您收集所有表单值，将它们填入脚本的URL，将脚本放在页面上，并等待服务器获取请求并做出响应。

这是以非常非常难看的跨浏览器（IE6 + / Safari3 +）兼容格式完成的如果你在那里有一个像样的JS人，让他做得比这更好，或者我会哭...

如果你需要在下一页收集数据（比如你需要在服务器处理付款后计算出售时的实际利润），你最好用服务器的语言来做这件事：

// php
"<script src=\"....?v1=$profit&v2=$product_id\"></script>";

希望有所帮助。

如何在点击时触发JavaScript像素

2 个答案: