admin管理员组文章数量:1310169
I am trying to get a Javascript pixel
<script language='JavaScript1.1' src=';mt_adid=123456&v1=&v2=&v3=&s1=&s2=&s3='></script>
to fire after the 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.
Additionally, I would need the text from the different fields passed in to the v1, v2, etc. variables to be captured by the pixel.
<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!
I am trying to get a Javascript pixel
<script language='JavaScript1.1' src='http://pixel.tag./event/js?mt_id=123456789&mt_adid=123456&v1=&v2=&v3=&s1=&s2=&s3='></script>
to fire after the 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.
Additionally, I would need the text from the different fields passed in to the v1, v2, etc. variables to be captured by the pixel.
<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!
Share Improve this question edited Jun 5, 2018 at 14:07 Chuck Le Butt 48.8k62 gold badges209 silver badges297 bronze badges asked Apr 17, 2013 at 0:20 user2288602user2288602 111 gold badge1 silver badge3 bronze badges 7-
Oops! Google Chrome could not find pixel.tag.– Danny Beckett Commented Apr 17, 2013 at 0:33 - JS pixel = javascript – user2288602 Commented Apr 17, 2013 at 0:40
- 2 @user2288602 That still makes no sense... – HellaMad Commented Apr 17, 2013 at 0:41
- What doesn't make sense? – user2288602 Commented Apr 17, 2013 at 0:49
- 1 @user2288602 What is a "JavaScript pixel"? This phrase is ambiguous, and needs further explanation. – Anderson Green Commented Apr 17, 2013 at 1:26
2 Answers
Reset to default 3From working with pixels before, here's what I'd remend 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.
<script type='text/javascript'>
var track = new Image();
track.src="http://pixel.tag./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.
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:
<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./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.
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?).
So then you need to modify the button.onclick to be something like:
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.
This is done in a very, very ugly cross-browser (IE6+/Safari3+) patible format.
If you've got a decent JS guy there, get him to do better than this, or I'll cry...
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.
本文标签： imageHow to fire JavaScript pixel on clickStack Overflow
版权声明：本文标题：image - How to fire JavaScript pixel on click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741839737a2400425.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论