联系表单7 on_sent_ok无法在弹出式灯箱

时间:2016-05-24 13:02:39

标签: wordpress google-analytics contact-form-7

希望你们能提供帮助,我已经摸不着头几个小时而没有到达任何地方。

我在Wordpress网站上使用联系表格7生成了三种不同的表格。

我已成功在Google Analyics中为其中两个(经过测试且运行良好)设置了工作目标,但是第三个表单位于灯箱(jingle.js)和on_sent_ok:函数中#39; t work。

我认为它存在某种javascript冲突,但这超出了我的知识范围,而且我正在努力解决这个问题。

如果需要,很高兴发布代码段。

联系表格7中的其他设置代码

on_sent_ok: "ga('send', 'event', 'Cruise', 'sent');"

分析

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-70825582-1', 'auto');
  ga('send', 'pageview');

</script>

然后是页面上的实际html

<div class="tingle-demo tingle-demo-tiny" style="display:none;z-index:999999999999;">
    <div class="enquiry">
        <h2 class="h-blue">Your cruise enquiry</h2>
        <div role="form" class="wpcf7" id="wpcf7-f6127-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/experience-it-cruise/princess-12nt-asia-adventure/#wpcf7-f6127-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="6127" />
<input type="hidden" name="_wpcf7_version" value="4.4.2" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f6127-o1" />
<input type="hidden" name="_wpnonce" value="dd2dd60e8a" />
</div>
<p>* Required field</p>
<div class="enquiry-left fl"><span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First name*" /></span><span class="wpcf7-form-control-wrap username-wrap" style="display:none !important; visibility:hidden !important;"><input class="wpcf7-form-control wpcf7-text"  type="text" name="username" value="" size="40" tabindex="-1" /><span class="hp-message">Please leave this field empty.</span></span><br />
<span class="wpcf7-form-control-wrap email"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email*" /></span>
<p class="no-p">Cabin type</p>
<p><span class="wpcf7-form-control-wrap cabin-type"><select name="cabin-type" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Inside">Inside</option><option value="Outside">Outside</option><option value="Ocean view">Ocean view</option><option value="Balcony">Balcony</option><option value="Suite">Suite</option></select></span></p></div>
<div class="enquiry-right fr"><span class="wpcf7-form-control-wrap surname"><input type="text" name="surname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Surname*" /></span><br />
<span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Telephone*" /></span>
<p class="no-p">Preferred time for a call back</p>
<p><span class="wpcf7-form-control-wrap preferred-time"><select name="preferred-time" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="9am - 11am">9am - 11am</option><option value="11am - 1pm">11am - 1pm</option><option value="1pm - 3pm">1pm - 3pm</option><option value="3pm - 6pm">3pm - 6pm</option><option value="After 6pm">After 6pm</option></select></span></p></div>
<div class="spacer"></div>
<p><input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>   </div>
</div>


<script type="text/javascript">

var modalTiny = new tingle.modal({
    onClose: function() {
        console.log('close tiny modal');
    }
});

modalTiny.init();

var btn = document.querySelector('.js-tingle-tiny');
btn.addEventListener('click', function(){
    modalTiny.setContent(document.querySelector('.tingle-demo-tiny').innerHTML);
    modalTiny.open();
});

0 个答案:

没有答案