Goal Tracking through Submit Button with Event Tracking

Posted by Hiren on August 24th, 2009 | Web Analytics

One of my client have a Newsletter Signup Form; when users filled the fields and click the Submit Button the “thank you” message displays in the same page.

I want to track a click on a Submit Button of Newsletter Signup Form as a goal in Google Analytics. After bit research on that topic I learn that it can only be done by Event Tracking is a feature of Google Analytics. Idea is to track the submit event (onSubmit=) of the form.

event-trackingFirst let understand about event tracking. Event Tracking is a feature of Google Analytics you use to track different actions visitors take on your website, such as clicking a button or downloading a file.

It is useful for tracking actions on your website that don’t take the user to a new page [such as clicking play on a video player OR display thanks message on same page after submit button click (as per my client's case) ].

The specification for the _trackEvent() method is: 

pageTracker._trackEvent(_GAcategory, _GAaction, _GAlabel, _GAvalue);

Steps for track submit event in Google Analytics:

  1. Make sure you have implemented Google Analytics tracking code on your website.
  2. Use pageTracker._trackEvent(”Contact Forms”, “Newsletter Signup”); on onSubmit event.

    3. So it might be:

    onSubmit="pageTracker._trackEvent("Contact Forms", "Newsletter Signup");”

    In this scenario, the reports for Events would display Contact Forms as the Category, Newsletter Signup as the Action.

  3. Log into Google Analytics Account.
  4. Click on the “Content Tab” found on the left sidebar.
  5. Click on “Event Tracking”, than Labels.
  6. Place the Google Analytics Tracking Code in your HTML ABOVE these (_trackEvent() method) calls so the JavaScript is already loaded. To be safe, put it just after the opening tag.

event-track-small

[NOTE:Place the Google Analytics Tracking Code in your HTML ABOVE these _trackEvent() method calls so the JavaScript is already loaded. To be safe, put it just after the opening tag.]

under: Web Analytics     

About Hiren

Hiren Ponkia is a Freelance SEO Consultant in India and the author of the SEO Addicted blog. Actively association to the Search Engine Marketing since last 5 years has helped Hiren to develop the understanding & foresight of today’s online market trends, leading to achieve the pinnacle top in the SERP’s as well as the conversion game.

9 Comments
SeoEngima Said,
August 24th, 2009 @11:31 pm  

thanks for providing helpful information..

Gravatar
Acme Infoway Said,
August 25th, 2009 @1:03 am  

It will be very helpful information Hiren. Thanks for proving information.

Gravatar
Jaamit SEO Said,
August 25th, 2009 @2:55 am  

Event tracking is definitely a very useful feature in GA – but unfortunately you can’t use events as Goals, so I still use the old school method of tracking events as pageviews using pageTracker_TrackPageView(”fakepage.html”)…

Gravatar
Hiren Said,
August 25th, 2009 @3:48 am  

@Jaamit SEO You are right. You won’t be able to track this form submission as a “Goal”, but you can track it as an event.

But problem with this is that when you put a name in the _trackPageview function …you’re creating a false page view with that URI name. In essence, you’re tricking Google Analytics into thinking that you DO have a page called /fakepage.html.

Gravatar
Richard Said,
September 14th, 2009 @2:30 pm  

hi…i’m working on my new site to track my contact us form submission with google analytics.this is the url of my site
(http://www.lucknowchicken.com/home.html)

I want when use click on submit button , google analytics works and send the tracker info about the user who submit the form.

could you plz tell me how to use google analytics for my form submission.

1.
———————————————————————————————–
i’m using this code on my send message button

———————————————————————————————–

2.
———————————————————————————————–
and this bit of code before the in the end of the page which google analytics genrate .

var gaJsHost = ((”https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(”%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

try {
var pageTracker = _gat._getTracker(”UA-10646217-1″);
pageTracker._trackPageview();
} catch(err) {}

———————————————————————————————–

Gravatar
Richard Said,
September 15th, 2009 @2:16 pm  

Hi Hiren,thanks for your reply.Still i’m waiting for your new tutorial on google analytics on ajax form submission.

I don’t get any solution to my problem and still i’m looking for help.
Could you please solve my this problem.I subscribe your RSS and i’m sure it will help me lots in future.

I have a Ajax contact us form which i implement with my help.html file.So when user click on help.html page , the Ajax form appears with other content of help.html page.My ajax contact form don’t have any other thank you page or successfully submission page which can appear after submitting form.

A thank you message appears within my same Ajax contact page.

So i want when user open my help.html page and click send message button after filling my contact form my google analytics works and i get information about that form submission in my google analytics account.

Thanks ..awaiting for your reply.

Gravatar
Hiren Said,
September 15th, 2009 @2:43 pm  

Hi Richard,

I can not find any contact us form at http://www.lucknowchicken.com/home.html and from you comment what I have understand is you have a Ajax contact us form and when someone click on Submit button, A thank you message appears within my same Ajax contact page. right?

I already explained Event tracking process here. Re-read it again and you will get batter idea. OR upload your content us form somewhere and send me URLs so I can digg into the code.

Happy to help mate.

- Hiren.

Gravatar
Richard Said,
September 15th, 2009 @8:23 pm  

Hi Hiren…sorry last time i have’nt provide you current links to my site.

here is the link for my Ajax Form (plz copy and paste this link to address bar)

http://www.lucknowchicken.com/Ajax-Form/homepage+ajaxform.html

and this is the link where you can download my Ajax Form files (plz copy and paste this link to address bar)

http://www.lucknowchicken.com/Ajax-Form/Download.rar

Please try to solve my problem…Thanks

Gravatar
dbf Said,
September 30th, 2009 @9:57 am  

thanks for this info. question: i have my tracking code in a footer.php include for all of my pages. you mention –

[NOTE:Place the Google Analytics Tracking Code in your HTML ABOVE these _trackEvent() method calls so the JavaScript is already loaded. To be safe, put it just after the opening tag.]

do you mean that i should take my tracking code out of the footer and place it BEFORE the form in my html?

Gravatar
Related Posts
Leave Your Comments Below

Please Note: All comments will be hand modified by our authors so any unsuitable comments will be removed and you comments will be appreared after approved