Canvas Support

Google Ads Conversion

2 replies · opened Dec 19, 2018

Gg163264Dec 19, 2018

I would like to use Google Ads to track conversions when a user successfully send a contact form with the SEND button.
I'm currently using "Modal Contact Form" which is based on the example you provided in your template, some example also shows a green box in a corner message when a user fill the required fields and press the SEND button, and there is a validation that show field borders as red (indicating those fields needs to be filled) also provided by you in some example.

According to Google I should include the following code and call it from the button I want to track (in my case the SEND button).


function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
      'send_to': 'AW-123456789/aBcDEPv9Ju5sTT3sT',
      'event_callback': callback
  });
  return false;
}

For the header I already configured it like this (note that UA and AW IDs are sample IDs)


    
    
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-123456789-0');
        gtag('config', 'AW-123456789');
    
    
    
        function gtag_report_conversion(url) {
            var callback = function () {
                if (typeof(url) != 'undefined') {
                    window.location = url;
                }
            };
            gtag('event', 'conversion', {
                'send_to': 'AW-123456789/aBcDEPv9Ju5sTT3sT',
                'event_callback': callback
                });
        return false;
        }

I'm not using a "thank you" page, and I don't want to redirect to any other page. I want the user to see how the modal contact form dissapeared, then see the message box appear but staying in the same page (without reloading or redirect).

When I use the following code, the page redirects to the URL (in the example mywebsite.com) and don't validate the fields, and don't show the success message window neither.

This is the header of my modal contact form:

This is the code for the button that is inside the form:
SEND

I guess I will need to include somehow part of the code inside functions.js below contact form validation but I do not know where or how to do the call.
Also, I have the same contact form in every page, how can I do so the URL parameter for gtag_report_conversion function is always the current webpage url?

Please you help.

Thanks!

SSemicolon WebSTAFFDec 24, 2018

Hello,

  1. Keep all the Google Analytics tracking code on the Page except the gtag_report_conversion function.

  2. Find the contactForm: function() Function Block in the js/functions.js File and replace it with:

contactForm: function(){

	if( !$().validate ) {
		console.log('contactForm: Form Validate not Defined.');
		return true;
	}

	if( !$().ajaxSubmit ) {
		console.log('contactForm: jQuery Form not Defined.');
		return true;
	}

	var $contactForm = $('.contact-widget:not(.customjs)');
	if( $contactForm.length ');
				} else {
					$(form).find('.form-process').fadeIn();
				}

				$(form).ajaxSubmit({
					target: elementResult,
					dataType: 'json',
					success: function( data ) {
						if( elementLoader == 'button' ) {
							defButton.html( defButtonText );
						} else {
							$(form).find('.form-process').fadeOut();
						}
						if( data.alert != 'error' && elementRedirect ){
							window.location.replace( elementRedirect );
							return true;
						}
						if( elementAlert == 'inline' ) {
							if( data.alert == 'error' ) {
								var alertType = 'alert-danger';
							} else {
								var alertType = 'alert-success';
							}

							elementResult.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + alertType ).html( data.message ).slideDown( 400 );
						} else {
							elementResult.attr( 'data-notify-type', data.alert ).attr( 'data-notify-msg', data.message ).html('');
							SEMICOLON.widget.notifications( elementResult );
						}
						if( $(form).find('.g-recaptcha').children('div').length > 0 ) { grecaptcha.reset(); }
						if( data.alert != 'error' ) {
							$(form).clearForm();
							gtag('event', 'conversion', {
								'send_to': 'AW-123456789/aBcDEPv9Ju5sTT3sT'
							});
						}
					}
				});
			}
		});

	});
},

The url is not required since you wouldn't be redirecting your users. Additionally, also remove the onclick attribute from the button Tag.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard