How to track the “Submit” button using Google Analytics?

Question

<!--=== Footer ===-->
    <div class="footer">
        <div class="container">
            <div class="row-fluid">
                <div class="span4">
                    <!-- About -->
                    <div class="headline">
                        <h3>About</h3>
                    </div>
                    <p class="margin-bottom-25">QOS Technology is the only company in India which offers exclusive Check Point support and services to customers who are using Check Point security products.</p>

                    <!-- Monthly Newsletter -->
                    <div class="headline">
                        <h3>Monthly Newsletter</h3>
                    </div>
                    <p>Subscribe to our newsletter and stay up to date with the latest checkpoint security news and updates!</p>
                    @using (Html.BeginForm("Subscribe", "Home", FormMethod.Post, new { id = "subscribeForm", @style = "display: inline;" }))
                    {
                        @Html.AntiForgeryToken()
                        <div class="input-append">
                            <input type="email" id="subscriptionEmail" name="email" placeholder="Email Address" class="input-medium" />
                            <button type="submit" class="btn btn-u">Subscribe</button>
                        </div>
                    }

                </div>

Plese, help me in setting up the event tracking. The google analytics is reflecting the page views and i also tried to include something like onclick="ga(.............) but it didn't reflect anything. Our website is built on Asp.Net, So for the following footer code. I just want to track Newsletter Submission button. I,e when a user enters his email Id and clicks on subscribe button . I have already pasted Google analytics Snippet in the page and google is reflecting page views properly.

Thank you

Answer 1

Well, this depends on where the form leads the user. If the form redirects the user to another page, I'd suggest adding the Analytics snippet to the other page. If you can't make changes to that page, add another file with the snippet to act as a "bridge"; the page tracks the user count using Analytics and automatically redirects them to the destination page.

If you're just using a javascript click event for the subscribe button, you could add an AJAX event to that method. Use that to load another page which has the Analytics snippet.

Answer 2

Why do you may have a problems with the tracking: if after submit button website is redirecting on the othew website page, GA may do not have enough time to send hit to the GA servers(after click and before redirection, sometimes this time is milliseconds).

What possible solutions:

1. Use jQuery prevent default function along with GA hitCallback function . How to use:
   • When user trying to send form, we are stop this action(by "preventDefault)"
   • After that we're sending event to GA with "hitCallback" function;
   • As a callBack function for "hitCallback" we need to set up submission of the form, which was prevented in p.1. CallBack function is firing only afte hit will be 100% passed to GA.

But as I remember from my practice, ASP.NET websites have only one HTML "form" tag on the page(even if multiple forms are actually on page), so this approach on the ASP websites with multiple forms may be a real brain pain.

2. Fire event code on the next page after form submission. If you have separate "thank you"-page for the newsletter form, this is the best and easiest approach for you to fire event on this page.