The best approach to write data back to the server!

[andyscraven]

Hi I have an application and one of it's functions is to split text various elements on a web page. When the visitor clicks on a Call To Action button (there may be more than one on the page) I want to be able to write back to the server the elements that were displayed so that they can analyse which elements have a better Click Through Rate. Is it the Green, Red or Blue Button? Which Title is performing best? Etc... So far I have found putting an onclick() on all of the exit points and a function that uses,: xmlhttp.open("POST","http://localhost:8888/dl/wd.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("all my data∧ maybe some more"); The Onclick is like this: <div class="cta" onclick="storeStats()"> and I also have it inside a HREF: <a href="outbound link" onclick="storeStats()"> UPDATE: I have edited this post a few times as I debug the situation and it seems I have solved it but I am not sure it is a good solution. If I change the ASync paramter to false everything works correctly. If I leave ASync as true it doesn't work as we leave the page before it has chance to do it. I added xmlhttp.onreadystatechange=function(){ alert(xmlhttp.readyState);} and when the href="#" it alerts 4 times with 1, 2, 3 and then 4, which means all was well. BUT when the href contains a real outbound link it alerts 1 then 2 but then moves away from the page, so it must be doing it before the xmlhttp.send(). The reason I have not redirected the exit points to a PHP file and then onward to the destination is that the outbound links are going back to different tracking software and some of them override the outbound links using cookies, so I want to leave that part alone. Is it bad practise to use ASync as false so it halts progress until my data is written? Or am I doing something wrong so I can use AJAX correctly? Thanks everyone for reading. Andy

Edited June 4, 2013 by andyscraven

[jeffman]

It's the link you're using incorrectly. A link is designed to load a new document at the location pointed to by the href property. That is a link's job. If all you need is an element to respond to a click event, use a div or a span or a <p> or anything else that doesn't behave like a link. Change its appearance using CSS.

[andyscraven]

thanks for the reply. The link I was clicking had the onClick() in a div but it still left the page before it had stored the data. Onyl changing no Synchronous seems to fix it. Is that bad?

[jeffman]

You asked about bad practice, not what works. Best practice says to use elements for the purpose they were designed. Links were not designed to do what you're asking this one to do. Using an AJAX object synchronously to fix poorly organized code is also not best practice. There are good reasons for synchronous communication, but this doesn't sound like one of them. Think of it this way. A hammer is made to drive nails. A screwdriver is made to drive screws. If you break off a piece of a hammer, it can probably drive screws pretty well. But you know in your heart that this is not the ideal solution, even if it works. It is also subject to failure if you change parts of the system at a later date.

[andyscraven]

Thanks for the very cryptic reply :-) OK, allow me to be more specific in my questions. I need to return data to the server when the visitor clicks through the page and goes via tracking software to a sales page. Do you know of a good approach that will work asynchronously using AJAX? I have the data prepared before the page is served via PHP and I have inserted the data as such: xmlhttp.open("POST","http://localhost:8888/dl/wd.php",false);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("data=NSwsLCwsLCwsMDAsLDAwLCw=&logfilename=andy.csv");The other issue I am having is that the parameters 'data' and 'logfilename' are not recognised by a $_GET within wd.php. I get the following PHP error: Undefined index: logfilename in /Applications/MAMP/htdocs/dl/wd.php on line 6Any help would be great!Andy

[jeffman]

1. Attach your click handler to a "neutral" element, like a span, a button, or an image. Don't attach it to a link or a form or anything else that would cause a page reload. If you're using a link because you like the hover behavior, than use CSS to style the new element so it has similar behavior. 2. your AJAX open() method specifies the message type as POST, which is correct since you are writing data to your server. So look for your data in the $_POST array.

[andyscraven]

I have been too close to this today and the $_POST should have been screaming out at me! So Thanks for that! So are you saying that if I put the onCLick() in a <div> or a <span> etc I should be able top use 'true' and not 'false' for the ASync? It doesn't seem to work, here is the HTML code: <div class="cta" onclick="storeStats()"><a href="http://mylink.com"><img src="buttonimage.png" border="0"></a></div> Is that wrong? Andy

[jeffman]

You still have a link, and the way it's set up, it's impossible not to click on the link. Why is there a link? There's probably something I don't understand yet.

[andyscraven]

The link takes the visitor through to the next page to buy or sign up to something.So the data needs to be sent as they leave the page.

[jeffman]

Then you should probably use a traditional form instead of AJAX. If you need to process the form data first, you can capture the form's submit event.

[jeffman]

I should add that when wd.php has finished writing the data, it can send a location header that sends the user to your final destination page.

[andyscraven]

I originally did have a Location header and pass the data via a HTTP form (?data=fred&moredata=bert) directly to wd.php but I am concerned that will break the tracking software links, which uses cookies. For example, with Prosper 202 your outbound link is a php file (out.php), which contains the cookie stuff, so I am not sure that if I send them to that php file from wd.php via a Location Header if it will all work right correctly. Does that make sense? I guess what I am asking is. If I leave the page to go to my wd,php file and then once that is done use a Location Header to run the Tracker PHP file (out.php) will they still have access to the visitors cookies etc?

Edited June 4, 2013 by andyscraven

[jeffman]

I don't see why they wouldn't be. The browser will load out.php exactly as if it had arrived there through a link or the user typing the address directly into the location bar.

[andyscraven]

Hi, Yes it works better with a form, much cleaner! I had tried it before but now managed to get it to work correctly. Now it is storing the data and then forwarding to the tracking software fine! Thanks for all your input!