Fire Custom Google Analytics Event after jQuery ajax Call is successful

[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

[ryan]

I don't know the answer to your question here, but I'm replying to bump it up in case someone else knows. Also moving this to the dev talk forum since it's not specific to ProcessWire. 

[chrizz]

Hey topada,

have you read this post by Google?
https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide

As far as I remember you only should call something like this to trigger an event:

_gaq.push(['_trackEvent', 'Videos', 'Downloaded', 'Gone With the Wind']);

I don't know if this project uses the actual GA lib, but somehow event tracking is working here

http://www.ansegeln-berlin.de/ansegeln/unterhavel/

Take a look at the print functionality. The event is trigger in the JS file here

http://www.ansegeln-berlin.de/assets/templates/ansegeln-berlin-v1/js/jquery.custom.js

These events show up in my GA account as expected. I hope this will help you

[chrizz]

whooop.... now I'm using the new GA as well...

The documentation for the new event tracking can be found here:

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

I don't know, if it works as expected

[r2d2]

If you're using Universal Analytics (the new/beta Google Analytics), here's how to add an event ...

ga('send', 'event', { 'eventCategory' : 'Your Category Here', 'eventAction': 'Your Action Here -- like click, view, etc', 'eventLabel': 'Event Label Value Here' } );