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).
<!-- Event snippet for Contacto Formulario Web conversion page
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
<script>
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;
}
</script>For the header I already configured it like this (note that UA and AW IDs are sample IDs)
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123456789-0');
gtag('config', 'AW-123456789');
</script>
<!-- Event snippet for Contacto Formulario Web conversion page
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
<script>
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;
}
</script>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:
<div class="modal fade" id="contactFormModal" tabindex="-1" role="dialog" aria-labelledby="contactFormModalLabel" aria-hidden="true">
<div class="modal-dialog">This is the code for the button that is inside the form:<button onclick="return gtag_report_conversion('http://mywebsite.com')" class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">SEND</button>
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!
