I need your advice!
I recently launched my fathers site http://www.skulptour.eu which has a booking form on this page http://www.skulptour.eu/will-kommen/buchung/
The form is validated with the jQuery Validation Plugin and fires an ajax call for the booking-form-process.php (which sends the an notification e-mail to my dad) inside the submit handler of the plugin.
Here is the code to demonstrate the structure
/*
*
* contact-form.js
*
*/
$(document).ready(function(){
//form
var booking_form = $('#booking-form');
var booking_form_success = $("#booking-form-success");
//add workshop validation rule
jQuery.validator.addMethod( "isworkshop",
function(value, element)
{
return /^(W(O|E)|S)\s?\-?14\s?\-?\d{2}\s*?$/i.test(value);
},
"Geben Sie eine Workshop-Kennnung ein. Beispiel: WO-1420 oder S-1421"
);
//validate form
booking_form.validate(
{
rules: {
/ .... /
},
messages: {
/ .... /
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('has-success').addClass('has-error');
},
success: function(element) {
$(element).closest('.control-group').removeClass('has-error').addClass('has-success');
$(element).closest('.error').remove();
},
submitHandler: function() {
console.log("submitHandler: call ajax");
$.ajax({
url:'/site/mail/booking-form-process.php',
data: booking_form.serialize(),
type:'POST',
success:function(booking_form)
{
console.log("submit Handler: ajax: sucess");
$("#booking-form").hide();
$("#booking-form-success").fadeIn(500,1);
},
error:function(data)
{
$("#error").show().fadeOut(5000);
}
}); // ajax
} // submitHandler
}); // validate (jQuery Plugin)
}); //doc ready
Now i'd like to add a custom google analytics event tracker, which fires only if the ajax call is successfully executed.
i already tried to add the following lines right after submitHandler: function () {
//google analytics event
console.log("submitHandler: google analytics call event");
ga('send', 'event', 'buchung', 'click', 'workshoptyp', 1);
but it won't work. unfortunately i've no experience with the google analytics events yet and i updated my Analytics Account to use the new Universal.js, which itself is implemented properly.
Do you guys have any ideas, how to solve this?
Pseudocode: Booking Form > Validation w/ Errors > Ajax Call (Some php) > Ajax Call Successful > Fire Google Analytics Tracker
Thanks in advance!
- topada
I need your advice! I recently launched my fathers site http://www.skulptour.eu which has a booking form on this page http://www.skulptour.eu/will-kommen/buchung/ The form is validated with the jQuery Validation Plugin and fires an ajax call for the booking-form-process.php (which sends the an notification e-mail to my dad) inside the submit handler of the plugin. Here is the code to demonstrate the structure /* * * contact-form.js * */ $(document).ready(function(){ //form var booking_form = $('#booking-form'); var booking_form_success = $("#booking-form-success"); //add workshop validation rule jQuery.validator.addMethod( "isworkshop", function(value, element) { return /^(W(O|E)|S)\s?\-?14\s?\-?\d{2}\s*?$/i.test(value); }, "Geben Sie eine Workshop-Kennnung ein. Beispiel: WO-1420 oder S-1421" ); //validate form booking_form.validate( { rules: { / .... / }, messages: { / .... / } }, highlight: function(element) { $(element).closest('.control-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.control-group').removeClass('has-error').addClass('has-success'); $(element).closest('.error').remove(); }, submitHandler: function() { console.log("submitHandler: call ajax"); $.ajax({ url:'/site/mail/booking-form-process.php', data: booking_form.serialize(), type:'POST', success:function(booking_form) { console.log("submit Handler: ajax: sucess"); $("#booking-form").hide(); $("#booking-form-success").fadeIn(500,1); }, error:function(data) { $("#error").show().fadeOut(5000); } }); // ajax } // submitHandler }); // validate (jQuery Plugin) }); //doc ready Now i'd like to add a custom google analytics event tracker, which fires only if the ajax call is successfully executed. i already tried to add the following lines right after submitHandler: function () { //google analytics event console.log("submitHandler: google analytics call event"); ga('send', 'event', 'buchung', 'click', 'workshoptyp', 1); but it won't work. unfortunately i've no experience with the google analytics events yet and i updated my Analytics Account to use the new Universal.js, which itself is implemented properly. Do you guys have any ideas, how to solve this? Pseudocode: Booking Form > Validation w/ Errors > Ajax Call (Some php) > Ajax Call Successful > Fire Google Analytics Tracker Thanks in advance! - topada
