I know this is possible to track how many people have actually clicked on the submit button of form, but my form has a validation, if someones click on submit without entering a value, GA will count this, but this is not a real submission.
How do i track how many people have actually submitted the form using GA?
please let me know
thanks
You can output the GA code on success of your post request. A basic in page php example would be something like this:
if(isset($_POST)){
echo "<script>_gaq.push(['_trackEvent', 'Contact', 'Inquiry', 'Inquiry Form', 0, false]);<script>";
}
You can also use the onSubmit function. A client side solution would be this:
<form id="form-name" name="form-name" action="submission-url-goes-here" method="post"
onSubmit="_gaq.push(['_trackEvent', 'FormName', 'FormSubmit', 'FormSubmissionCompleted']);">
Related
I was wondering if someone have had this type of issue when tracking form submissions from a hubspot form.
To give you some context, our client' site is an SPA and has x3 different Hubspot form.
The solution I applied to track form submissions was to create a Custom HTML HubSpot Success Listener Tag, and then I created a look-up table to pass the form ID in a more friendly way.
The issue I'm having is that when I debug this implementation and subscribe to more than one form during the same session, the second submission duplicates:
I know I can configure the tag to fire once per event, instead of once per page. However, I don't want to lose the ability to count a second form during the same session because it's possible a user will want to fill out one form to receive information and another form to arrange a meeting.
Should I get the web developers involved to implement a dataLayer push for each form?
Thanks.
First, you want to debug your existing solution. You don't need GTM for it, though you can still use it. For the debugging, you will want to know what HS returns in their callback on form submission.
Just open your console, paste a listener that would show you the payload coming with it and inspect it:
window.addEventListener("message", function(event) {
console.log(event.data);
});
You will see something like this:
This indicates that we get three callbacks on form submission. You can listen for any of these.
Ah, looks like I'm getting the same form IDs that you have on your screenshot. Now, I'm not sure where that ID comes from. It's likely your developers and not HS are responsible for form IDs. I don't imagine HS could make such a trivial mistake. So ask the devs to change the form ids.
If they can't set unique ids for the forms, then yes, they will have to push custom events there.
We are using Marketo form for lead capturing and using munchkin for lead tracking. Right now, we are facing an issue: when we browse the website for the first time the Marketo form is loading properly and submitted successfully but after the first submission the Marketo form does not show up agian. We are using WordPress for our website.
We are using this Marketo js: //app-sj17.marketo.com/js/forms2/js/forms2.min.js
Loading form as follows:
MktoForms2.loadForm("//app-sj17.marketo.com", "025-WCE-875", 1000, function(form) {
// Add an onSuccess handler
});
Putting it inside : <form id="mktoForm_1000" style="display:none;"></form>
Any help will be valuable.
Thanks
In the form editor there is a setting that affects this behaviour.
Go to the Settings tab in the form editor and look for the “If Known Visitor, Show” setting. Make sure that you have the “Form” option selected as opposed to the Custom HTML”. Please see the screenshot below.
Explanation: before the first form fillout your visitor is unknown, so the form is shown every time. However, after the form submission your visitor will be known, thus if you have this setting enabled, the form will be hidden afterwards.
I use this code:
<script>
document.addEventListener( 'wpcf7invalid', function( event ) {
ga('send', 'event', 'Contact Form', 'SubmitError');
}, false );
</script>
to track fileds errors.
Everthing is fine but i just want to add also the class of the filed, and track with dom-event wpcf7invalid also the class of the fileds.
Can someone help me with that?
Thank you!
Just create one thank you page in your website and after submitting the form redirect to that page using contact form 7 function. You can find in contact configuration of each form in wp-admin.
After set this you can track a lead from Google analytics which user come from contact form to thank you page those all leads.
If you try to tracking means it will help you
I have a form on my site that, upon a successful completion, triggers a confirmation message in a modal. I need to be able to track the conversions on this form. I think I need an event tracker here, but I can't figure out where I'd put it.
The form is at http://www.nearlynewlywed.com/a/sell
The best practice is to create a virtual page view that will simulate a "thank you" page that will trigger the goal.
Execute this JS code when the form is validated and submitted:
_gaq.push(['_trackPageview', '/your-directory/form/thank-you']);
If you use Universal Analytics, then:
ga('send', 'pageview', '/your-directory/form/thank-you');
Now the thank you page will be rendered as a pageview, which will appears on your reports and Goals' funnel visualization. Remember to set the "/your-directory/form/thank-you" as the goal destination on Google Analytics.
If I understand your question correctly, you should push and event to GA when your form is validated and it passes. That means, if every field is ok, then at the same time you send the command to open the modal window you send a ga tracking command like this.
_gaq.push(['_trackEvent', 'Form', 'Success', 'Form x was completed']);
You could do something like this with jQuery
$('#formId').on('submit', function(){
_gaq.push(['_trackEvent', 'Form', 'Success', 'Form x was completed']);
});
OR add this to your form HTML tag
<form action="action.php" onsubmit="_gaq.push(['_trackEvent', 'Form', 'Success', 'Form x was completed'])">
I want to call below code (Google Tracking code) if the form is validated successfully.
onclick="dataLayer.push({'event': 'NewsletterSignup'});"
If I add it to "onclick" event, it fires every time without considering the validation.
please let me know how should I call it only after validating the form. I searched in Google Tag Manager developer guide but could not find any help regarding this.
Please advise.
I think all you need is to change your onclick handler to include the validation. Something like this:
onclick="function() { if(validate_form()) dataLayer.push({'event':'NewsletterSignup'}); }"
I'm not a Javascript programmer so I hope that's the correct syntax. All I've done is to introduce the validation check into the onclick. If the check passes we push the event to the data layer (I assume that validate_form() returns a boolean).
Your idea of firing the tracking code on the new page after the form is submitted is another possibility. That could work. You could just add a rule in GTM for that tag (tracking code) that causes it to fire on the new page (assuming that the only time that the new page is loaded is after a newsletter signup has occurred).
I think using the onclick handler above is the simplest solution.