Contact Form: send js with send-button

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

Contact Form: send js with send-button

Post by macangelo »

Hi all

My client - respectively his SEO advisor - wishes to perform conversion tracking and asked me to implement an onClick js-snippet in the send button that sends an event to Google. Here are the instructions for what this script shall do:
https://developers.google.com/analytics ... ackerGuide

Is there already this possibility and I missed it? Can I do that?

Thanks a lot!

Best
macangelo
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Contact Form: send js with send-button

Post by Oliver Georgi »

Do it using a rel and a specific class/id and trigger it this way. You are free to add onClick anywhere you like in the source. But I would do it wrapping it in custom DOM ready.

Code: Select all

$(function() {
    // track me
    var trackMe = $('.trackme');

    if(trackMe.length > 0) {
        
        trackMe.on('click', function(event) {
            // whatever to track, take info from attr('title') or attr('rel') or data('track') or…
            _gaq.push(['_trackEvent', 'Generic', 'Click Action', 'Whatever']);
        });

    }

});
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
tholu
Posts: 1
Joined: Fri 27. Mar 2015, 16:00

Re: Contact Form: send js with send-button

Post by tholu »

Actually, it is not that simple. Because after the submit-button is clicked, the form is submitted immediately and the async _trackEvent call is canceled.
It works like this:

Code: Select all

(function($) {
$(document).ready(function() {

    var submitButton = $('#ID_OF_SUBMIT_BUTTON');

    if(submitButton.length > 0) {
    	
    	_gaq.push(['_setAccount', 'UA-xxx-1']); // make sure the account is set correctly, e.g. if async code was not used for _trackPageview
        
        submitButton.click(function(e) {
        	// prevent the form being submitted
    		e.preventDefault();
    		e.stopPropagation();

    		// keep a reference to this DOM element for the callback
    		var _this = this;
    		_gaq.push(['_set', 'hitCallback', function() {
    			$(_this).parents('form').first().submit(); // submit underlying form
			}]);
			_gaq.push(['_trackEvent', 'Your', 'Event', 'Data']);
			return !window._gat; // Ensure that the event is bubbled if GA is not loaded
        });
    }
});
})(jQuery);
Since conversion tracking is very important, phpwcms should think about an (optional) simple two-step contact form with a real "/thankyou"-page after the submit. This would make it incredibly easier to setup conversion tracking.
Post Reply