如何跟踪嵌入式表单上的Google Analytics自定义事件？ [英] How to Track a Google Analytics Custom Event on an Embedded Form?

问题描述

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

我有一个表单，它们通过包含JavaScript标记嵌入到我的网站中，如下所示：

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

在包含标签的地方，HTML被注入页面。以下是一个例子：

 < div class =ck_embed_form ck_horizo​​ntal_subscription_form> 
< div class =ck_embed_form_content> 
< h3 class =ck_embed_form_title>自由定价手册< / h3> 
< div class =ck_embed_description> 
< span class =ck_image> 
< img alt =书画src =http://s3.amazonaws.com/convertkit/subscription_forms/images/004/811/858/standard/Book-Portrait.png?1398265358> ; 
< / span> 
< p>您是否对应该如何定价服务感到困惑？也许你担心你收取的客户太多或太少。我会帮您找到适合您业务的完美价格。< / p> 
< / div> 
< / div> 
 
< div id =ck_success_msgstyle =display：none;> 
< p>谢谢！现在检查您的电子邮件。< / p> 
< / div> 
 
 <！ - 表格从此处开始 - > 
< form id =ck_subscribe_formclass =ck_subscribe_formaction =https://app.convertkit.com/landing_pages/531/subscribedata-remote =true> 
< input type =hiddenname =idvalue =531id =landing_page_id> 
< p class =ck_errorArea>< / p> 
< div class =ck_control_group> 
< label class =ck_labelfor =ck_firstNameField>名字< / label> 
< input type =textname =first_nameclass =ck_first_nameid =ck_firstNameFieldrequired => 
< / div> 
< div class =ck_control_group> 
< label class =ck_labelfor =ck_emailField>电子邮件地址< / label> 
< input type =emailname =emailclass =ck_email_addressid =ck_emailFieldrequired => 
< / div> 
< label class =ck_checkboxstyle =display：none;> 
< input class =optIn ck_course_optedname =course_optedtype =checkboxid =optInchecked => 
我想通过电子邮件收到免费的30天课程。 
< / label> 
 
< button class =subscribe_button ck_subscribe_button btn fieldsid =ck_subscribe_button> 
获取免费书
< / button> 
< span class =ck_guarantee>我们不会向您发送垃圾邮件。随时取消订阅。< / span> 
< / form> 
< / div> 
  

以下是我在Google Analytics中收集活动的尝试。提交表单时事件处理程序不会触发：

  $（＃ck_subscribe_form）。on（'submit'，功能（e）{
 console.log（'测试google anayltics自定义事件'）; 
 _gaq.push（['_ trackEvent'，'通讯'，'订阅'，'自由定价手册'）） ; 
}）; 
  

如何追踪此事件？

您可以在这里看到一个实例：自由定价手册自定义跟踪代码直到我能把这个摆平。

解决方案

请确保您的jquery库支持on函数（1.7+），并且在DOM准备通过使用文档准备语法。以下工作适合我：

 < script src =https://app.convertkit.com/landing_pages/531的.js东方= HORZ>？< /脚本> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> 
< script type ='text / javascript'> $（'＃ck_subscribe_form'）。on（'submit'，function（）{
 console.log（'testing google anayltics custom event'）; 
 _gaq.push（['_ trackEvent'，'通讯'，'订阅'，'自由定价手册']）; 
}）; 
}）; 
< / script> 
  

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.

解决方案

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>

这篇关于如何跟踪嵌入式表单上的Google Analytics自定义事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！