When we deployed our new site at Internetavdelningen last week, one of our goals was to get better at measuring conversions. Naturally, one of the main goals of the site is to convince potential clients to get in contact with us. Because our contact form is powered by the (absolutely awesome) Gravity Forms WordPress-plugin, we had to find a way to setup Gravity Forms Analytics Goals.
The easy way – a separate confirmation page
If that suits your page design and structure, it is easiest to just configure your Gravity form with a confirmation page. See the form settings screenshot below. You just have to create a page, which thanks for the submission or something like that and choose this page in the form settings.
Now it’s only left to add the page as goal to your Google Analytics profile. Click on the “Admin” item in the top menu on the right site and than on your profile in the Profiles tab, in your profile, choose the “Goals” tab and add a goal in one of the sets. Name and activate the goal, choose “URL Destination” and copy the permalink of your confirmation site into the “Goal URL” field. Now, after a few hours (or max one day) your conversion statistics should appear under “Conversions” in the “Standard Reporting” section.
How to do it without a confirmation page
The solution was the somewhat unintuitive goal-type called “Event”. You select it instead of “URL Destination” in the goal settings.
Fortunately there is a great generator to do almost all the work for you. If you follow all the steps, including the described goal settings, the only task left is to add the generated tracking code to the submit button. That’s quite easily done with the Gform-submit-button-filter, provided by Gravity Forms.
Here is the code snippet that adds the tracking code with an onclick-handler to the submit button of the form with id=1. Add it to your themes functions.php.
EDIT:There seems to be an Gravity Forms upgrade that breaks the original code. That is because there is already an onclick-event on the submit-button in the new version. So we just have to append our tracking code to the onclick-event. Note that onclick is written in all non-capital letters, in the original version of my snippet it was onClick, which confused the HTML-parser. Thanks to @MrPeyler for sending me a note and helping me testing.
add_filter("gform_submit_button_1", "add_conversion_tracking_code", 10, 2);
function add_conversion_tracking_code($button, $form) {
$dom = new DOMDocument();
$dom->loadHTML($button);
$input = $dom->getElementsByTagName('input')->item(0);
if ($input->hasAttribute('onclick')) {
$input->setAttribute("onclick","_gaq.push(['_trackEvent', 'Contact', 'Information Request', 'Contact Form',, false]);".$input->getAttribute("onclick"));
} else {
$input->setAttribute("onclick","_gaq.push(['_trackEvent', 'Contact', 'Information Request', 'Contact Form',, false]);");
}
return $dom->saveHtml();
}
And here the original WordPress filter, which doesn’t work with newer Gravity Forms versions:
add_filter("gform_submit_button_1", "add_conversion_tracking_code", 10, 2);
function add_conversion_tracking_code($button, $form) {
$dom = new DOMDocument();
$dom->loadHTML($button);
$input = $dom->getElementsByTagName('input')->item(0);
$input->setAttribute("onClick","_gaq.push(['_trackEvent', 'Contact', 'Information Request', 'Contactform',, false]);");
return $dom->saveHtml();
}
Happy conversion tracking, with your Gravity Forms Analytics Goals!
Hi and thanks for the tip!
The only problem I’ve got is that I don’t receive any email since I add your code to my functions.php.
Am I doing something wrong?
add_filter("gform_submit_button_2", "add_conversion_tracking_code", 10, 2);
function add_conversion_tracking_code($button, $form) {
$dom = new DOMDocument();
$dom->loadHTML($button);
$input = $dom->getElementsByTagName('input')->item(0);
$input->setAttribute("onClick","_gaq.push(['_trackEvent', 'Contact', 'Enquiry', 'Booking Form',, false]);");
return $dom->saveHtml();
}
The form ID is 2, all the rest is copied from your code.
Since I add the code to the php file the form stop sending me emails but not errors are displayed.
Could yo please help me with it?
Thanks.
Hi Tony,
the form is working if you remove that code? If you submit the form, does it create an entry or is the whole submission process not working?
Thanks for your feedback
Daniel
Hi Daniel,
just to say thanks for this article – it really helped pull some stuff together for me and I now have it all working.
Didn’t really want to use another confirmation page – this is much neater.
Thanks again.
Hi Paul,
thank you so much!
Daniel
Thanks for this great post. I have another possibility: directing the form to an appended URL (e.g. mysite.com/?form=true) and set this URL as the goal. Can you see anything wrong with this? Thanks.
Hi Daniel,
First, thanks for putting this up. It’s been very helpful.
I have a question about the “onClick” event. If a person clicks the Submit button, but the form has errors, would that count towards your analytics numbers as a form submission?
Yes it would. As we are triggering the google event from the client-side, we can never be really sure that the form actually has been send. But you could take further measures to be almost sure, like validating the form with jQuery before you send it and trigger the google event.
I much better and easier solution is just to paste the JavaScript into the “text confirmation” response. Make sure you disable the auto-formatting. This requires no PHP and only executes when VALID submissions are made. Error responses won’t be logged as actions. Here is what I’ve been using
_gaq.push(['_trackEvent', 'Forms', 'Submit', '{form_title}']);oh 2 things, 1 thanks for the tut, it put me on the right track. and 2nd, it removed my “script” tags, don’t forget to add wrap the above in javascript tags
Great article! thanks a lot for sharing this useful info with us.
Thank you so much for this! Wish there was a way to enter the onclick event in the form settings as opposed to adding it via function, but glad to have a solution.
Hi, I would like to ask if this is applicable for multiple buttons. Currently I have 6 form submission buttons. What I need to do is just make variation to function names right?
Thanks Daniel For this method. I have tried it on my contact form but GA goals still says 0% conversion. I have added this code in functions.php
add_filter("gform_submit_button_2", "add_conversion_tracking_code", 10, 2);
function add_conversion_tracking_code($button, $form) {
$dom = new DOMDocument();
$dom->loadHTML($button);
$input = $dom->getElementsByTagName('input')->item(0);
if ($input->hasAttribute('onclick')) {
$input->setAttribute("onclick","_gaq.push(['_trackEvent', 'Forms', 'submit', 'Kontakt Martin',, true]);".$input->getAttribute("onclick"));
} else {
$input->setAttribute("onclick","_gaq.push(['_trackEvent', 'Forms', 'submit', 'Kontakt Martin',, true]);");
}
return $dom->saveHtml();
}
and these in GA event based goals
Category | that matches | Forms
Action | that matches | submit
Label | that matches | Kontakt Martin
Is there anything i am doing wrong in this process.
Thanks
Hi, your code looks right, but I might be missing something. I would recommend the following debugging approach:
_gaq.push(['_trackEvent', 'Forms', 'submit', 'Kontakt Martin',, true]);is the first command listed in the onclick event, if not your filter is not workingGood luck!
Hi, Thanks for reply, i don’t know why i cannot get comment update on my email but thanks for reply.
After reading few google groups discussion I have now used even tracking code on onsubmit=”” like this
so its trigger on submission of form rather onclick as false submission will also record in that way.
Whole function looks like this
add_filter(“gform_form_tag”, “form_tag”, 10, 2);
function form_tag($form_tag, $form){
if ($form[“id”] == 2){
//the form whose tag you want to change, return the unchanged tag
$mycode = ‘_gaq.push([“_trackEvent”, “Forms”, “submit”, “Kontakt”,, true]);’;
$form_tag = str_replace(“method=’post'”, “method=’post’ onsubmit='” . $mycode . “‘”, $form_tag);
return $form_tag;
}
if ($form[“id”] == 3){
$mycode = ‘_gaq.push([“_trackEvent”, “Forms”, “submit”, “Sharing”,, true]);’;
$form_tag = str_replace(“method=’post'”, “method=’post’ onsubmit='” . $mycode . “‘”, $form_tag);
return $form_tag;
}
if ($form[“id”] == 4){
$mycode = ‘_gaq.push([“_trackEvent”, “Forms”, “submit”, “ShareResponsive”,, true]);’;
$form_tag = str_replace(“method=’post'”, “method=’post’ onsubmit='” . $mycode . “‘”, $form_tag);
return $form_tag;
}
return $form_tag;
}
What you think ?
code added tracking code like this
I am trying to receive data from this.
code added tracking code like this
[]
I am trying to receive data from this.
Hi Daniel,
Would the equivalent of this for Google Universal Analytics be to replace the _gaq.push to the ga(‘send’, ‘event’) method? So it would look like this:
add_filter(“gform_submit_button_1”, “add_conversion_tracking_code”, 10, 2);
function add_conversion_tracking_code($button, $form) {
$dom = new DOMDocument();
$dom->loadHTML($button);
$input = $dom->getElementsByTagName(‘input’)->item(0);
if ($input->hasAttribute(‘onclick’)) {
$input->setAttribute(“onclick”,”ga(‘send’, ‘event’, ‘Forms’, ‘Submit’, ‘Registration’);”.$input->getAttribute(“onclick”));
} else {
$input->setAttribute(“onclick”,”ga(‘send’, ‘event’, ‘Forms’, ‘Submit’, ‘Registration’)”);
}
return $dom->saveHtml();
}
Thanks!
Hello Daniel.
first of all, thanks a lot for the great tutorial. It helped me quite a lot :). Anyway, I have a small issue now. Have you tried this code with new Google Analytics universal? It seems they are using different syntax for triggering these virtual pageviews, see: https://developers.google.com/analytics/devguides/collection/analyticsjs/pages so I tried to use it instead an old code but for some reason goals aren’t tracked. Onclick event is on place, see my form at http://www.logotypek.cz (button called “Odeslat objednávku”) and it should be also set up properly but nothing gets tracked. Could ajax be also the issue here?
This is altered code I used:
add_filter("gform_submit_button_1", "add_conversion_tracking_code", 10, 2);
function add_conversion_tracking_code($button, $form) {
$dom = new DOMDocument();
$dom->loadHTML('' . $button);
$input = $dom->getElementsByTagName('input')->item(0);
if ($input->hasAttribute('onclick')) {
$input->setAttribute("onclick","ga('send', 'pageview', '/zakladni-balicek');".$input->getAttribute("onclick"));
} else {
$input->setAttribute("onclick","ga('send', 'pageview', '/zakladni-balicek');");
}
return $dom->saveHtml();
};
Thanks a lot for your help! Jakub
Hi, I just confirmed another comment above that might show a solution. Havn’t testet it, though. Will try to find the time to make this possible with the universal code, thanks for your comment!
We build a WP plugin that handles this quite easily for you 🙂
http://vruc.ht/gfga.
We are building an update to handle multipages via ajax as well :).
Hi Everyone,
I try to use the update from Josh. It works! I really gain benefit from it since I already update our Google Analytics to Universal.
All I can say is WOW and THANK YOU! I actually needed this for integrating MailChimp Goals which use onclick to track. SO awesome…thanks again, kind soul!
Hi, is there an updated tutorial for Universal Analytics? I’m trying to track Google Ads conversions. I was told I could simply put a script like this in the confirmation box, but I’m not sure it’s working.
_gaq.push([‘_trackPageview’, ‘/estimate-lawn-care/thank-you’]);
Hi Daniel & CIA.
I have been in touch with Gravity Forms Support and they cannot give an easy solution for Onclick Google Event Tracking, like contact form has.
I can imagine generating leads in one of the main reasons why many people purchase this Premium plugin and therefore tracking is one of the most important features.
I read tickets on this matter since 2010, they told me is on their list of requested features but still has not been done. WHY? IS IT THAT DIFFICULT? Am I the only one thinking this is senseless?
I am not a code writer and I need an easy solution. Can anyone upload a demovideo with the steps to follow?
Thanks!
Why don’t we update this to onmouseup? It fires just before the click event
http://www.w3schools.com/jsref/event_onmouseup.asp
Or perhaps, why not add this code in the confirmation message?
_gaq.push(['_trackEvent', 'Contact', 'Information Request', 'Contact Form',, false]);Like Jamie said. I’ve just tested and it works….
If you’re using Confirmation type ‘Text’, it lets you insert HTML, so all you have to do is insert the Google Analytics script after your confirmation message (making sure you tick the ‘Disable Auto-formatting’ box):
Your confirmation message
ga(‘send’, ‘event’, ‘Enquiry’, ‘Submission’, ‘My Enquiry Form’);
Just change ‘Enquiry, Submission and My Enquiry Form’ to your own Category, Action and Label to exactly match your Analytics Goal settings.
No silly messing about with under the hood WordPress stuff.
You are welcome to also try this WordPress plugin for event tracking with Gravity Forms, which has come in handy for quite a few people.