如何在点击时触发 JavaScript 像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16049403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fire JavaScript pixel on click
提问by user2288602
I am trying to get a Javascript pixel
我正在尝试获取 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>
to fire afterthe click of a submit button similar to what you can find on this page. (I know this might require building a simple "thank you" page, which is okay, but the pixel can't fire onClick.
单击提交按钮后触发，类似于您在此页面上可以找到的内容。（我知道这可能需要构建一个简单的“谢谢”页面，这没问题，但像素无法触发 onClick。
Additionally, I would need the text from the different fields passed in to the v1, v2, etc. variables to be captured by the pixel.
此外，我需要将来自不同字段的文本传入 v1、v2 等变量，以便像素捕获。
<p>First Name <span class="orng">*</span><br />
<span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
I am a bit new to this and am not a developer, but understand how it works conceptually so any help is greatly appreciated!
我对此有点陌生并且不是开发人员，但了解它在概念上的工作原理，因此非常感谢任何帮助！
回答by JR Smith
From working with pixels before, here's what I'd recommend as a broad solution. Start off with a JavaScript String variable that's collecting the appropriate information to go along with ?mt_id=123456789&mt_adid=123456&v1=&v2=&v3=&s1=&s2=&s3=. If you already have that built, great.
从之前使用像素开始，这是我推荐的广泛解决方案。从一个 JavaScript 字符串变量开始，它收集适当的信息以配合 ?mt_id=123456789&mt_adid=123456&v1=&v2=&v3=&s1=&s2=&s3=。如果你已经建好了，那太好了。
<script type='text/javascript'>
var track = new Image();
track.src="http://pixel.tag.com/event/js?self=" + dataString;
</script>
If it would be helpful to see another example of someone working through the same problem. Try reading through this forum post.
如果看到另一个解决同一问题的人的例子会有所帮助。尝试通读此论坛帖子。
回答by Norguard
The trick here isn't in the "tracking pixel", but rather, is in populating the values of the parameters.
这里的技巧不在于“跟踪像素”，而在于填充参数的值。
The issue you're going to have here is that you're now going to have to build a string, which points to the .js file, and then build the parameters and values into strings, concatenate them all, build a script tag and point the url at your built values, so an ugly (by JS-purist standards) solution might look like this:
您将在这里遇到的问题是您现在必须构建一个指向 .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>
When the button is clicked, the values will be collected from the form, they'll be added to the URL, and the script will be added to the page.
单击按钮时，将从表单中收集值，将它们添加到 URL，并将脚本添加到页面。
Here's the next problem:
这是下一个问题：
If this is a and you're capturing a click which takes you to the next page, by default, then you have to cancel the form-submission, otherwise, the request for the JS file is going to be ignored (why load new stuff when you told the browser you want to go to the next page?).
如果这是 a 并且您正在捕获将您带到下一页的点击，则默认情况下，您必须取消表单提交，否则，将忽略对 JS 文件的请求（为什么要加载新内容当您告诉浏览器您要转到下一页时？）。
So then you need to modify the button.onclickto be something like:
因此，您需要将其修改为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);
};
Now when you click the button, it will prevent the form from submitting (taking you to the next page) until you collect all of the form values, stuff them into the URL for the script, putting the script on the page, and waiting for the server to get the request and respond.
现在，当您单击按钮时，它将阻止表单提交（带您进入下一页），直到您收集所有表单值，将它们塞入脚本的 URL，将脚本放在页面上，然后等待服务器获取请求并响应。
This is done in a very, very ugly cross-browser (IE6+/Safari3+) compatible format.
If you've got a decent JS guy there, get him to do better than this, or I'll cry...
这是以非常非常丑陋的跨浏览器 (IE6+/Safari3+) 兼容格式完成的。
如果你有一个像样的 JS 家伙，让他做得比这更好，否则我会哭......
If you need to collect the data on the next page (say you need to calculate your actual profit on the sale, after the server processes payment), you're better off doing this in the server's language:
如果您需要在下一页收集数据（假设您需要在服务器处理付款后计算销售的实际利润），最好使用服务器的语言执行此操作：
// php
"<script src=\"....?v1=$profit&v2=$product_id\"></script>";
Hope that helps.
希望有帮助。
