如何在嵌入式表单上跟踪谷歌分析自定义事件

Question

我有一个表单是通过JavaScript嵌入在我的网站。当提交表单时，我如何在Google分析中跟踪自定义事件?

我有一个表单，它们嵌入在我的网站，包括一个JavaScript标签，像下面:

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

包含标签的地方，HTML被注入到页面中。下面是一个例子:

  <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>

这是我在Google分析中收集事件的尝试。当提交表单时，事件处理程序没有触发:

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

如何跟踪此事件?

你可以在这里看到一个活生生的例子:自由职业者定价手册自定义跟踪代码不是活的，直到我能得到这个平方。

Answer 1

确保您的jquery库支持on函数(1.7+)，并且在DOM准备好之后使用文档准备语法附加事件。下面的代码对我来说很好:

<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>