如何使用 jQuery click 函数在 iFrame 中跟踪 Google Analytics

Question

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

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

iFrame 内的 HTML 示例：

   <a class="btn1" href="1.html">button 1</a>
   <a class="btn2" href="2.html">button 2</a>
   <a class="btn3" href="3.html">button 3</a>
   <a class="btn4" href="4.html">button 4</a>

父页面内的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 - 所以我假设父页面没有看到任何 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

对于任何偶然发现此线程并正在寻找类似答案的人 - 在其他 stackoverflow 帖子（以及来自 deantoni 的一些更正代码）和一些冗长的 Google 线程的帮助下，这就是我找到的解决方案行得通。

假设是：

• iFrame 是可编辑的。
• 在同一个域下。
• 您在父框架中有 Google Analytics 跟踪代码，支持事件跟踪。

使用的 iFrame HTML：

<a class="button1" href="1.html">button 1</a>

使用的 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() 方法here 的更多信息