Question

我有一个通过JavaScript嵌入我网站的表单。如何在提交该表单时跟踪Google Analytics中的自定义事件？

我有一个表单，它们嵌入我的网站，包含一个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 Analytics中收集活动的尝试。提交表单时，事件处理程序不会触发：

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

如何跟踪此事件？

你可以在这里看到一个实际的例子：Freelance Pricing Handbook自定义跟踪代码直到我可以得到这个平方。

Answer 1

确保您的jquery库支持on函数（1.7+），并且在DOM准备就绪后使用document ready语法附加事件。以下对我来说很好：

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

如何在嵌入表单上跟踪Google Analytics自定义事件？

1 个答案: