AdWords
2.2K members online now
2.2K members online now
Get started with AdWords - learn the basics to get set up for success
Guide Me
star_border
Reply

Implementing conversion tracking with js based form

N/A
# 1
N/A

I am trying to figure out how to implement adwords conversion tracking in this web template that we purchased. I am not very familiar with javascript but here is how I believe it works:  When someone hits the submit button, a file (forms.js) processes whether the form was filled out correctly.  If it was filled out correctly, the .js file sends the form information to a mailhandler.php file (which notifies us via email of the form submission) as well as sends something back to the site telling it to display the successful submission message (which is in a hidden <div> tag).  So there is no actual thank-you page on which to include any conversion tracking code.

 

I just started using Google's Tag Manager so I am sure there is a way to utilize this to trigger the conversion code upon a successful form submission, I just cannot figure it out myself.  

 

Any ideas?

 

Thank you in advance!!

 

The contact form is here:  http://www.unitedsupportllc.com/#!/page_mail

 

And the forms.js code is here:

//forms
;(function($){
	$.fn.forms=function(o){
		return this.each(function(){
			var th=$(this)
				,_=th.data('forms')||{
					errorCl:'error',
					emptyCl:'empty',
					invalidCl:'invalid',
					notRequiredCl:'notRequired',
					successCl:'success',
					successShow:'4000',
					mailHandlerURL:'bat/MailHandler.php',
					ownerEmail:'myemail@address.com',
					stripHTML:true,
					smtpMailServer:'localhost',
					targets:'input,textarea',
					controls:'a[data-type=reset],a[data-type=submit]',
					validate:true,
					rx:{
						".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
						".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
						".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
						".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
						".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
						".message":{rx:/.{20}/,target:'textarea'}
					},
					preFu:function(){
						_.labels.each(function(){
							var label=$(this),
								inp=$(_.targets,this),
								defVal=inp.val(),
								trueVal=(function(){
											var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
											return defVal==''?defVal:tmp
										})()
							trueVal!=defVal
								&&inp.val(defVal=trueVal||defVal)
							label.data({defVal:defVal})								
							inp
								.bind('focus',function(){
									inp.val()==defVal
										&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
								})
								.bind('blur',function(){
									_.validateFu(label)
									if(_.isEmpty(label))
										inp.val(defVal)
										,_.hideErrorFu(label.removeClass(_.invalidCl))											
								})
								.bind('keyup',function(){
									label.hasClass(_.invalidCl)
										&&_.validateFu(label)
								})
							label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
						})
						_.success=$('.'+_.successCl,_.form).hide()
					},
					isRequired:function(el){							
						return !el.hasClass(_.notRequiredCl)
					},
					isValid:function(el){							
						var ret=true
						$.each(_.rx,function(k,d){
							if(el.is(k))
								ret=d.rx.test(el.find(d.target).val())										
						})
						return ret							
					},
					isEmpty:function(el){
						var tmp
						return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
					},
					validateFu:function(el){							
						el.each(function(){
							var th=$(this)
								,req=_.isRequired(th)
								,empty=_.isEmpty(th)
								,valid=_.isValid(th)								
							
							if(empty&&req)
								_.showEmptyFu(th.addClass(_.invalidCl))
							else
								_.hideEmptyFu(th.removeClass(_.invalidCl))
							
							if(!empty)
								if(valid)
									_.hideErrorFu(th.removeClass(_.invalidCl))
								else
									_.showErrorFu(th.addClass(_.invalidCl))								
						})
					},
					getValFromLabel:function(label){
						var val=$('input,textarea',label).val()
							,defVal=label.data('defVal')								
						return label.length?val==defVal?'nope':val:'nope'
					}
					,submitFu:function(){
						_.validateFu(_.labels)							
						if(!_.form.has('.'+_.invalidCl).length)
							$.ajax({
								type: "POST",
								url:_.mailHandlerURL,
								data&colon;{
									name:_.getValFromLabel($('.name',_.form)),
									email:_.getValFromLabel($('.email',_.form)),
									phone:_.getValFromLabel($('.phone',_.form)),
									fax:_.getValFromLabel($('.fax',_.form)),
									state:_.getValFromLabel($('.state',_.form)),
									message:_.getValFromLabel($('.message',_.form)),
									owner_email:_.ownerEmail,
									stripHTML:_.stripHTML
								},
								success: function(){
									_.showFu()
								}
							})			
					},
					showFu:function(){
						_.success.slideDown(function(){
							setTimeout(function(){
								_.success.slideUp()
								_.form.trigger('reset')
							},_.successShow)
						})
					},
					controlsFu:function(){
						$(_.controls,_.form).each(function(){
							var th=$(this)
							th
								.bind('click',function(){
									_.form.trigger(th.data('type'))
									return false
								})
						})
					},
					showErrorFu:function(label){
						label.find('.'+_.errorCl).slideDown()
					},
					hideErrorFu:function(label){
						label.find('.'+_.errorCl).slideUp()
					},
					showEmptyFu:function(label){
						label.find('.'+_.emptyCl).slideDown()
						_.hideErrorFu(label)
					},
					hideEmptyFu:function(label){
						label.find('.'+_.emptyCl).slideUp()
					},
					init:function(){
						_.form=_.me						
						_.labels=$('label',_.form)

						_.preFu()
						
						_.controlsFu()
														
						_.form
							.bind('submit',function(){
								if(_.validate)
									_.submitFu()
								else
									_.form[0].submit()
								return false
							})
							.bind('reset',function(){
								_.labels.removeClass(_.invalidCl)									
								_.labels.each(function(){
									var th=$(this)
									_.hideErrorFu(th)
									_.hideEmptyFu(th)
								})
							})
						_.form.trigger('reset')
					}
				}
			_.me||_.init(_.me=th.data({forms:_}))
			typeof o=='object'
				&&$.extend(_,o)
		})
	}
})(jQuery)
$(window).load(function(){
	$('#form1').forms({
		ownerEmail:'#'
	})
})


1 Expert replyverified_user

Re: Implementing conversion tracking with js based form

Top Contributor
# 2
Top Contributor
Interesting problem. You can't use the Javascript part of the conversion code when you use Ajax, which is what this code does. This will depend a bit on what _.showFu() does. You could add code to that function to create the image part of the conversion script. Or you could add code to the piece shown above that would do the same. Or create a funtion that does this and call it whenever you call _.showFu().

I'm really not sure what would happen if you include just the image part of the script in the hidden div. What I don't know is whether the content in the hidden division is loaded before it is shown. If the image in the hidden div is loaded when the page loads, all visits to the page will record a conversion. If the content loads when the div is displayed, that would record the conversion when the div is shown. I don't know if it will work, I haven't tried it that way.

Best of Luck!

Pete
petebardo -- Deadhead doing AdWords

Re: Implementing conversion tracking with js based form

N/A
# 3
N/A
Yeah, it has been a struggle finding a solution... I have tried a few different options but I am at the end of my expertise Smiley Happy

Unfortunately, the hidden div does load along with the page, so that isn't an option.

As for adding any code, I just submitted it to someone on fiverr to see if it is something they think they could do.

I believe that showFu sends back either "error" or "success" which tells the site which hidden divs to unhide. But I am not sure... this is out of my realm.

Well, I was chasing the javascript variable option so thank you for taking me off that path. Saved me some frustration and time Smiley Happy

Jason

Re: Implementing conversion tracking with js based form

Top Contributor
# 4
Top Contributor
Hi Jason,

Create a Javascript function:

function recordConversion() {
myImg = new Image();
myImg.height=1;
myImg.width=1;
myImg.src="https://www.googleadservices.com/pagead/conversion/1234567890/?value=10.00&amp;label=xxxxxxxxxxxxxxx...
document.body.appendChild(myImg)
}

Replace "1234567890" with your conversion id, assign the true value of the sale, and replace "xx..xx" with the conversion label from the AW conversion script.

You can place this in a script block on the page or in a .js that gets loaded with the form. Then, capture the value returned by showFu(). If is "success", call the function to record the conversion. You can not return the function with Ajax.

It is not clear that showFu() returns a value. If not, you can test to see if the Div with the success message is visible. If it is, the form submission was successful.

Best of Luck!

Pete
petebardo -- Deadhead doing AdWords

Re: Implementing conversion tracking with js based form

N/A
# 5
N/A
Hello again,

Thank you for your response and ideas. Unfortunately, I have yet to solve this dilemma. I tried using your code but was unsuccessful at figuring out what that showFu() returns... however, I am not confident in my ability to figure out how to do so.

Another thing I have been trying is the Custom Event Macro in Google Tag Manager. I set it to look for recordConversion when this code is fired:

dataLayer.push({'event': 'eventNameXYZ'});

I have tried to put that code in certain places inside the forms.js file (the code above) but haven't yet triggered a conversion.

Any ideas on WHERE I could place that code to cause it to trigger upon a successful form submission?

Thanks again for your help!

Jason

Re: Implementing conversion tracking with js based form

Top Contributor
# 6
Top Contributor

Hi Jason,

 

(I'm looking at this piece of your code:

 

if(_.validate)
		_.submitFu()
	else
		_.form[0].submit()
		return false
	})

 This says to me, if form passes all data checks, do _.submitFu(). That's where I would record the conversion. Create the function I posted earlier, then call that function right after _.submitFu(). That should do the trick for you.

 

Let me know how it goes.

 

Pete

 

petebardo -- Deadhead doing AdWords