How to Track a Google Analytics Custom Event on an Embedded Form?

Question

I have a form that is embedded on my site via JavaScript. How can I track a custom event in Google Analytics when that form is submitted?

I have a form them is embedded in my site by including a JavaScript tag, like the following:

<script src="https://app.convertkit.com/landing_pages/531.js?orient=horz"></script>

Where the tag is included, HTML is injected onto the page. Here is an example:

  <div class="ck_embed_form ck_horizontal_subscription_form">
  <div class="ck_embed_form_content">
      <h3 class="ck_embed_form_title">Freelance Pricing Handbook</h3>
      <div class="ck_embed_description">
        <span class="ck_image">
          <img alt="Book-portrait" src="http://s3.amazonaws.com/convertkit/subscription_forms/images/004/811/858/standard/Book-Portrait.png?1398265358">
        </span>
          <p>Are you confused about how you should price your services? Maybe you are worried that you are charging clients too much or too little. I'll help you find the perfect price for your business.</p>
      </div>
  </div>   

  <div id="ck_success_msg" style="display:none;">
    <p>Thanks! Now check your email.</p>
  </div>

    <!--  Form starts here  -->
    <form id="ck_subscribe_form" class="ck_subscribe_form" action="https://app.convertkit.com/landing_pages/531/subscribe" data-remote="true">
      <input type="hidden" name="id" value="531" id="landing_page_id">
      <p class="ck_errorArea"></p>
      <div class="ck_control_group">
        <label class="ck_label" for="ck_firstNameField">First Name</label>
        <input type="text" name="first_name" class="ck_first_name" id="ck_firstNameField" required="">
      </div>  
      <div class="ck_control_group">
        <label class="ck_label" for="ck_emailField">Email Address</label>
          <input type="email" name="email" class="ck_email_address" id="ck_emailField" required="">
      </div>
      <label class="ck_checkbox" style="display:none;">
        <input class="optIn ck_course_opted" name="course_opted" type="checkbox" id="optIn" checked="">
        I'd like to receive a free 30 day course by email.
      </label>

      <button class="subscribe_button ck_subscribe_button btn fields" id="ck_subscribe_button">
        Get the Free Book
      </button>
      <span class="ck_guarantee">We won't send you spam. Unsubscribe at any time.</span>
    </form>
  </div>

Here is my attempt at collecting the event in Google Analytics. The event handler is not firing when the form is submitted:

$("#ck_subscribe_form").on('submit', function(e) {
  console.log('testing google anayltics custom event');
  _gaq.push(['_trackEvent', 'Newsletter', 'Subscribe', 'Freelance Pricing Handbook']);
});

How can I track this event?

You can see a live example of this here: Freelance Pricing Handbook The custom tracking code isn't live until I can get this squared away.

Answer 1

Make sure your jquery library supports the on function (1.7+) and that you're attaching the event after the DOM is ready by using the document ready syntax. The following worked fine for me:

<script src="https://app.convertkit.com/landing_pages/531.js?orient=horz"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
  $('#ck_subscribe_form').on('submit',function(){
    console.log('testing google anayltics custom event');
    _gaq.push(['_trackEvent', 'Newsletter', 'Subscribe', 'Freelance Pricing Handbook']);
  });
});
</script>