Jump to content

Fire Custom Google Analytics Event after jQuery ajax Call is successful


topada
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 2 weeks later...

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' } );

  • Like 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...