如何使用jQuery点击function在iFrame中跟踪Google Analytics

我有一个iframe（相同的域），并希望能够从父页面跟踪iframe内的按钮用法。

我不希望将跟踪直接嵌入iframe的原因是我在不同的页面上共享iFrame，并希望能够通过jQuery中的父页面跟踪事件来跟踪它的独特用法。

iFrame中的示例HTML：

button 1 button 2 button 3 button 4 

父页面中的jQuery：

 $(document).ready(function() { $('.btn1').click(function () { _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 1]); }); $('.btn2').click(function () { _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 2]); }); $('.btn3').click(function () { _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 3]); }); $('.btn4').click(function () { _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 4]); }); }); 

这不行。 如果我查看父页面源代码，那么只有iFrame引用，没有HTML – 所以我假设父页面没有看到任何附加click事件的iFrames div类？

我对jQuery很新…如果我错过了一些有些明显错误的错误，那么道歉！

编辑1：

我现在尝试修改父页面上的脚本：

 $(document).ready(function() { $('.iframe').contents().find('.btn1').click(function () { alert("Button 1 Pressed!"); }); $('.iframe').contents().find('.btn2').click(function () { alert("Button 2 Pressed!"); }); $('.iframe').contents().find('.btn3').click(function () { alert("Button 3 Pressed!"); }); $('.iframe').contents().find('.btn4').click(function () { alert("Button 4 Pressed!"); }); }); 

并为iframe分配了class =“iframe”。

当我从父页面点击iframe内的按钮时 – 没有触发警报。

Answer 1

对于任何偶然发现这个线程并且正在寻找类似答案的人 – 在其他stackoverflowpost（以及来自deantoni的一些更正代码）和一些冗长的谷歌线程的帮助下，这就是我得到的解决方案。

假设是：

• iFrame是可编辑的。
• 属于同一个域名。
• 您在父框架中拥有Google Analytics跟踪代码，并提供事件跟踪支持。

使用的iFrame HTML：

 button 1 

使用的iFrame jQuery：

 $(document).ready(function() { $('.button1').click(function() { window.parent.triggerButton1(); }); }); 

使用的父框架jQuery：

  window.triggerButton1 = function (){ _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', 'button 1']); } 

Answer 2

如果您正在使用具有相同域/协议和端口的iFrame，则可以使用jQuery方法contents() ，此方法可以访问iFrame的DOM，并且从那里您可以对其执行任何操作。

一个例子是：

 $("#iFrame").contents().find(".btn1").click(function () { _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 3]); } 

您可以在此处找到有关.contents()方法的更多信息