Question

I have an ajax form that I’m trying to track with Google Web site Optimizer. The form sends an email.

<%= f.email_field :email, :placeholder => "Enter your email address", :size => 40 %>
  <%= f.submit '', :class => 'subscriberSubmit', :id => 'subscriber_submit', :onclick => "doGoal(this);return false;" %>
<p>

<input id="subscriber_email" name="subscriber[email]" placeholder="Enter your email address" size="40" type="email">

My js.erb file:

$('.loadingImage').fadeOut();
$("#subscriber_submit").removeClass("subscriberSubmitInactive").addClass("subscriberSubmit");
$('#email_form').before("<div id=\"email_sign_up_failure\"><p>Uhm, something's wrong. Mind trying again?</p></div>");

The form works fine until I add the onclick call to set the GWO beacon, it’s sending me to an undefined route. I’m assuming the conflict is with jQuery, and I figure I can maybe call the function from inside my js file instead of in an onclick event, but javascript is very new to me and I’m not sure how to call the function from within jQuery, which itself is in another piece of javascript:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-1195012']);
  function doGoal(that) { 
    try {
  _gaq.push(['gwo._trackPageview', '/136300081/goal']);
  setTimeout('document.location = "' + that.href + '"', 100) 
    } 
    catch(err){} 
   }
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- End of Google Website Optimizer Tracking Script -->

I tried jQuery’s click event on the button id, but it didn’t seem to work.

EDIT

<form accept-charset="UTF-8" action="/subscribers" class="new_subscriber" data-remote="true" id="new_subscriber" method="post">
<script> 
 $(function() {
    $( "#subscriber_submit" ).click(function () {
        $(this).removeClass("subscriberSubmit").addClass("subscriberSubmitInactive");
        $('.loadingImage').fadeIn();
    });
});
</script> 

<p id="email_form"> 

<label for="subscriber_email">Email</label><br /> 
<input id="subscriber_email" name="subscriber[email]" placeholder="Enter your email address" size="40" type="email" /> 
  <input class="subscriberSubmit" id="subscriber_submit" name="commit" type="submit" value="" /> 
<p> 

</form> 
</div> 

Answer 1

I ended up just putting the _gaq.push(['gwo._trackPageview', '/136300081/goal']); in my jQuery call after the click event listener.