I realize similar posts have addressed this issue, however, the additional element of the modal in addition to ajax does not seem to have been addressed and I believe this is my issue. So, I have a modal form on my website. The button for the form is within the header. I am trying to get google analytics to track when the form has been submitted.
我意识到类似的帖子已经解决了这个问题,但是,除了ajax之外,模式的附加元素似乎没有得到解决,我相信这是我的问题。所以,我的网站上有一个模态表单。表单的按钮位于标题内。我正在尝试让谷歌分析跟踪表单何时提交。
See Ajax here:
在这里查看Ajax:
$(document).ready(function() {
$('form').submit(function(e){
e.preventDefault();
var f = $('#modalForm');
$.ajax({
type: "POST",
url: "mail/modalFormSubmit.php",
success: function(){
$('form').hide();
$("#modalSignup").html("<p><i class='fa fa-check'></i> Thank you for contacting us!</p>");
_gaq.push(['_trackEvent', 'Goal', 'submit', 'Modal Submit']);
},
data: f.serialize()
});
});
});
I've added the GA tracking code within the model at this time, when I insert it directly into the header I simply get false positives from other pages on the site:
我此时在模型中添加了GA跟踪代码,当我将其直接插入标题时,我只是从网站上的其他页面获得误报:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Quality Products and Solutions</h4>
</div>
<div class="modal-body">
<form id="modalForm" name="modalForm" method="post" action="">
<label>Name <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-7 col-md-offset-0">
<input type="text" name="name" class="form-control" required>
</div>
</div>
<label>Email <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-7 col-md-offset-0">
<input type="email" name="email" class="form-control" required>
</div>
</div>
<label>City <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-7 col-md-offset-0">
<input type="text" name="city" class="form-control" required>
</div>
</div>
<label>State <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-7 col-md-offset-0">
<input type="text" name="state" class="form-control" required>
</div>
</div>
<label>Phone Number </label>
<div class="row margin-bottom-20">
<div class="col-md-7 col-md-offset-0">
<input type="tel" name="tel" class="form-control" required>
</div>
</div>
<label>Message <span class="color-red">*</span></label>
<div class="row margin-bottom-20">
<div class="col-md-11 col-md-offset-0">
<textarea rows="8" name="message" class="form-control" required></textarea>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn-u">Send Message</button>
</form>
<div id="modalSignup"></div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'xxxxxx']); removed for Stack overflow submittal
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</div>
</div>
</div>
</div>
I'm sure I don't even need the tracking code within the modal but I'm trying as many variables as I can. My apologies again if this is redundant but I can not find anything on the site that addresses this specific issue.
我确定我甚至不需要模态中的跟踪代码,但我正在尝试尽可能多的变量。如果这是多余的,我再次道歉但我在网站上找不到解决此特定问题的任何内容。
1 个解决方案
#1
0
The code and logic look correct. Here are a couple thoughts:
1. Are you sure the success function is firing when the form submits?
2. Where is the modal coming from, is it on the page already and gets hidden/shown or is it a loaded remotely? If the latter, it may not know about the variables set in the parent page.
3. _gaq may not be defined when the callback on the form runs. Have you checked for errors in the console or set a breakpoint in the success function to see what is happening?
代码和逻辑看起来正确。以下是一些想法:1。您确定成功函数在表单提交时触发了吗? 2.模态来自哪里,它是否已经在页面上被隐藏/显示或是否是远程加载的?如果是后者,它可能不知道父页面中设置的变量。 3.当表单上的回调运行时,可能无法定义_gaq。您是否检查过控制台中的错误或在成功函数中设置断点以查看发生了什么?
#1
0
The code and logic look correct. Here are a couple thoughts:
1. Are you sure the success function is firing when the form submits?
2. Where is the modal coming from, is it on the page already and gets hidden/shown or is it a loaded remotely? If the latter, it may not know about the variables set in the parent page.
3. _gaq may not be defined when the callback on the form runs. Have you checked for errors in the console or set a breakpoint in the success function to see what is happening?
代码和逻辑看起来正确。以下是一些想法:1。您确定成功函数在表单提交时触发了吗? 2.模态来自哪里,它是否已经在页面上被隐藏/显示或是否是远程加载的?如果是后者,它可能不知道父页面中设置的变量。 3.当表单上的回调运行时,可能无法定义_gaq。您是否检查过控制台中的错误或在成功函数中设置断点以查看发生了什么?